How to Fix Directus Tracking Events Not Firing | OpsBlu Docs

How to Fix Directus Tracking Events Not Firing

Fix GA4, GTM, and pixel events not firing on Directus — headless API response timing, frontend framework SSR conflicts, and Flows webhook debugging

Diagnose and fix tracking issues specific to Directus's headless architecture and frontend framework integration.

Quick Diagnostics

1. Check Browser Console

// Open browser console (F12)

// Check if GA4 loaded
console.log(typeof gtag);  // Should be 'function'
console.log(window.dataLayer);  // Should be array

// Check if GTM loaded
console.log(typeof google_tag_manager);  // Should be 'object'

// Check if Meta Pixel loaded
console.log(typeof fbq);  // Should be 'function'

2. Check Page Source

View source and search for tracking codes (Ctrl+U, then Ctrl+F).

3. Clear Framework Cache

# Next.js
rm -rf .next
npm run build

# Nuxt
rm -rf .nuxt
npm run build

Directus-Specific Issues

1. SSR/SSG Hydration Issues

Symptom: Tracking works in development but not production.

Cause: Tracking code running on server instead of client.

Solution:

// Always check for window object
if (typeof window !== 'undefined' && window.gtag) {
  window.gtag('event', 'page_view');
}

// Or use useEffect (React)
useEffect(() => {
  window.gtag?.('event', 'page_view');
}, []);

// Or use onMounted (Vue)
onMounted(() => {
  window.gtag?.('event', 'page_view');
});

2. Directus API Data Not Available

Symptom: Events fire but data is undefined.

Cause: Tracking code runs before Directus data loads.

Solution:

// Wait for Directus data
const [article, setArticle] = useState(null);

useEffect(() => {
  async function fetchArticle() {
    const data = await directus.request(readItem('articles', id));
    setArticle(data);
  }
  fetchArticle();
}, [id]);

// Track only when data available
useEffect(() => {
  if (article) {
    window.gtag?.('event', 'content_view', {
      content_id: article.id,
      content_title: article.title,
    });
  }
}, [article]);

3. Environment Configuration Issues

Check Environment Variables:

# .env.local
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX
NEXT_PUBLIC_META_PIXEL_ID=1234567890123456
NEXT_PUBLIC_DIRECTUS_URL=https://your-directus.com

Verify in code:

console.log('GA ID:', process.env.NEXT_PUBLIC_GA_ID);
console.log('Directus URL:', process.env.NEXT_PUBLIC_DIRECTUS_URL);

Framework-Specific Issues

Next.js Issues

App Router Script Loading:

// Make sure Scripts use 'client' directive
'use client';

import Script from 'next/script';

export function GoogleAnalytics() {
  return (
    <Script
      strategy="afterInteractive"  // Important!
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
    />
  );
}

Vue/Nuxt Issues

Client-only Plugin:

// plugins/analytics.client.ts (note .client suffix)
export default defineNuxtPlugin(() => {
  // Tracking code here
});

Testing Checklist

  1. Clear Cache

    npm run build

  2. Check Browser Console

  3. Test in Incognito

    • Eliminates extension conflicts

  4. Use Tracking Tools

  5. Check Directus API

    curl https://your-directus.com/items/articles

  6. Verify Environment

    console.log(process.env.NEXT_PUBLIC_GA_ID);

Next Steps

For general tracking troubleshooting, see Events Not Firing Guide.

शीर्ष पर वापस जाएँ