Datocms Meta Pixel: Install and Track

Integrate Meta Pixel (Facebook Pixel) with your DatoCMS-powered website to track conversions, optimize ads, and build audiences. Since DatoCMS is headless, Meta Pixel is implemented in your frontend framework.

Why Use Meta Pixel with DatoCMS

Advertising Benefits:

• Track conversions from DatoCMS content
• Build custom audiences from content engagement
• Optimize ads for DatoCMS-powered pages
• Retarget users who view specific content

DatoCMS-Specific Tracking:

• Track content views by model type
• Monitor modular content engagement
• Track multi-locale content preferences
• Measure content-driven conversions

Performance Measurement:

• Attribute sales to DatoCMS content
• Measure ROI of content marketing
• Track user journey through content
• Optimize content for conversions

How Meta Pixel Works with DatoCMS

1. User visits DatoCMS-powered page
2. Meta Pixel loads in frontend framework
3. Events fire based on DatoCMS content
4. Data sent to Facebook
5. Ads optimized based on content engagement

Meta Pixel Events for DatoCMS

Standard Events

PageView: Automatically tracked on all pages

fbq('track', 'PageView', {
  content_name: post.title,
  content_category: post.category?.title,
  content_ids: [post.id],
  content_type: post._modelApiKey,
});

ViewContent: Track DatoCMS content views

fbq('track', 'ViewContent', {
  content_name: post.title,
  content_category: post.category?.title,
  content_ids: [post.id],
  content_type: 'product',
  value: post.price || 0,
  currency: 'USD',
});

Lead: Track form submissions

fbq('track', 'Lead', {
  content_name: formBlock.formName,
  content_category: 'form_submission',
  value: estimatedLeadValue,
  currency: 'USD',
});

Purchase: Track e-commerce conversions

fbq('track', 'Purchase', {
  value: order.total,
  currency: 'USD',
  content_ids: order.items.map(item => item.product.id),
  content_type: 'product',
  contents: order.items.map(item => ({
    id: item.product.id,
    quantity: item.quantity,
    item_price: item.price,
  })),
});

Custom Events

DatoCMS Content Engagement:

fbq('trackCustom', 'DatoCMSContentEngagement', {
  content_id: post.id,
  content_type: post._modelApiKey,
  engagement_type: 'scroll_depth',
  scroll_depth: 75,
});

Structured Text Reading:

fbq('trackCustom', 'StructuredTextRead', {
  content_id: post.id,
  reading_time: timeSpent,
  completion_rate: scrollDepth,
});

Implementation Approaches

Next.js (Recommended)

Install via script or package:

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

import Script from 'next/script'

export function MetaPixel() {
  const PIXEL_ID = process.env.NEXT_PUBLIC_META_PIXEL_ID

  if (!PIXEL_ID) return null

  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', '${PIXEL_ID}');
            fbq('track', 'PageView');
          `,
        }}
      />
      <noscript>
        <img
          height="1"
          width="1"
          style={{ display: 'none' }}
          src={`https://www.facebook.com/tr?id=${PIXEL_ID}&ev=PageView&noscript=1`}
        />
      </noscript>
    </>
  )
}

Gatsby

npm install gatsby-plugin-facebook-pixel

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-facebook-pixel',
      options: {
        pixelId: process.env.META_PIXEL_ID,
      },
    },
  ],
}

React SPA

Add to public/index.html:

<!-- Meta Pixel Code -->
<script>
  !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', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel Code -->

DatoCMS-Specific Tracking

Track Content Views

'use client'

import { useEffect } from 'react'

export function DatoCMSContentTracker({ record }: { record: any }) {
  useEffect(() => {
    if (window.fbq) {
      window.fbq('track', 'ViewContent', {
        content_name: record.title,
        content_category: record._modelApiKey,
        content_ids: [record.id],
        content_type: 'datocms_content',
      })
    }
  }, [record])

  return null
}

Track Modular Content Blocks

function trackBlockView(block: any, contentId: string) {
  if (window.fbq) {
    window.fbq('trackCustom', 'DatoCMSBlockView', {
      block_type: block._modelApiKey,
      block_id: block.id,
      content_id: contentId,
    })
  }
}

Track E-commerce Products

function trackProductView(product: any) {
  if (window.fbq) {
    window.fbq('track', 'ViewContent', {
      content_name: product.title,
      content_category: product.category?.title,
      content_ids: [product.id],
      content_type: 'product',
      value: product.price,
      currency: 'USD',
    })
  }
}

Conversions API (Server-Side)

For improved tracking accuracy, implement Conversions API:

// pages/api/meta-conversion.ts
export default async function handler(req, res) {
  const { event, data } = req.body

  const response = await fetch(
    `https://graph.facebook.com/v18.0/${process.env.META_PIXEL_ID}/events`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        data: [
          {
            event_name: event,
            event_time: Math.floor(Date.now() / 1000),
            action_source: 'website',
            user_data: {
              client_ip_address: req.headers['x-forwarded-for'],
              client_user_agent: req.headers['user-agent'],
            },
            custom_data: data,
          },
        ],
        access_token: process.env.META_CONVERSION_API_TOKEN,
      }),
    }
  )

  res.status(200).json({ success: true })
}

Privacy Compliance

GDPR/CCPA Consent

'use client'

import { useEffect, useState } from 'react'

export function MetaPixelWithConsent() {
  const [hasConsent, setHasConsent] = useState(false)

  useEffect(() => {
    // Check for user consent
    const consent = localStorage.getItem('analytics_consent')
    setHasConsent(consent === 'granted')
  }, [])

  if (!hasConsent) return null

  return <MetaPixel />
}

Advanced Matching

fbq('init', 'YOUR_PIXEL_ID', {
  em: 'hashed_email@example.com', // SHA-256 hashed
  fn: 'hashed_first_name',
  ln: 'hashed_last_name',
})

Testing Meta Pixel

Meta Pixel Helper

1. Install Meta Pixel Helper Chrome extension
2. Navigate to your DatoCMS site
3. Click extension icon
4. Verify:
   • Pixel loads correctly
   • Events fire properly
   • Parameters are correct

Events Manager

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

Next Steps

• Meta Pixel Setup Guide - Installation guide
• Troubleshoot Tracking - Debug issues
• GTM Integration - Manage via GTM

Related Resources

• Meta Pixel Documentation
• Conversions API
• DatoCMS GraphQL API