How to Fix CS-Cart Tracking Events Not Firing | OpsBlu Docs

How to Fix CS-Cart Tracking Events Not Firing

Fix GA4, GTM, and pixel events not firing in CS-Cart — template hook placement, addon conflicts, and order success page tracking debugging

This comprehensive guide helps you diagnose and fix issues when tracking events don't fire properly in your CS-Cart store.

Quick Diagnostics

Is Tracking Installed?

Check GA4:

// Browser console
console.log(typeof gtag); // Should return 'function'
console.log(window.dataLayer); // Should show array with data

Check GTM:

console.log(typeof google_tag_manager); // Should return 'object'
console.log(dataLayer); // Should show array

Check Meta Pixel:

console.log(typeof fbq); // Should return 'function'

Check Network Requests

  1. Open Developer Tools (F12)
  2. Go to Network tab
  3. Perform action (add to cart, purchase, etc.)
  4. Look for requests to:
    • GA4: google-analytics.com/g/collect
    • GTM: googletagmanager.com/gtm.js
    • Meta Pixel: facebook.com/tr

If no requests appear, tracking isn't firing.

Google Analytics 4 Issues

GA4 Base Tag Not Loading

Symptoms:

  • No GA4 requests in Network tab
  • gtag is undefined
  • No data in GA4 Real-time reports

Check Installation:

View page source (Ctrl+U) and search for:

G-XXXXXXXXXX

Common Causes:

  1. Tracking code not in template

    • Check design/themes/[theme]/templates/blocks/head_scripts.tpl
    • Verify code is before </head> tag

  2. Wrong Measurement ID

    • Verify ID in code matches GA4 property
    • Check for typos (O vs 0, I vs 1)

  3. JavaScript errors

    • Open browser console
    • Look for errors before GA4 loads
    • Fix any blocking errors

  4. Cache issues

    • Clear CS-Cart cache: Administration → Storage → Clear cache
    • Hard refresh browser (Ctrl+Shift+R)
    • Test in incognito mode

  5. Ad blockers

    • Disable browser extensions
    • Test with ad blocker disabled
    • Use Privacy Badger or similar

Solutions:

Verify code placement:

{* Should be in <head> section *}
{literal}
<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>
{/literal}

Check for errors:

// Test if gtag is loaded
if (typeof gtag === 'function') {
  console.log('GA4 loaded successfully');
  gtag('event', 'test_event');
} else {
  console.error('GA4 not loaded');
}

GA4 Events Not Firing

Symptoms:

  • Base tag loads but specific events don't fire
  • Some events work, others don't
  • Events fire but with missing parameters

Diagnose:

Enable Debug Mode:

gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});

Check DebugView:

  1. In GA4, go to Admin → DebugView
  2. Perform action in your store
  3. Events should appear within seconds
  4. Click event to see parameters

Common Causes:

  1. Event fires before GA4 initializes

Bad:

{literal}
<script>
  // This runs before gtag is loaded
  gtag('event', 'purchase', {...});
</script>
{/literal}

<!-- GA4 base code loads here -->

Good:

<!-- GA4 base code loads first -->

{literal}
<script>
  // Event fires after gtag is loaded
  gtag('event', 'purchase', {...});
</script>
{/literal}
  1. Incorrect event syntax

Check for:

  • Typos in event name
  • Incorrect parameter names
  • Wrong data types (string instead of number)

Example Issues:

// Wrong - string instead of number
gtag('event', 'purchase', {
  'value': '$99.99' // Should be: value: 99.99
});

// Wrong - typo in parameter
gtag('event', 'purchase', {
  'transaction_id': '12345',
  'vaule': 99.99 // Typo: should be 'value'
});
  1. Template not included

Verify your event template is actually loaded:

{* Add debug comment *}
<!-- Event tracking template loaded -->

Check page source for this comment.

  1. AJAX operations

CS-Cart uses AJAX for many operations. Events might fire before AJAX completes.

Fix:

// Wait for AJAX completion
$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.url.indexOf('checkout.add') !== -1) {
    // Now fire event
    gtag('event', 'add_to_cart', {...});
  }
});
  1. Smarty syntax errors
{* Wrong - invalid Smarty *}
{literal}
gtag('event', 'purchase', {
  'value': {$order_info.total} // Missing {/literal}
});
{/literal}

{* Correct *}
{literal}
gtag('event', 'purchase', {
  'value': {/literal}{$order_info.total}{literal}
});
{/literal}

Purchase Events Not Tracking

Critical Checklist:

  1. Event on correct page?

    • Should be on order confirmation page
    • NOT on checkout page
    • File: design/themes/[theme]/templates/views/checkout/components/order_notification.tpl

  2. Order data available?

{* Debug: Check if order info exists *}
{if $order_info}
  <!-- Order info available: {$order_info.order_id} -->
{else}
  <!-- WARNING: No order info! -->
{/if}
  1. Event parameters correct?
// Required parameters
{
  'transaction_id': '12345', // Must be present
  'value': 99.99, // Must be number
  'currency': 'USD', // Must be valid currency code
  'items': [...] // Must be array
}
  1. Duplicate prevention blocking legitimate events?

If using sessionStorage to prevent duplicates:

// Check if already tracked
var trackedKey = 'tracked_purchase_' + orderId;
if (sessionStorage.getItem(trackedKey)) {
  console.log('Purchase already tracked, skipping');
}

Test in incognito mode (fresh session).

  1. Page redirects too quickly?
// Add slight delay before redirect
gtag('event', 'purchase', {...});

setTimeout(function() {
  // Redirect after event sent
  window.location = '/success-page';
}, 100);

Google Tag Manager Issues

GTM Container Not Loading

Symptoms:

  • No GTM requests in Network tab
  • google_tag_manager is undefined
  • Preview mode won't connect

Diagnose:

// Check GTM
console.log(typeof google_tag_manager);
console.log(dataLayer);

Common Causes:

  1. Missing container snippets

    • Need BOTH <head> and <body> snippets
    • Verify both are present in page source

  2. Wrong container ID

    • Check for GTM-XXXXXXX in page source
    • Verify matches your GTM account

  3. Snippet placement

    • <head> snippet must be high in <head>
    • <body> snippet must be right after <body> tag

Fix:

Verify both snippets exist:

# Search page source
View Source → Ctrl+F → Search for "GTM-"
# Should find TWO instances

Check placement:

{* File: design/themes/[theme]/templates/index.tpl *}
<!DOCTYPE html>
<html>
<head>
  <!-- GTM Head snippet should be HERE -->
  {include file="blocks/head_scripts.tpl"}
</head>
<body>
  <!-- GTM Body snippet should be HERE -->
  {include file="blocks/body_top.tpl"}

GTM Tags Not Firing

Use Preview Mode:

  1. In GTM, click Preview
  2. Enter your store URL
  3. GTM debug panel opens
  4. Perform actions
  5. Check Tags Fired vs Tags Not Fired

Common Causes:

  1. Trigger not configured correctly

Check:

  • Trigger type matches event
  • Trigger fires on correct pages
  • Variable values are correct
  • No blocking triggers

Example: Add to cart tag not firing

  • Trigger: Custom Event = "add_to_cart"
  • Check if dataLayer.push uses exact event name
  • Case-sensitive!
  1. Variable values incorrect

Debug variables:

  • In Preview mode, click Variables tab
  • Check Built-In and User-Defined variables
  • Verify values match expected data

Common issues:

// Wrong - undefined variable
dataLayer.push({
  'productId': product.id // product is undefined
});

// Right - variable exists
dataLayer.push({
  'productId': document.querySelector('[data-product-id]').dataset.productId
});
  1. Event not pushed to dataLayer

Verify event fires:

// Monitor dataLayer
var originalPush = dataLayer.push;
dataLayer.push = function() {
  console.log('DataLayer Push:', arguments);
  return originalPush.apply(dataLayer, arguments);
};
  1. Tag sequencing issues

If tags depend on each other:

  • Go to Advanced Settings → Tag Sequencing
  • Set up correct firing order
  • Setup Tag → Fires before → Your Tag
  1. Tag published but not live
  • Check Workspace Changes in GTM
  • Click Submit to publish
  • Verify version is live in Versions tab

Data Layer Events Not Firing

Common Issues:

  1. Data layer not initialized
// Wrong - dataLayer doesn't exist
dataLayer.push({...});

// Right - initialize first
window.dataLayer = window.dataLayer || [];
dataLayer.push({...});
  1. Event pushed before GTM loads
{literal}
<script>
  // This runs before GTM
  dataLayer.push({'event': 'purchase'});
</script>
{/literal}

<!-- GTM container loads here -->

Fix: Ensure GTM loads first, or use setTimeout.

  1. Smarty/JavaScript syntax errors
{* Wrong - syntax error *}
{literal}
dataLayer.push({
  'productId': '{/literal}{$product.product_id}{literal}',
  'productName': '{/literal}{$product.product}{literal}' // Missing escape
});
{/literal}

{* Right *}
{literal}
dataLayer.push({
  'productId': '{/literal}{$product.product_id}{literal}',
  'productName': '{/literal}{$product.product|escape:javascript}{literal}'
});
{/literal}
  1. Data not available when event fires
// Product data loads via AJAX
// Event fires before data available

// Fix: Wait for data
$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.url.indexOf('products') !== -1) {
    // Data now available
    dataLayer.push({...});
  }
});

Meta Pixel Issues

Meta Pixel Not Loading

Symptoms:

  • Pixel Helper shows "No Pixel Found"
  • fbq is undefined
  • No requests to facebook.com/tr

Diagnose:

console.log(typeof fbq);

Common Causes:

  1. Pixel code not installed
  2. Wrong Pixel ID
  3. Ad blocker / Facebook Container
  4. Privacy extensions

Solutions:

Verify installation:

  • View source, search for Pixel ID (16 digits)
  • Check <head> section
  • Look for fbq('init', 'PIXEL_ID')

Test without blockers:

  • Disable browser extensions
  • Test in incognito/private mode
  • Use different browser

Check for JavaScript errors:

  • Open console before page load
  • Look for errors preventing fbq from loading

Meta Pixel Events Not Firing

Use Pixel Helper:

  1. Install Meta Pixel Helper
  2. Visit your store
  3. Perform action
  4. Check Pixel Helper for events

Common Causes:

  1. Event fires before pixel initializes
// Wrong order
fbq('track', 'AddToCart'); // Fires first

// Pixel init code loads here

// Right order
// Pixel init code first
fbq('init', 'PIXEL_ID');
fbq('track', 'PageView');

// Then event
fbq('track', 'AddToCart');
  1. Incorrect event syntax
// Wrong - typo
fbq('track', 'AddtoCart'); // Should be 'AddToCart'

// Wrong - missing parameters
fbq('track', 'Purchase'); // Missing value, currency

// Right
fbq('track', 'Purchase', {
  value: 99.99,
  currency: 'USD'
});
  1. Event parameters wrong type
// Wrong
fbq('track', 'Purchase', {
  value: '$99.99', // Should be number
  content_ids: '12345' // Should be array
});

// Right
fbq('track', 'Purchase', {
  value: 99.99,
  content_ids: ['12345']
});
  1. Standard event name wrong

Correct names:

  • ViewContent (not view_content)
  • AddToCart (not add_to_cart)
  • Purchase (not purchase)
  • InitiateCheckout (not begin_checkout)

Case-sensitive!

  1. CS-Cart AJAX issues
// Hook into CS-Cart add to cart
$(document).on('click', '.cm-submit[name="dispatch[checkout.add]"]', function() {
  // Event fires on click, but AJAX might fail
});

// Better: Hook into AJAX success
$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.url.indexOf('checkout.add') !== -1) {
    // Fire event after successful add to cart
    fbq('track', 'AddToCart', {...});
  }
});

Purchase Events Missing in Meta

Check:

  1. Event on order confirmation page

    • NOT checkout page
    • Only fires for completed orders

  2. Test Events tool shows event

    • Go to Events Manager → Test Events
    • Complete test purchase
    • Should appear immediately

  3. Event deduplication

    • Using same eventID for Conversions API?
    • Check if browser event is being deduplicated

  4. Value and currency correct

fbq('track', 'Purchase', {
  value: 99.99, // Must be number
  currency: 'USD' // Must be valid 3-letter code
});

CS-Cart-Specific Issues

Events Not Firing on AJAX Operations

CS-Cart AJAX endpoints:

  • checkout.add - Add to cart
  • checkout.update - Update cart
  • wishlist.add - Add to wishlist
  • product_reviews.add - Add review

Hook into AJAX:

(function(_, $) {
  $.ceEvent('on', 'ce.commoninit', function(context) {
    // Your event tracking here
  });

  // Or use ajaxComplete
  $(document).ajaxComplete(function(event, xhr, settings) {
    console.log('AJAX completed:', settings.url);

    if (settings.url.indexOf('checkout.add') !== -1) {
      // Track add to cart
    }
  });
}(Tygh, Tygh.$));

Template Hooks Not Working

Verify hook exists:

{* Check if hook is available *}
{hook name="index:scripts"}
  <!-- Your tracking code -->
  <!-- Debug: Hook is working -->
{/hook}

Common hook locations:

  • {hook name="index:scripts"} - Head scripts
  • {hook name="index:styles"} - CSS
  • {hook name="checkout:order_confirmation"} - After order

Check add-on status:

  • Some hooks require specific add-ons
  • Verify add-on is active

Cache Preventing Updates

Clear all caches:

# Via SSH
cd /path/to/cscart
rm -rf var/cache/*
rm -rf var/compiled/*

Or via Admin:

  1. Administration → Storage
  2. Select All
  3. Click Clear cache

Disable cache for testing:

// config.local.php
$config['tweaks']['disable_cache'] = true;

Remember to re-enable after testing!

Multi-Store/Multi-Vendor Issues

Different stores/vendors need different tracking:

{* Conditional tracking based on storefront *}
{if $runtime.company_id == 1}
  <!-- Vendor 1 tracking -->
{elseif $runtime.company_id == 2}
  <!-- Vendor 2 tracking -->
{else}
  <!-- Marketplace tracking -->
{/if}

Debugging Tools and Techniques

Browser Console Debugging

Check all tracking scripts:

console.log('GA4:', typeof gtag);
console.log('GTM:', typeof google_tag_manager);
console.log('Meta Pixel:', typeof fbq);
console.log('DataLayer:', window.dataLayer);

Monitor events:

// Log all GA4 events
var originalGtag = gtag;
gtag = function() {
  console.log('gtag:', arguments);
  return originalGtag.apply(this, arguments);
};

// Log all Meta Pixel events
var originalFbq = fbq;
fbq = function() {
  console.log('fbq:', arguments);
  return originalFbq.apply(this, arguments);
};

Network Tab Analysis

  1. Filter requests:

    • google-analytics
    • googletagmanager
    • facebook.com/tr

  2. Check request payload:

    • Click on request
    • View Payload or Request Payload
    • Verify data is correct

  3. Check response:

    • 200 status = success
    • 400/500 = error

Browser Extensions

Essential tools:

  • Google Analytics Debugger - GA4 debugging
  • Tag Assistant - GTM debugging
  • Meta Pixel Helper - Facebook debugging
  • dataLayer Inspector - DataLayer monitoring

Test in Different Environments

Test matrix:

  • Desktop vs. Mobile
  • Different browsers (Chrome, Firefox, Safari)
  • With/without ad blockers
  • Incognito vs. normal mode
  • Fast vs. slow connection

Prevention Checklist

  • Test all tracking after installation
  • Verify events in debug/test mode before going live
  • Clear cache after any changes
  • Test in incognito mode
  • Check browser console for errors
  • Use network tab to verify requests
  • Test on actual mobile device
  • Document your tracking setup
  • Set up monitoring/alerts for tracking issues
  • Regularly check reports for data gaps

Getting Help

Check Official Documentation

Provide Debugging Info

When asking for help, include:

  1. CS-Cart version
  2. Browser and version
  3. Console errors (screenshots)
  4. Network requests (screenshots)
  5. Tracking code implementation
  6. Steps to reproduce issue

Next Steps

If events still not firing:

  1. Review Integration Guides
  2. Check Troubleshooting Overview
  3. Contact platform support with debug info

Additional Resources

Nach oben