Install Meta Pixel on Directus Sites

Complete guide to installing Facebook/Meta Pixel on Directus-powered sites using Next.js, Vue, React, and other frontend frameworks.

Since Directus is a headless data platform, the Meta Pixel is installed on your frontend application (Next.js, Vue, React, etc.), not in Directus itself. This guide covers Meta Pixel installation for common frontend frameworks.

Before You Begin

Create Meta Pixel
- Go to Meta Events Manager
- Create a new pixel
- Note your Pixel ID (format: 16-digit number)
Frontend Installation Required
- Meta Pixel runs on your frontend application
- Track events through your framework's code
- Use GTM for easier management

Method 1: Next.js + Directus

App Router (Next.js 13+)

// app/components/MetaPixel.tsx
'use client';

import Script from 'next/script';

export default function MetaPixel({ pixelId }: { pixelId: string }) {
  return (
    <>
      <Script
        id="meta-pixel"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            !function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
            fbq('init', '${pixelId}');
            fbq('track', 'PageView');
          `,
        }}
      />
      <noscript>
        <img
          height="1"
          width="1"
          style={{ display: 'none' }}
          src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
        />
      </noscript>
    </>
  );
}

Add to layout:

// app/layout.tsx
import MetaPixel from '@/components/MetaPixel';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <MetaPixel pixelId={process.env.NEXT_PUBLIC_META_PIXEL_ID!} />
      </body>
    </html>
  );
}

Track Directus Content Events

// utils/meta-pixel.ts
export function trackDirectusContent(item: any) {
  if (typeof window !== 'undefined' && window.fbq) {
    window.fbq('track', 'ViewContent', {
      content_name: item.title || item.name,
      content_ids: [item.id],
      content_type: item.__collection,
    });
  }
}

// Usage in component
'use client';

import { useEffect } from 'react';
import { trackDirectusContent } from '@/utils/meta-pixel';

export function ArticlePage({ article }) {
  useEffect(() => {
    trackDirectusContent(article);
  }, [article]);

  return <article>{/* Content */}</article>;
}

Method 2: Vue/Nuxt + Directus

Nuxt 3 Plugin

// plugins/meta-pixel.client.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();

  if (!config.public.metaPixelId) return;

  // Load Meta Pixel
  (function(f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function() {
      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = true;
    n.version = '2.0';
    n.queue = [];
    t = b.createElement(e);
    t.async = true;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');

  window.fbq('init', config.public.metaPixelId);
  window.fbq('track', 'PageView');
});

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      metaPixelId: process.env.META_PIXEL_ID,
      directusUrl: process.env.DIRECTUS_URL,
    },
  },
});

Method 3: React SPA + Directus

// src/utils/metaPixel.js
export const initMetaPixel = (pixelId) => {
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  window.fbq('init', pixelId);
  window.fbq('track', 'PageView');
};

export const trackEvent = (eventName, params = {}) => {
  if (typeof window !== 'undefined' && window.fbq) {
    window.fbq('track', eventName, params);
  }
};

// src/App.js
import { useEffect } from 'react';
import { initMetaPixel } from './utils/metaPixel';

function App() {
  useEffect(() => {
    initMetaPixel(process.env.REACT_APP_META_PIXEL_ID);
  }, []);

  return <div className="App">{/* App content */}</div>;
}

Conversion Tracking with Directus

Form Submissions

// Track form that creates Directus items
import { createDirectus, rest, createItem } from '@directus/sdk';

const directus = createDirectus(process.env.NEXT_PUBLIC_DIRECTUS_URL!).with(rest());

export function ContactForm() {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);

    try {
      await directus.request(
        createItem('contacts', {
          name: formData.get('name'),
          email: formData.get('email'),
          message: formData.get('message'),
        })
      );

      // Track successful lead
      window.fbq?.('track', 'Lead', {
        content_name: 'Contact Form',
        value: 0.00,
        currency: 'USD',
      });
    } catch (error) {
      console.error('Form submission failed:', error);
    }
  };

  return <form Form fields */}</form>;
}

Track Downloads from Directus Assets

export function DownloadButton({ asset }) {
  const handleDownload = () => {
    window.fbq?.('track', 'Lead', {
      content_name: asset.title,
      content_type: asset.type,
    });
  };

  return (
    <a
      href={`${process.env.NEXT_PUBLIC_DIRECTUS_URL}/assets/${asset.id}`}
      download={asset.filename_download}
    >
      Download {asset.title}
    </a>
  );
}

E-commerce Tracking

Track Product Views (Directus Commerce)

export function ProductPage({ product }) {
  useEffect(() => {
    window.fbq?.('track', 'ViewContent', {
      content_name: product.name,
      content_ids: [product.id],
      content_type: 'product',
      value: product.price,
      currency: 'USD',
    });
  }, [product]);

  return <div>{/* Product details */}</div>;
}

Track Add to Cart

export function AddToCartButton({ product, quantity = 1 }) {
  const handleAddToCart = () => {
    window.fbq?.('track', 'AddToCart', {
      content_ids: [product.id],
      content_name: product.name,
      content_type: 'product',
      value: product.price * quantity,
      currency: 'USD',
    });
  };

  return <button to Cart</button>;
}

Testing & Verification

Use Meta Pixel Helper

Install Meta Pixel Helper extension
Navigate to your site
Verify pixel is firing
Check event parameters

Test Events Manager

Go to Meta Events Manager
Select your pixel
Click Test Events
Enter your website URL
Verify events appear in real-time

Next Steps

Install GTM - Manage multiple tracking pixels
Set up Data Layer - Advanced tracking structure
Troubleshoot Tracking - Debug tracking issues

For general Meta Pixel concepts, see Meta Pixel Guide.

Nach oben