Analytics

Track your portal's performance and understand your audience with analytics tools.

Add New Analytics

Click the "Add New Analytics" button to connect a tracking provider.

Analytics Configuration Form:

1. Analytics Type * (Required)

   • Dropdown with supported providers
   • Options include:
     • Google Analytics (GA4)
     • Google Tag Manager (GTM)
     • Microsoft Clarity
     • Plausible Analytics
     • Custom/Other

2. Name (Optional)

   • Friendly identifier for this analytics configuration
   • Example: "Main Analytics", "Secondary Tracking", "Staging Analytics"
   • Helps distinguish multiple analytics when configured
   • Default: Uses provider name if left empty

3. Tracking Code * (Required)

   • Large text area field
   • "Paste your tracking code here..."
   • Paste the complete tracking code from your analytics provider
   • Format depends on provider:
     • Google Analytics: Measurement ID (e.g., G-XXXXXXXXXX)
     • Google Tag Manager: Container ID (e.g., GTM-XXXXXXX)
     • Microsoft Clarity: Project ID (e.g., abc123xyz)
     • Custom scripts: Full <script>...</script> tag

4. Status Toggle: Active / Disabled

   • Toggle switch to enable or disable tracking
   • Active: Tracking code is loaded on portal pages
   • Disabled: Tracking code is not loaded (temporarily disable without deleting)
   • Default: Active when first added

Supported Analytics Providers

Google Analytics (GA4)

{
  type: "GoogleAnalytics",
  code: "G-ABC123XYZ",        // GA4 Measurement ID
  name: "Primary GA4",
  isActive: true
}

Where to find code:

• Google Analytics → Admin → Data Streams → Measurement ID
• Format: G-XXXXXXXXXX
• Old Format: UA-XXXXXXXXX-X (Universal Analytics - deprecated)

Setup Steps:

1. Create Google Analytics account at analytics.google.com (opens in a new tab)
2. Create a new GA4 property
3. Get your Measurement ID (starts with G-)
4. Click "Add New Analytics"
5. Select "Google Analytics" from type dropdown
6. Enter Name: "Production Analytics" (optional)
7. Paste Measurement ID in tracking code field
8. Set Active toggle to ON
9. Click Save
10. Tracking code automatically injected into all pages
11. Data appears in Google Analytics within 24-48 hours

Google Tag Manager (GTM)

{
  type: "GoogleTagManager",
  code: "GTM-1234567",        // Container ID
  name: "GTM Container",
  isActive: true
}

Where to find code:

• Google Tag Manager → Admin → Container ID
• Format: GTM-XXXXXXX

Setup Steps:

1. Create account at tagmanager.google.com (opens in a new tab)
2. Create a new container
3. Get your Container ID (starts with GTM-)
4. Click "Add New Analytics"
5. Select "Google Tag Manager"
6. Enter Name: "Main Tag Manager" (optional)
7. Paste Container ID in tracking code field
8. Set Active toggle to ON
9. Click Save
10. Configure tags, triggers, and variables in GTM dashboard
11. Publish your GTM container

Benefits of GTM:

• Manage multiple tracking codes from one place
• Add tracking without code changes
• Track custom events and interactions
• A/B testing and personalization
• Facebook Pixel, LinkedIn Insight Tag, etc.

Microsoft Clarity

{
  type: "microsoft-clarity",
  code: "abc123xyz",          // Project ID
  name: "Clarity Heatmaps",
  isActive: true
}

Where to find code:

• Microsoft Clarity → Settings → Project ID
• Format: Random alphanumeric string

Custom Analytics / Other Providers

{
  type: "custom",
  code: `<script>
    // Paste full tracking script here
    (function() {
      // Your custom analytics code
    })();
  </script>`,
  name: "Custom Tracker",
  isActive: true
}

Use for:

• Analytics providers not explicitly supported
• Custom self-hosted analytics
• Multiple tracking scripts combined

Multiple Analytics Example

You can configure multiple analytics providers simultaneously:

analytics: [
  {
    type: "GoogleAnalytics",
    code: "G-ABC123XYZ",
    name: "Primary GA4",
    isActive: true
  },
  {
    type: "GoogleTagManager",
    code: "GTM-1234567",
    name: "GTM Container",
    isActive: true
  },
  {
    type: "microsoft-clarity",
    code: "abc123def",
    name: "User Behavior Tracking",
    isActive: false  // Temporarily disabled
  }
]

Why Use Multiple?

• Primary and backup analytics
• Different tools for different purposes (GA for traffic, Clarity for heatmaps)
• Separate tracking for different stakeholders
• A/B testing different configurations

Managing Analytics

Adding Analytics:

1. Click "Add New Analytics" button
2. Select Analytics Type from dropdown
3. Enter Name (optional but recommended)
4. Paste Tracking Code from your provider
5. Toggle Active/Disabled status
6. Click Save or Add
7. Analytics entry appears in list

Editing Analytics:

• Click Edit button (✏️) next to analytics entry
• Update any field (type, name, code, status)
• Click Save to apply changes
• Useful for updating tracking IDs or toggling active status

Deleting Analytics:

• Click Delete button (🗑️) next to analytics entry
• Confirm deletion
• Analytics tracking removed from portal
• Alternative: Set to Disabled to keep configuration but stop tracking

Enabling/Disabling:

• Use Active/Disabled toggle to enable or disable
• Disabled: Keeps configuration but doesn't load tracking code
• Useful for:
  • Testing without analytics interference
  • Temporarily suspending tracking
  • Staging environments
• No need to delete and recreate