Installing Google Analytics 4 on Zyro | OpsBlu Docs

Installing Google Analytics 4 on Zyro

Complete guide to installing and configuring Google Analytics 4 (GA4) on your Zyro website using custom code or built-in integration.

Google Analytics 4 (GA4) is the latest version of Google's analytics platform. This guide covers both methods of installing GA4 on your Zyro site: built-in integration and custom code.

Prerequisites

Before installing GA4 on Zyro, you need:

  1. A Zyro account with a paid plan (Unleash, eCommerce, or eCommerce Plus)
  2. A Google Analytics 4 property - Create one in Google Analytics
  3. Your GA4 Measurement ID (format: G-XXXXXXXXXX)
  4. A published Zyro site (tracking only works on published sites)

Note: GA4 tracking requires a paid Zyro plan because custom code access is not available on the free plan.

The simplest way to add GA4 to your Zyro site using Zyro's built-in integration feature.

Step 1: Get Your GA4 Measurement ID

  1. Go to Google Analytics
  2. Select your GA4 property
  3. Navigate to Admin (gear icon at bottom left)
  4. Under Property, click Data Streams
  5. Click your Web data stream
  6. Copy your Measurement ID (format: G-XXXXXXXXXX)

Step 2: Add GA4 to Zyro

  1. Log in to your Zyro dashboard
  2. Select the website you want to track
  3. Click Settings in the left sidebar
  4. Scroll to Integrations section
  5. Find Google Analytics
  6. Click Connect or Add
  7. Paste your GA4 Measurement ID
  8. Click Save

Step 3: Publish Your Site

  1. Click the Publish button (top right)
  2. Wait for deployment to complete
  3. Visit your live site

Step 4: Verify Installation

  1. Go to Google Analytics
  2. Select your GA4 property
  3. Navigate to Reports > Realtime
  4. In a new browser tab, visit your published Zyro site
  5. Return to GA4 Realtime - you should see your visit appear within 30 seconds

Limitations of Built-in Integration:

  • Basic page view tracking only
  • No custom event tracking
  • Limited configuration options
  • Cannot track forms, buttons, or eCommerce events

If you need more than basic tracking, use Method 2 (Custom Code) instead.

Install GA4 using custom code for full control and advanced features.

Step 1: Get Your GA4 Tracking Code

  1. Go to Google Analytics
  2. Select your GA4 property
  3. Navigate to Admin (gear icon)
  4. Under Property, click Data Streams
  5. Click your Web data stream
  6. Click View tag instructions
  7. Select Install manually
  8. Copy the Global site tag (gtag.js) code

The code will look like this:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

Important: Copy the ENTIRE code block including both <script> tags.

Step 2: Add GA4 Code to Zyro

  1. Log in to your Zyro dashboard
  2. Select your website
  3. Click Settings in the left sidebar
  4. Scroll to Website code section
  5. Find the Header code field
  6. Paste your GA4 tracking code
  7. Click Save

Important Notes:

  • Use Header code, not Footer code
  • If you're using built-in GA4 integration, remove it first to avoid duplicate tracking
  • Make sure to click Save after pasting the code

Step 3: Publish Your Site

  1. Click the Publish button (top right corner)
  2. Wait for Zyro to deploy your changes (usually 1-2 minutes)
  3. Visit your live site to verify

Step 4: Verify Installation

Using GA4 Realtime Reports

  1. Go to Google Analytics
  2. Select your GA4 property
  3. Navigate to Reports > Realtime
  4. In a new browser tab, visit your published Zyro site
  5. Return to GA4 - you should see your visit appear within 30 seconds

Using Browser Developer Tools

  1. Open your published Zyro site
  2. Press F12 to open Developer Tools
  3. Go to the Network tab
  4. Filter by collect or google-analytics
  5. Reload the page
  6. Look for requests to https://www.google-analytics.com/g/collect

If you see these requests, GA4 is working correctly.

Using Google Tag Assistant

  1. Install Google Tag Assistant Chrome extension
  2. Visit your published Zyro site
  3. Click the Tag Assistant icon
  4. Verify that GA4 tag is firing
  5. Check that the Measurement ID is correct

Configuration Options

Enhanced Measurement

GA4's Enhanced Measurement automatically tracks common interactions. Configure in Google Analytics:

  1. Go to Admin > Data Streams
  2. Click your web stream
  3. Click Enhanced measurement
  4. Toggle specific automatic events:
    • Page views: Always enabled
    • Scrolls: Tracks 90% scroll depth
    • Outbound clicks: Tracks clicks to external links
    • Site search: Not applicable for most Zyro sites
    • Video engagement: Tracks YouTube/Vimeo videos
    • File downloads: Tracks PDF and file downloads

Recommended for Zyro:

  • ✓ Enable Page views (required)
  • ✓ Enable Scrolls (measure engagement)
  • ✓ Enable Outbound clicks (track external links)
  • ✓ Enable File downloads (if you have downloadable files)
  • ✓ Enable Video engagement (if you have embedded videos)
  • ✗ Disable Site search (most Zyro sites don't have search)

Custom Configuration Parameters

Modify the gtag('config') call to customize GA4 behavior:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX', {
    'cookie_domain': 'yourdomain.com',
    'cookie_expires': 63072000, // 2 years in seconds
    'anonymize_ip': true,
    'send_page_view': true
  });
</script>

Useful parameters for Zyro:

  • cookie_domain: Set to your custom domain
  • cookie_expires: Cookie lifetime (default is 2 years)
  • anonymize_ip: Anonymize IP addresses for privacy (GDPR)
  • send_page_view: Control automatic page view tracking

Debug Mode

Enable debug mode to see GA4 events in real-time during testing:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
    'debug_mode': true
  });
</script>

View events in Admin > DebugView in GA4.

Remember: Remove debug_mode: true before going to production.

Zyro-Specific Considerations

AI Website Builder

Zyro's AI tools create consistent page structures:

  • Consistent HTML: Similar pages have similar structure
  • Template-based: All pages follow the same template
  • Element classes: Zyro uses consistent class names (.zyro-button, .zyro-form, etc.)
  • Responsive: Mobile tracking works automatically

Dashboard Navigation

Access tracking settings through clear paths:

Zyro Dashboard → Select Website → Settings → Website code → Header code

Or for built-in integration:

Zyro Dashboard → Select Website → Settings → Integrations → Google Analytics

Multiple Pages

Zyro supports multi-page websites:

  • GA4 tracks each page automatically
  • Page URLs are tracked correctly
  • Page titles appear in reports
  • Navigation between pages is tracked

Custom Domains

GA4 works on both Zyro subdomains and custom domains:

  • Zyro subdomain: yoursite.zyro.space (works immediately)
  • Custom domain: yourdomain.com (works after DNS setup)

If using a custom domain, ensure it's properly connected before testing.

Mobile-First Design

Zyro templates are mobile-responsive:

  • Same tracking code works on all devices
  • GA4 automatically detects device type
  • Test on mobile devices
  • Most Zyro traffic is mobile

Performance Impact

GA4 is lightweight and loads asynchronously:

  • Baseline: Zyro sites are fast (good PageSpeed scores)
  • GA4 impact: Minimal (~5-10KB), loads asynchronously
  • Total impact: Usually <0.1s additional load time
  • Recommendation: GA4 is worth the minimal performance cost

Troubleshooting

GA4 Not Tracking

Problem: No data appears in GA4 Realtime reports.

Solutions:

  1. Verify paid plan: Ensure you have Unleash, eCommerce, or eCommerce Plus plan
  2. Check site is published: GA4 only works on published sites, NOT preview
  3. Verify Measurement ID: Format must be G-XXXXXXXXXX (not UA- or GTM-)
  4. Check code placement: Code should be in Header code, not Footer
  5. Remove duplicates: Don't use both built-in integration AND custom code
  6. Clear cache: Hard reload browser (Ctrl+Shift+R)
  7. Disable ad blockers: Test with ad blockers disabled
  8. Wait 24-48 hours: Standard reports can take up to 48 hours to populate

Tracking Works on Zyro Subdomain But Not Custom Domain

Problem: GA4 works on yoursite.zyro.space but not yourdomain.com.

Solutions:

  1. Wait for DNS propagation: Custom domains can take 24-48 hours
  2. Verify domain connection: Check custom domain is properly connected in Zyro
  3. Update cookie domain: Set cookie_domain parameter in GA4 config
  4. Clear browser cache: Hard refresh on custom domain
  5. Test in incognito: Use private browsing to avoid cache issues

Duplicate Tracking

Problem: Seeing double page views in GA4.

Causes:

  • GA4 installed via both built-in integration AND custom code
  • GA4 in both GTM and direct installation

Solutions:

  1. Check built-in integration: Remove GA4 from Settings → Integrations
  2. Check custom code: Search Header code for duplicate GA4 snippets
  3. Check GTM: If using GTM, remove direct GA4 installation
  4. Choose one method: Either built-in OR custom code OR GTM, not multiple

Events Not Appearing in GA4

Problem: Page views work, but custom events don't appear.

Solutions:

  1. Check event syntax: Ensure proper gtag('event', 'event_name') format
  2. Wait for processing: Events can take a few minutes to appear in Realtime
  3. Use DebugView: Enable debug mode to see events immediately
  4. Check JavaScript errors: Open browser console (F12) and look for errors
  5. Verify Enhanced Measurement: Some events require Enhanced Measurement to be enabled

Advanced Setup

Implement cookie consent before loading GA4:

<!-- Add to Header code BEFORE GA4 code -->
<script>
  // Set default consent state
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied'
  });

  // Update consent when user accepts
  function grantConsent() {
    gtag('consent', 'update', {
      'analytics_storage': 'granted',
      'ad_storage': 'granted'
    });
  }
</script>

<!-- Then load GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Call grantConsent() when user accepts cookies.

User ID Tracking

Track logged-in users across sessions:

<script>
  // Set user ID (if you have user authentication)
  gtag('config', 'G-XXXXXXXXXX', {
    'user_id': 'USER_ID_HERE'
  });
</script>

Privacy note: Only use User ID tracking with proper consent and privacy disclosures.

Custom Dimensions

Set custom dimensions for Zyro-specific data:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
    'custom_map': {
      'dimension1': 'site_type',
      'dimension2': 'template_name'
    }
  });

  // Send custom dimension data
  gtag('event', 'page_view', {
    'site_type': 'business',
    'template_name': 'modern_portfolio'
  });
</script>

Configure custom dimensions in Admin > Custom Definitions in GA4 first.

Privacy and Compliance

GDPR Compliance

For EU visitors:

  1. Obtain consent before loading GA4
  2. Anonymize IP addresses: Set anonymize_ip: true
  3. Update privacy policy: Disclose GA4 usage
  4. Implement consent banner: Use a cookie consent solution
  5. Configure data retention: Set appropriate retention in GA4 (Admin > Data Retention)

CCPA Compliance

For California visitors:

  1. Provide opt-out mechanism: Allow users to opt out of tracking
  2. Update privacy policy: Disclose data collection practices
  3. Honor opt-out requests: Respect user preferences

Next Steps

Additional Resources

返回顶部