Install Meta Pixel on Directus Sites | OpsBlu Docs

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

  1. Create Meta Pixel

  2. 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

  1. Install Meta Pixel Helper extension
  2. Navigate to your site
  3. Verify pixel is firing
  4. Check event parameters

Test Events Manager

  1. Go to Meta Events Manager
  2. Select your pixel
  3. Click Test Events
  4. Enter your website URL
  5. Verify events appear in real-time

Next Steps

For general Meta Pixel concepts, see Meta Pixel Guide.

Back to top