How to Fix KeystoneJS Tracking Events Not Firing | OpsBlu Docs

How to Fix KeystoneJS Tracking Events Not Firing

Fix GA4, GTM, and pixel events not firing on KeystoneJS — GraphQL API data layer timing, Next.js frontend integration, and SSR hydration debugging

General Guide: See Global Events Not Firing Guide for universal concepts.

Quick Diagnosis

1. Check Tag Installation

Verify your tracking code is properly installed:

  • View page source and search for tracking ID
  • Use browser developer tools Network tab
  • Check for JavaScript errors in Console

2. Browser Extensions

Common blockers:

  • Ad blockers (uBlock Origin, AdBlock)
  • Privacy extensions (Privacy Badger, Ghostery)
  • Brave browser shields

Test in incognito mode without extensions.

If using cookie consent:

  • Verify consent is granted before tags fire
  • Check consent mode implementation
  • Test with consent granted

Keystone JS-Specific Issues

Headless Architecture

Keystone JS is a headless CMS — it does not serve HTML or restrict JavaScript. Tracking issues are in your frontend framework, not Keystone JS itself.

Common headless CMS tracking problems:

  • SPA route changes not tracked — Single-page apps (React, Vue, Next.js) don't trigger full page loads on navigation. You must fire page_view events manually on route changes or use GTM's History Change trigger.
  • SSR hydration timing — If using server-side rendering (Next.js, Nuxt), tracking scripts may fire before React hydrates. Place gtag/pixel initialization in a useEffect hook or onMounted lifecycle.
  • Build-time vs. runtime — Static site generators (Gatsby, Astro) pre-render pages at build time. Ensure tracking scripts are client-side only, not executed during the build.

Framework-Specific Fixes

React / Next.js:

// Use next/script or useEffect for client-side only
import Script from 'next/script';
// or in _app.js useEffect to fire page_view on route change

Vue / Nuxt:

// Use vue-gtag plugin or nuxt-gtag module for automatic route tracking

Gatsby:

// Use gatsby-plugin-google-gtag for automatic page tracking on route changes

Debugging Tools

Google Tag Assistant

  1. Install Tag Assistant
  2. Start recording
  3. Navigate your site
  4. Review tag status and errors

Meta Pixel Helper

  1. Install the Chrome extension
  2. Visit your site
  3. Check for pixel status and events

Browser Developer Tools

  1. Open Console tab for errors
  2. Check Network tab for tracking requests
  3. Search for your tracking ID

Verification Steps

  1. Clear cache and cookies
  2. Test in multiple browsers
  3. Check from different networks
  4. Verify in analytics platform real-time reports
Nach oben