Facebook Pixel Setup Guide

Track conversions, measure ROI, and optimize your Meta ads

Track Everything

Monitor every user action from signup to purchase

Build Audiences

Create custom audiences for retargeting campaigns

Measure ROI

Know exactly which ads drive revenue

Step-by-Step Setup
1

Create Facebook Pixel in Meta Business Manager

  • Go to Meta Events Manager: https://business.facebook.com/events_manager2
  • Click 'Connect Data Sources' → 'Web'
  • Select 'Meta Pixel' → 'Connect'
  • Name it: 'HeartLib Pixel'
  • Enter your website URL: https://heartlib.io
  • Click 'Continue' → Skip manual setup for now
  • Copy your Pixel ID (looks like: 1234567890123456)
2

Add Pixel ID to Environment Variables

  • Go to Dashboard → Settings → Environment Variables
  • Add new variable: FACEBOOK_PIXEL_ID
  • Paste your Pixel ID
  • Save changes
3

Install Pixel Code (I'll do this for you)

  • I'll create a FacebookPixel component
  • Add it to your Layout.js
  • Configure conversion events
  • You just need to provide the Pixel ID below
Your Pixel ID

Enter your Facebook Pixel ID to generate custom code:

Base Pixel Code
<!-- 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 -->
Conversion Events to Track

PageView

Trigger: Every page load

Purpose: Track overall traffic

fbq('track', 'PageView');

ViewContent

Trigger: Landing on key pages

Purpose: Interest in features

fbq('track', 'ViewContent', {content_name: 'Feature Page'});

CompleteRegistration

Trigger: User signs up

Purpose: New user conversion

fbq('track', 'CompleteRegistration');

StartTrial

Trigger: Free trial started

Purpose: Trial conversion tracking

fbq('track', 'StartTrial', {value: 0, currency: 'USD'});

Subscribe

Trigger: Paid subscription

Purpose: Revenue tracking

fbq('track', 'Subscribe', {value: 46.00, currency: 'USD'});

Purchase

Trigger: Any payment completed

Purpose: ROI measurement

fbq('track', 'Purchase', {value: amount, currency: 'USD'});

Search

Trigger: Case study search

Purpose: Feature engagement

fbq('track', 'Search', {search_string: 'compatibility'});

AddToCart

Trigger: Subscription selection

Purpose: Intent to purchase

fbq('track', 'AddToCart', {content_name: 'Premium Plan'});
Verify Pixel is Working
1

Install Facebook Pixel Helper Extension

Chrome extension: https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc

2

Visit HeartLib.io

The extension icon should show a green checkmark and display your Pixel ID

3

Check Events Manager

Go to Meta Events Manager and verify PageView events are being received

4

Test Conversion Events

Sign up, start trial, search - verify each event fires in Events Manager Test Events tool