How to Fix Directus Tracking Events Not Firing

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

   • No JavaScript errors
   • Tracking functions defined

3. Test in Incognito

   • Eliminates extension conflicts

4. Use Tracking Tools

   • GA4 DebugView
   • GTM Preview Mode
   • Meta Pixel Helper

5. Check Directus API

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

6. Verify Environment

   console.log(process.env.NEXT_PUBLIC_GA_ID);
   

Next Steps

• GA4 Event Tracking
• GTM Data Layer
• Fix LCP Issues

For general tracking troubleshooting, see Events Not Firing Guide.