Zyro Analytics Integrations: Setup Guide | OpsBlu Docs

Zyro Analytics Integrations: Setup Guide

Available integrations for Zyro including analytics platforms, tag managers, and marketing pixels.

Zyro provides methods to integrate analytics platforms, tag managers, and marketing pixels through custom code injection and built-in integrations. This section covers the most common integrations and Zyro-specific implementation details.

Available Integrations

Analytics Platforms

Google Analytics 4

Tag Management

Google Tag Manager

  • Custom code injection in website settings
  • Centralized tag management for all tracking pixels
  • Recommended for complex tracking setups
  • Easier maintenance than direct pixel installation

Marketing Pixels

Meta Pixel

  • Custom code injection method
  • Base pixel for page view tracking
  • Event tracking requires manual implementation
  • Enhanced conversion tracking available

Zyro-Specific Integration Considerations

Custom Code Injection

Zyro's primary method for adding tracking codes is through the custom code feature in Website Settings.

Locations:

  • Header code: Loads on every page before </head> (recommended for tracking)
  • Footer code: Loads on every page before </body>
  • Page-specific code: Available for individual pages (Limited/Pro plans)

Accessing Custom Code:

  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. Add your code to Header code or Footer code
  6. Click Save and Publish

Built-in Integrations

Zyro offers some built-in integrations that don't require custom code:

Available Built-in Integrations:

Accessing Built-in Integrations:

  1. Go to Settings → Integrations
  2. Select the integration you want to add
  3. Enter your tracking ID or Pixel ID
  4. Click Save

Limitations:

  • Basic page view tracking only
  • No access to underlying tracking code for custom event parameters or conditions
  • No advanced event tracking
  • For full control, use custom code injection

AI Website Builder Considerations

Zyro's AI-powered builder affects how you implement tracking:

AI-Generated Pages:

  • Consistent HTML structure across pages
  • Standardized element classes
  • Easier to target elements for event tracking
  • Predictable page layout

Template System:

  • Modern, responsive templates
  • Optimized for mobile
  • Template updates may affect custom code
  • Test tracking after template changes

Plan Limitations

Different Zyro plans have varying custom code access:

Free Plan:

  • No custom code injection
  • Cannot add analytics or tracking pixels
  • Limited to Zyro's basic built-in features

Unleash Plan:

  • Full custom code access in header/footer
  • Can add analytics, GTM, and pixels
  • Page-specific code injection
  • Recommended minimum for tracking

eCommerce Plan:

  • All Unleash features
  • Enhanced eCommerce tracking capabilities
  • Product and purchase event tracking
  • Shopping cart tracking

Ecommerce Plus Plan:

  • All eCommerce features
  • Priority support for implementation
  • Advanced integration options
  • Better performance for code-heavy sites

Performance Impact

Zyro sites are optimized for speed, but custom code can impact performance:

Performance Tips:

  • Use async/defer attributes for external scripts
  • Minimize number of tracking pixels
  • Consolidate through GTM when possible
  • Monitor Largest Contentful Paint (LCP)
  • Test mobile performance regularly

Zyro Performance Features:

Integration Best Practices

1. Use Google Tag Manager as Central Hub

Instead of adding multiple pixels directly:

  • Install GTM once in Zyro's header code
  • Add all tracking pixels through GTM
  • Easier to manage without editing Zyro settings
  • Better performance (single container load)
  • No need to republish site for tracking changes

2. Test Thoroughly Before Publishing

Testing Checklist:

  • Add code to Website Settings
  • Click Save
  • Preview site in new tab
  • Verify in browser console (no errors)
  • Test with GTM Preview mode (if using GTM)
  • Check GA4 Realtime or DebugView
  • Test on mobile devices
  • Publish site
  • Verify again on live site

3. Leverage Zyro's Element Structure

Zyro uses consistent class names for elements:

Common Zyro Classes:

  • .zyro-button - Buttons
  • .zyro-form - Contact forms
  • .zyro-image - Images
  • .zyro-heading - Headings
  • .zyro-text - Text blocks

Use these for reliable event tracking:

// Track button clicks
document.addEventListener('click', function(e) {
  const button = e.target.closest('.zyro-button');
  if (button) {
    gtag('event', 'button_click', {
      'button_text': button.textContent.trim()
    });
  }
});

4. Respect User Privacy

Implement consent before loading tracking:

// Example: Simple consent check
if (localStorage.getItem('analyticsConsent') === 'granted') {
  // Initialize tracking
  gtag('config', 'G-XXXXXXXXXX');
} else {
  // Show consent banner
  // Wait for user consent
}

Consider:

  • Adding a cookie consent banner
  • Using Google Consent Mode
  • Complying with GDPR/CCPA requirements
  • Documenting data collection in privacy policy

5. Monitor Data Quality

Common issues on Zyro sites:

  • Duplicate tracking (built-in + custom code)
  • Events not capturing on form submissions
  • Button clicks not tracked
  • Mobile tracking differences
  • Bot/spam traffic

See Events Not Firing for debugging.

Zyro Template Considerations

Different Zyro templates may affect tracking implementation:

Standard Templates

  • Clean, semantic HTML
  • Consistent class naming
  • Easy to identify elements
  • Reliable event tracking

AI-Generated Layouts

  • Dynamic structure
  • May vary between regenerations
  • Test tracking after AI layout changes
  • Use general selectors when possible

Custom Sections

  • Full control over HTML
  • Can add inline tracking
  • May conflict with site-wide code
  • Test carefully

Common Zyro Sections to Track

Track engagement with key Zyro sections:

Section Type Tracking Method Example Event
Hero Section Scroll depth section_view
Contact Form Form submission form_submit
Product Grid Product clicks select_item
CTA Buttons Button clicks button_click
Image Gallery Image views gallery_view
Store Products Product views view_item

Code Injection Best Practices

Header Code (Recommended for Tracking):

<!-- Add to Settings → Website code → Header code -->
<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>

Footer Code (For Non-Critical Scripts):

<!-- Add to Settings → Website code → Footer code -->
<script>
  // Non-critical tracking or third-party widgets
  // Loads after page content
</script>

Async and Defer Attributes

Always use async or defer to prevent blocking:

<!-- Good: Async loading -->
<script async src="https://example.com/script.js"></script>

<!-- Also good: Deferred loading -->
<script defer src="https://example.com/script.js"></script>

<!-- Bad: Blocking -->
<script src="https://example.com/script.js"></script>

Zyro E-commerce Tracking

For Zyro eCommerce sites:

Available Events:

  • Product page views
  • Add to cart actions
  • Checkout initiation
  • Purchase completion

Implementation:

  • Requires eCommerce or eCommerce Plus plan
  • Use GA4 eCommerce events
  • Track through GTM for easier management
  • Implement on thank you page for purchases

See platform-specific integration guides for e-commerce setup details.

Avoiding Common Mistakes

Don't Mix Built-in and Custom Code

Problem: Using both Zyro's built-in GA4 integration AND custom GA4 code creates duplicate tracking.

Solution: Choose one method:

  • Built-in integration for simple setup
  • Custom code for advanced tracking
  • Never use both simultaneously

Don't Forget to Publish

Problem: Adding code to Website Settings but forgetting to publish.

Solution:

  1. Add code to Settings
  2. Click Save
  3. Click Publish (top right)
  4. Wait for deployment
  5. Verify on live site

Don't Skip Mobile Testing

Problem: Tracking works on desktop but not mobile.

Solution:

  • Test on actual mobile devices
  • Use Chrome DevTools mobile emulation
  • Check mobile-specific issues
  • Verify touch event tracking

Next Steps

Choose your integration to get started:

For general integration concepts, see the analytics platforms overview.

Nach oben