How to Fix TYPO3 Tracking Events Not Firing | OpsBlu Docs

How to Fix TYPO3 Tracking Events Not Firing

Fix GA4, GTM, and pixel events not firing on TYPO3 — TypoScript page.headerData configuration, extension conflicts, and TYPO3 cache layer debugging

Comprehensive guide to diagnosing and fixing tracking problems in TYPO3, including Google Analytics, GTM, Meta Pixel, and custom event tracking issues.

Common TYPO3 Tracking Issues

Quick Diagnosis Checklist

Issue 1: No Tracking Script Loaded

Symptoms

  • No tracking code in page source
  • No network requests to analytics domains
  • GTM/GA4/Meta Pixel Helper shows no pixel

Diagnosis

Check Page Source:

# Via command line
curl https://your-site.com | grep -i "gtag\|gtm\|fbq"

# Or view source in browser (Ctrl+U)
# Search for: gtag, GTM-, fbq, dataLayer

Check TypoScript Template:

  1. Web → Template → Template Analyzer
  2. Search for your tracking ID (e.g., "GTM-", "G-", pixel ID)
  3. Verify script appears in final output

Solutions

1. Ensure Template is Included

# In your root template Setup field
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:your_sitepackage/Configuration/TypoScript/setup.typoscript">

2. Clear All Caches

Via Backend:

  • Admin Tools → Maintenance → Flush Caches

Via CLI:

./vendor/bin/typo3 cache:flush

Via Install Tool:

  • Admin Tools → Maintenance → Clear all caches

3. Check Template Hierarchy

Web → Template → Info/Modify

  • Ensure template is set on root page
  • Verify "Clear" is not checked (should include parent templates)

4. Verify Extension is Active

Admin Tools → Extensions → Installed Extensions

  • Check if tracking extension is activated
  • Look for lightning bolt icon (should be green)

Issue 2: Tracking Backend Users

Symptoms

  • Your own visits appear in analytics
  • Inflated pageview counts
  • Test events appear in production

Diagnosis

Check Current User Status:

# Add to TypoScript temporarily
page.10 = TEXT
page.10.value = Backend User: {TSFE:beUserLogin}
page.10.insertData = 1

Solutions

Exclude Backend Users (TypoScript)

# Only load tracking for non-backend users
[backend.user.isLoggedIn == false]
    page.headerData.300 = TEXT
    page.headerData.300.value (
    <!-- Your tracking code here -->
    )
[END]

Exclude Specific User Groups

# Exclude admins and editors
[backend.user.isLoggedIn == false || backend.user.usergroup != '1,2']
    # Tracking code
[END]

Conditional GA4 Tracking

page.jsInline.100 = TEXT
page.jsInline.100.stdWrap.if.isFalse.data = TSFE:beUserLogin
page.jsInline.100.value (
    gtag('config', 'G-XXXXXXXXXX');
)

Always Log Out for Testing

# Clear backend cookies
# Chrome: Settings → Privacy → Clear browsing data → Cookies
# Or use Incognito/Private browsing

Issue 3: Caching Problems

Symptoms

  • Tracking works inconsistently
  • Changes don't appear immediately
  • Old tracking code persists

Diagnosis

Check Cache Status:

# Via CLI
./vendor/bin/typo3 cache:list

# Check specific cache
./vendor/bin/typo3 cache:get pages --identifier=your_page_id

Check Admin Panel:

  • Enable Admin Panel in backend
  • Frontend: Admin Panel → Cache
  • See which caches are active

Solutions

1. Flush All Caches

# Full cache flush
./vendor/bin/typo3 cache:flush

# Specific cache
./vendor/bin/typo3 cache:flush --group=pages
./vendor/bin/typo3 cache:flush --group=system

2. Disable Page Cache (Temporarily)

LocalConfiguration.php:

'FE' => [
    'disableNoCacheParameter' => false,
],

Then access: https://your-site.com/?no_cache=1

3. Clear Browser Cache

  • Chrome: Ctrl+Shift+Delete
  • Firefox: Ctrl+Shift+Delete
  • Safari: Cmd+Option+E

4. Bypass TYPO3 Cache for Testing

# Make tracking USER_INT (uncached)
page.headerData.300 = USER_INT
page.headerData.300.userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
page.headerData.300.value (
    <!-- Tracking code -->
)

Note: Only for testing. Remove USER_INT in production.

Issue 4: JavaScript Errors

Symptoms

  • Tracking code loads but doesn't execute
  • Events don't fire
  • Console shows errors

Diagnosis

Open Browser Console:

  • Chrome/Firefox: F12 → Console
  • Look for red error messages

Common Errors:

// Uncaught ReferenceError: gtag is not defined
// Uncaught ReferenceError: dataLayer is not defined
// Uncaught ReferenceError: fbq is not defined

Solutions

1. Script Loading Order

Ensure gtag/dataLayer loads first:

# Wrong order
page.jsFooterInline.100 = TEXT
page.jsFooterInline.100.value (
    gtag('event', 'test'); // ERROR: gtag not defined yet
)

page.includeJSFooter.ga4 = https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX

# Correct order
page.headerData.300 = TEXT
page.headerData.300.value (
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXX');
    </script>
)

# Then use gtag in footer
page.jsFooterInline.100 = TEXT
page.jsFooterInline.100.value (
    gtag('event', 'test'); // Works
)

2. Wait for Script to Load

// Safe way to call gtag
function safeGtag() {
    if (typeof gtag === 'function') {
        gtag('event', 'test');
    } else {
        console.warn('gtag not loaded yet');
    }
}

// Or wait for load
window.addEventListener('load', function() {
    if (typeof gtag === 'function') {
        gtag('event', 'page_loaded');
    }
});

3. Check for Conflicting Scripts

// Debug: List all loaded scripts
console.log([...document.querySelectorAll('script')].map(s => s.src));

// Check if gtag/fbq/dataLayer exists
console.log('gtag:', typeof gtag);
console.log('fbq:', typeof fbq);
console.log('dataLayer:', window.dataLayer);

Issue 5: GTM Container Not Firing

Symptoms

  • GTM container loads but tags don't fire
  • GTM Preview mode shows no activity
  • Tags are paused or not triggered

Diagnosis

Enable GTM Preview Mode:

  1. In GTM, click Preview
  2. Enter your TYPO3 URL
  3. Check Summary and Variables tabs

Check dataLayer:

// Console
console.log(window.dataLayer);

// Monitor pushes
const originalPush = window.dataLayer.push;
window.dataLayer.push = function() {
    console.log('dataLayer.push:', arguments);
    return originalPush.apply(this, arguments);
};

Solutions

1. Verify Container ID

# Check for typos
page.headerData.300.value (
    GTM-XXXXXXX  # Correct format
    GTM-XXXXXX   # Wrong - too short
    G-XXXXXXXXX  # Wrong - that's GA4, not GTM
)

2. Check Trigger Configuration

In GTM:

  • Tags → Your Tag → Triggering
  • Ensure trigger matches your page type
  • Common triggers:
    • All Pages
    • Page View
    • DOM Ready
    • Window Loaded

3. Debug dataLayer Variables

page.jsInline.100 = TEXT
page.jsInline.100.value (
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        'pageType': 'test',
        'userId': '12345',
        'debug': true
    });

    console.log('dataLayer initialized:', dataLayer);
)

4. Check Tag Firing in GTM Preview

Variables to verify:

  • Page URL
  • Page Path
  • Event (should be 'gtm.js', 'gtm.dom', etc.)

Issue 6: Events Not Firing

Symptoms

  • PageView works, but custom events don't
  • Form submissions not tracked
  • Button clicks not recorded

Diagnosis

Test Event Manually:

// In browser console
gtag('event', 'test_event', {
    'test_param': 'test_value'
});

// For GTM
dataLayer.push({
    'event': 'test_event',
    'category': 'test'
});

// For Meta Pixel
fbq('track', 'TestEvent');

Check Network Tab:

  • Open DevTools → Network
  • Filter: collect (for GA4) or tr (for Meta)
  • Trigger event and see if request appears

Solutions

1. Verify Event Syntax

GA4:

// Correct
gtag('event', 'button_click', {
    'button_name': 'cta',
    'location': 'header'
});

// Wrong - typo in method name
gtag('events', 'button_click'); // Should be 'event'

GTM:

// Correct
dataLayer.push({
    'event': 'button_click',
    'buttonName': 'cta'
});

// Wrong - missing 'event' key
dataLayer.push({
    'buttonName': 'cta' // GTM won't fire without 'event'
});

2. Check Event Listener Attachment

// Ensure DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('.cta-button');

    if (button) {
        button.addEventListener('click', function() {
            console.log('Button clicked!');
            gtag('event', 'cta_click');
        });
    } else {
        console.warn('Button not found');
    }
});

3. TYPO3 Form Framework Events

page.jsFooterInline.200 = TEXT
page.jsFooterInline.200.value (
    // Wait for form to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        const forms = document.querySelectorAll('[data-type="finisher"]');
        console.log('Forms found:', forms.length);

        forms.forEach(function(form) {
            form.addEventListener('submit', function(e) {
                console.log('Form submitted');
                gtag('event', 'form_submit');
            });
        });
    });
)

Issue 7: Cross-Domain Tracking

Symptoms

  • Sessions break across subdomains
  • Different session IDs on each domain
  • User journey not tracked properly

Solutions

Configure Cross-Domain Tracking (GA4)

page.headerData.300.value (
<script>
gtag('config', 'G-XXXXXXXXXX', {
    'linker': {
        'domains': ['domain1.com', 'domain2.com', 'subdomain.domain1.com']
    }
});
</script>
)

GTM Cross-Domain Setup

In GTM:

  1. Variables → New → Google Analytics Settings
  2. More Settings → Fields to Set
  3. Add: allowLinker: true
  4. Cross Domain Tracking → Auto Link Domains
  5. Add domains: domain1.com,domain2.com

Issue 8: Ad Blockers

Symptoms

  • Tracking works for you but not all users
  • Lower-than-expected traffic
  • Tracking scripts blocked in Network tab

Diagnosis

Test with Ad Blocker:

  • Install uBlock Origin or similar
  • Visit your site
  • Check if tracking loads

Check Network Tab:

  • Look for blocked:other status
  • Red entries for analytics scripts

Solutions

1. Server-Side Tracking

Proxy GA4 through TYPO3:

// EXT:your_extension/Classes/Middleware/AnalyticsProxy.php
class AnalyticsProxy implements MiddlewareInterface
{
    public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
    {
        $path = $request->getUri()->getPath();

        if ($path === '/analytics/collect') {
            // Proxy to google-analytics.com/collect
            $response = $this->forwardToGA($request);
            return $response;
        }

        return $handler->handle($request);
    }
}

2. First-Party GTM Server

Set up GTM Server-Side:

  • Use your own domain (e.g., analytics.yourdomain.com)
  • Less likely to be blocked

3. Accept Reduced Tracking

  • Ad blockers affect 20-40% of users
  • Use server-side analytics for accurate counts
  • Combine with TYPO3 backend statistics

Symptoms

  • Tracking doesn't start until consent given
  • Users complain about no cookie banner
  • Consent not properly integrated

Solutions

page.headerData.299 = TEXT
page.headerData.299.value (
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

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

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

# Then after consent
page.jsFooterInline.500 = TEXT
page.jsFooterInline.500.value (
document.addEventListener('cookieConsentGranted', function() {
    gtag('consent', 'update', {
        'analytics_storage': 'granted',
        'ad_storage': 'granted'
    });
});
)

Integration with cookieman Extension

[getTenv('HTTP_COOKIE') =~ '/cookieman=[^;]*trackingGoogleAnalytics[^;]*/' ]
    # User consented - load tracking
    page.headerData.300 = TEXT
    page.headerData.300.value (...)
[END]

Debugging Tools

1. TYPO3 Admin Panel

Enable in User Settings:

  • Backend → User Settings → Admin Panel
  • Frontend shows debug info at bottom

2. Browser Extensions

  • Google Tag Assistant: Debug GTM/GA4
  • Meta Pixel Helper: Debug Meta Pixel
  • TYPO3 Debugging Extension: Shows TypoScript rendering

3. TypoScript Debugging

# Enable debug output
config.debug = 1
config.admPanel = 1

# Show SQL queries
config.debug_sql = 1

# Show TypoScript rendering
config.debug_typoScript = 1

4. Custom Debug Logger

page.jsFooterInline.999 = TEXT
page.jsFooterInline.999.value (
    // Debug logger
    window.trackingDebug = {
        gtag: typeof gtag !== 'undefined',
        fbq: typeof fbq !== 'undefined',
        dataLayer: window.dataLayer ? window.dataLayer.length : 0,
        userId: '{TSFE:fe_user|user|uid}',
        pageId: {TSFE:id},
        backendUser: {TSFE:beUserLogin}
    };

    console.log('Tracking Debug:', window.trackingDebug);
)
page.jsFooterInline.999.insertData = 1

Testing Checklist

Pre-Production

  • Clear all TYPO3 caches
  • Test in incognito/private mode
  • Verify with ad blocker off
  • Check console for errors
  • Verify Network requests
  • Test GTM Preview mode
  • Validate with Tag Assistant
  • Check Real-Time reports

Production Monitoring

Common Error Messages

Error Cause Solution
gtag is not defined Script not loaded Check loading order
dataLayer is not defined GTM not initialized Initialize before use
fbq is not defined Meta Pixel not loaded Verify pixel code
Uncaught TypeError Null reference Check DOM element exists
Mixed Content HTTP on HTTPS page Use HTTPS for all scripts
CORS error Cross-origin issue Configure server headers

Next Steps