Meta Pixel Setup on TinaCMS (Step-by-Step) | OpsBlu Docs

Meta Pixel Setup on TinaCMS (Step-by-Step)

How to install the Meta (Facebook) Pixel on TinaCMS. Covers direct installation, GTM method, event tracking, and conversion tracking.

For general Meta Pixel concepts, see Meta Ads Platform Overview

Prerequisites

  • Meta Business Manager account
  • Meta Pixel created in Events Manager
  • Admin access to your TinaCMS site
  • Your Pixel ID (numeric, found in Events Manager → Data Sources)

Installation Methods

If you already have GTM installed on TinaCMS, add the Meta Pixel as a GTM tag:

  1. In GTM → Tags → New → Custom HTML
  2. Paste the pixel base 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>
  1. Set trigger to All Pages
  2. Preview → Test → Publish

Method 2: Direct Installation

Since TinaCMS is a headless CMS, add the Meta Pixel to your frontend framework's HTML head — the same location where you added GTM.

Why GTM is preferred: Managing the pixel through GTM lets you update events, add Conversions API, and adjust settings without editing site code. Direct installation requires code changes for every modification.

Standard Events

After the base pixel, fire standard events for conversion tracking:

// Lead capture (form submission)
fbq('track', 'Lead', { content_name: 'Contact Form' });

// Content view (specific page)
fbq('track', 'ViewContent', {
  content_name: 'Pricing Page',
  content_category: 'Marketing'
});

// Complete registration
fbq('track', 'CompleteRegistration', {
  content_name: 'Free Trial',
  status: true
});

Verification

  1. Install the Meta Pixel Helper Chrome extension
  2. Visit your site — the extension icon should show a green checkmark with the number of events fired
  3. In Events Manager → Test Events, enter your site URL and verify events appear in real-time
  4. Check for errors: the Pixel Helper will flag issues like duplicate pixels or misconfigured events

Next Steps

Back to top