Events Not Firing | Blue Frog Docs

Events Not Firing

Diagnose and fix analytics events that fail to track, causing missing data and incomplete user journey visibility

Events Not Firing

What This Means

Events not firing occurs when analytics tracking code fails to execute and send data to your analytics platform. This results in missing critical data about user behavior, conversions, and interactions, making it impossible to accurately measure performance or make data-driven decisions.

Impact on Your Business

Missing Data:

  • Cannot track conversions accurately
  • User behavior data incomplete
  • Unable to calculate accurate ROI
  • Missing critical funnel steps
  • Incomplete customer journey mapping

Poor Decision Making:

  • Optimizing based on incomplete data
  • Unable to identify friction points
  • Cannot A/B test effectively
  • Wrong conclusions from partial data
  • Missed optimization opportunities

Budget Waste:

  • Cannot attribute conversions correctly
  • Over/under-investing in channels
  • Unable to identify best-performing campaigns
  • ROI calculations inaccurate
  • Marketing budget misallocation

Common Causes

Technical Issues:

  • Tracking code not installed
  • JavaScript errors blocking execution
  • Page redirects before event fires
  • Incorrect tag configuration
  • Network requests blocked

Implementation Errors:

  • Wrong trigger conditions
  • Event name typos
  • Missing required parameters
  • Incorrect element selectors
  • Timing issues (DOM not ready)

Blocking:

  • Ad blockers preventing tracking
  • Browser privacy settings
  • Content Security Policy blocking
  • Network firewalls
  • CORS issues

How to Diagnose

Method 1: Google Tag Manager Preview Mode

  1. Open Google Tag Manager
  2. Click "Preview" button
  3. Enter your website URL
  4. Navigate to page with event
  5. Trigger the event (click button, submit form, etc.)
  6. Check Tag Manager preview panel:
    • Tags Fired (event triggered successfully)
    • Tags Not Fired (event didn't trigger)
  7. Review why tag didn't fire (failed triggers, exceptions)

What to Look For:

  • Tag shows in "Not Fired" section
  • Trigger conditions not met
  • JavaScript errors in console
  • Data layer variables missing or undefined

Method 2: Chrome DevTools Network Tab

  1. Open website in Chrome
  2. Press F12 to open DevTools
  3. Navigate to "Network" tab
  4. Filter by "Fetch/XHR" or search for "collect" or "analytics"
  5. Trigger the event
  6. Look for outgoing tracking requests

What to Look For:

  • No request appears after event trigger
  • Request appears with status code error (4xx, 5xx)
  • Request blocked (red in network tab)
  • Request canceled before completing

Method 3: GA4 DebugView

  1. Enable debug mode:

    // Add to page
    gtag('config', 'G-XXXXXXXXXX', {
      'debug_mode': true
    });
    

    Or add ?_gl_debug=1 to URL

  2. Open Google Analytics 4

  3. Navigate to "Configure" → "DebugView"

  4. Trigger event on your website

  5. Watch for event in real-time stream

What to Look For:

  • Event doesn't appear in stream
  • Event appears with errors
  • Parameter values missing or incorrect
  • Wrong event name displayed

Method 4: Browser Console

  1. Open Chrome DevTools (F12)
  2. Navigate to "Console" tab
  3. Trigger the event
  4. Look for:
    • JavaScript errors (red text)
    • Failed network requests
    • Tracking confirmation logs

What to Look For:

  • Uncaught TypeError or similar errors
  • dataLayer is not defined
  • gtag is not a function
  • Network errors (CORS, CSP violations)
  • Event handler errors

Method 5: Facebook Pixel Helper

  1. Install Facebook Pixel Helper Extension
  2. Navigate to page with event
  3. Click extension icon
  4. Trigger event
  5. Watch for pixel fires

What to Look For:

  • No pixel fire after event
  • Wrong event name
  • Missing parameters
  • Errors or warnings displayed

General Fixes

Fix 1: Verify Tracking Code is Installed

Check if base tracking code exists:

  1. View page source (Ctrl+U or Cmd+U):

    <!-- Google Analytics 4 -->
    <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>
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    
  2. Check tracking code location:

    • Should be in <head> section
    • As early as possible (before other scripts)
    • On all pages (not just homepage)
  3. Verify property ID is correct:

    // Check GA4 measurement ID
    gtag('config', 'G-XXXXXXXXXX'); // Should match your property
    
    // Check GTM container ID
    'GTM-XXXXXX' // Should match your container
    

Fix 2: Fix JavaScript Errors

Resolve errors blocking event execution:

  1. Check console for errors:

    // Common errors:
    // "gtag is not defined" - tracking code not loaded
    // "dataLayer is not defined" - GTM not loaded
    // "Uncaught TypeError" - code syntax error
    
  2. Ensure tracking code loads before event code:

    <!-- Base tracking code first -->
    <script src="gtag.js"></script>
    
    <!-- Then custom events -->
    <script>
      // Custom event tracking
      gtag('event', 'click', {...});
    </script>
    
  3. Use async/defer properly:

    <!-- Load tracking asynchronously -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    
    <!-- Don't defer code that depends on it -->
    <script>
      // Inline code runs immediately
      window.dataLayer = window.dataLayer || [];
    </script>
    
  4. Wrap event code in error handling:

    try {
      gtag('event', 'purchase', {
        value: 99.99,
        currency: 'USD'
      });
    } catch (error) {
      console.error('Tracking error:', error);
    }
    

Fix 3: Fix Trigger Conditions in GTM

Ensure triggers fire when expected:

  1. Check trigger type matches use case:

    - Click trigger for button clicks
    - Form submission trigger for forms
    - Page view trigger for page loads
    - Custom event trigger for data layer events
    
  2. Verify trigger conditions:

    Example: Button click trigger
    - Trigger Type: Click - All Elements
    - This trigger fires on: Some Clicks
    - Click Element matches CSS selector: .buy-button
    
  3. Test CSS selectors:

    // In browser console, verify selector works:
    document.querySelector('.buy-button'); // Should return element
    document.querySelectorAll('.buy-button'); // How many elements?
    
  4. Use correct trigger operators:

    equals - Exact match
    contains - Partial match (more flexible)
    matches RegEx - Pattern matching
    starts with - Prefix match
    ends with - Suffix match
    
  5. Check element visibility:

    // Element must be visible and present in DOM
    const button = document.querySelector('.buy-button');
    console.log('Visible:', button.offsetParent !== null);
    

Fix 4: Fix Page Redirect Issues

Ensure events fire before redirect:

  1. Add delay before redirect:

    // Bad - event may not complete
    gtag('event', 'purchase', {...});
    window.location.href = '/thank-you/';
    
    // Good - wait for event
    gtag('event', 'purchase', {...}, function() {
      window.location.href = '/thank-you/';
    });
    
    // Or use timeout
    gtag('event', 'purchase', {...});
    setTimeout(function() {
      window.location.href = '/thank-you/';
    }, 300);
    
  2. Use beacon transport (GA4):

    // Beacon API ensures event sent even if page unloads
    gtag('event', 'click', {
      transport_type: 'beacon',
      event_callback: function() {
        window.location.href = '/next-page/';
      }
    });
    
  3. Server-side tracking for critical events:

    // Send conversion via server-side API
    // More reliable than client-side for conversions
    

Fix 5: Fix Event Implementation

Correct event tracking code:

  1. GA4 event syntax:

    // Correct GA4 event
    gtag('event', 'event_name', {
      parameter1: 'value1',
      parameter2: 'value2'
    });
    
    // Common mistake - wrong format
    gtag('event', 'event-name'); // Use underscores, not hyphens
    
  2. Facebook Pixel event syntax:

    // Correct Pixel event
    fbq('track', 'Purchase', {
      value: 99.99,
      currency: 'USD'
    });
    
    // Verify pixel loaded first
    if (typeof fbq === 'function') {
      fbq('track', 'Purchase', {...});
    }
    
  3. Data layer push (GTM):

    // Correct data layer push
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'purchase',
      'transaction_value': 99.99,
      'transaction_id': 'T123456'
    });
    
  4. Add event listeners properly:

    // Bad - inline onclick
    <button onclick="gtag('event', 'click')">Click</button>
    
    // Good - addEventListener
    document.querySelector('.buy-button').addEventListener('click', function() {
      gtag('event', 'add_to_cart', {
        items: [{...}]
      });
    });
    
    // Better - event delegation
    document.body.addEventListener('click', function(e) {
      if (e.target.matches('.buy-button')) {
        gtag('event', 'add_to_cart', {...});
      }
    });
    

Fix 6: Handle Ad Blockers

Account for users with ad blockers:

  1. Test with ad blocker:

    • Install uBlock Origin or similar
    • Test your events
    • Check if tracking blocked
  2. Use first-party tracking:

    // Self-hosted tracking less likely to be blocked
    // Use server-side tracking for critical events
    
  3. Implement fallback tracking:

    // Try gtag, fallback to img pixel
    if (typeof gtag === 'function') {
      gtag('event', 'purchase', {...});
    } else {
      // Fallback pixel tracking
      var img = new Image();
      img.src = '/track.php?event=purchase&value=99.99';
    }
    
  4. Don't rely 100% on client-side tracking:

    • Implement server-side tracking for conversions
    • Use multiple data sources
    • Accept some data loss from blockers

Fix 7: Fix Data Layer Issues

Ensure data layer properly implemented:

  1. Initialize data layer before GTM:

    <!-- Data layer initialization -->
    <script>
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        'page_type': 'product',
        'product_id': '12345'
      });
    </script>
    
    <!-- GTM container code -->
    <script>(function(w,d,s,l,i){...})
    (window,document,'script','dataLayer','GTM-XXXXXX');</script>
    
  2. Push data before triggering event:

    // Push data first
    dataLayer.push({
      'product_name': 'Blue Widget',
      'product_price': 29.99
    });
    
    // Then trigger event
    dataLayer.push({
      'event': 'view_item'
    });
    
  3. Verify data layer values:

    // In console, check data layer
    console.log(window.dataLayer);
    
    // Or in GTM Preview, check Variables tab
    
  4. Use correct variable names:

    // Consistent naming
    dataLayer.push({
      'event': 'purchase', // Lowercase, underscores
      'transaction_id': 'T123', // Match GTM variable names
      'transaction_value': 99.99
    });
    

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify Events Not Firing Guide
WordPress WordPress Events Not Firing Guide
Wix Wix Events Not Firing Guide
Squarespace Squarespace Events Not Firing Guide
Webflow Webflow Events Not Firing Guide

Verification

After implementing fixes:

  1. Test in GTM Preview:

    • Enable preview mode
    • Trigger event
    • Verify tag fires
    • Check all parameters present
  2. Test in Chrome DevTools:

    • Open Network tab
    • Trigger event
    • Verify request sent (status 200)
    • Check payload contains correct data
  3. Test in DebugView (GA4):

    • Enable debug mode
    • Trigger event
    • See event in real-time
    • Verify parameters correct
  4. Test in production:

    • Clear cache
    • Test on live site
    • Multiple browsers
    • Mobile devices
    • With/without ad blocker
  5. Monitor ongoing:

    • Check GA4 Realtime reports
    • Verify event counts match expectations
    • Compare to previous baseline
    • Set up alerts for anomalies

Common Mistakes

  1. No tracking code installed - Most basic issue
  2. JavaScript errors blocking execution - Check console
  3. Wrong trigger conditions - Too restrictive or wrong selector
  4. Page redirects before event fires - Add delay or callback
  5. Event name typos - Case-sensitive, check spelling
  6. Missing dataLayer initialization - Must exist before GTM
  7. Ad blockers - Accept some data loss, use fallbacks
  8. Testing only in your browser - Test multiple browsers/devices
  9. Not handling async loading - Tracking code may not be ready
  10. Forgetting event callback - For navigation events

Troubleshooting Checklist

  • Tracking code installed on page
  • No JavaScript errors in console
  • Correct property/container ID
  • Event name spelled correctly
  • Trigger conditions configured properly
  • CSS selectors work and find elements
  • Data layer initialized before GTM
  • Event fires before page redirect
  • Parameters have correct values
  • Tested in multiple browsers
  • Tested with ad blocker
  • Verified in DebugView/Preview mode
  • Event appears in real-time reports
  • Network request sent successfully

Additional Resources

// SYS.FOOTER