Install Meta Pixel on HubSpot | Blue Frog Docs

Install Meta Pixel on HubSpot

Complete guide to installing Facebook/Instagram Meta Pixel on HubSpot CMS for advertising and conversion tracking.

Install Meta Pixel on HubSpot

Meta Pixel (formerly Facebook Pixel) enables advertising and conversion tracking for Facebook and Instagram campaigns. This guide covers HubSpot-specific Meta Pixel implementation.

Prerequisites

  1. Meta Business Suite access - Create at business.facebook.com
  2. Meta Pixel created - In Events Manager
  3. HubSpot Site Header HTML access - Settings permissions
  4. Super Admin or Website Editor - HubSpot role

What is Meta Pixel?

Meta Pixel is a JavaScript snippet that:

  • Tracks website visitors for Facebook/Instagram ads
  • Measures ad campaign effectiveness
  • Builds custom audiences for retargeting
  • Optimizes ads for conversions
  • Tracks conversions (leads, purchases, sign-ups)

Installation Methods

Install Meta Pixel globally on all HubSpot pages.

Step 1: Get Your Pixel Code

  1. Go to Meta Events Manager (business.facebook.com/events_manager)
  2. Select your Pixel
  3. Click Continue Pixel Setup → Install code manually
  4. Copy the Pixel base 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 -->

Step 2: Add to HubSpot Site Header

  1. In HubSpot, go to Settings → Website → Pages
  2. Scroll to Site Header HTML
  3. Paste the Meta Pixel code
  4. Replace YOUR_PIXEL_ID with your actual Pixel ID
  5. Click Save

Step 3: Enhanced Implementation with HubSpot Data

Add HubSpot contact data to Meta Pixel for better matching:

<!-- Meta Pixel Code with HubSpot Data -->
<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');

{% if contact %}
// Initialize with contact data for better matching
fbq('init', 'YOUR_PIXEL_ID', {
  'em': '{{ contact.email }}',
  'fn': '{{ contact.firstname }}',
  'ln': '{{ contact.lastname }}',
  'ct': '{{ contact.city }}',
  'st': '{{ contact.state }}',
  'zp': '{{ contact.zip }}',
  'country': '{{ contact.country }}'
});
{% else %}
fbq('init', 'YOUR_PIXEL_ID');
{% endif %}

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

Note: User data is automatically hashed by Meta Pixel before sending.

Method 2: Google Tag Manager (Flexible)

Install Meta Pixel through GTM for easier management.

Prerequisites

Step 1: Create Meta Pixel Tag in GTM

  1. In GTM, go to Tags → New
  2. Tag Configuration → Custom HTML
  3. Paste 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>
  1. Triggering: Select All Pages
  2. Name: "Meta Pixel - Base Code"
  3. Save

Step 2: Publish Container

  • Click Submit → Publish

See GTM Setup for more details.

Method 3: Meta Pixel Integration App (Limited)

HubSpot has native Meta Pixel integration, but with limitations.

Setup via HubSpot App Marketplace

  1. Go to App Marketplace in HubSpot
  2. Search for "Facebook Pixel"
  3. Install official Facebook integration
  4. Connect your Facebook account
  5. Select your Pixel

Limitations:

  • Limited custom event tracking
  • Cannot customize parameters easily
  • Less control over implementation
  • May not support all Meta Pixel features

Recommendation: Use Site Header HTML or GTM for full control.

Verification & Testing

1. Use Meta Pixel Helper Browser Extension

  1. Install Meta Pixel Helper extension for Chrome
  2. Visit your HubSpot site
  3. Click extension icon
  4. Should show:

2. Use Meta Events Manager

  1. Go to Events Manager in Meta Business Suite
  2. Select your Pixel
  3. Go to Test Events tab
  4. Enter your website URL
  5. Open Website → Navigate your site
  6. Verify events appear in real-time

3. Check Browser Console

// In browser DevTools console
console.log(typeof fbq); // Should return 'function'
console.log(_fbq); // Should return Meta Pixel object

4. Check Network Requests

  • Open DevTools → Network tab
  • Filter by "facebook"
  • Reload page
  • Should see requests to facebook.com/tr

Advanced Configuration

Respect user privacy with HubSpot cookie consent:

<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');

// Wait for consent before initializing
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['addPrivacyConsentListener', function(consent) {
  if (consent.allowed) {
    // User consented - initialize Meta Pixel
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  } else {
    // User declined - don't initialize
    console.log('Meta Pixel not loaded - no consent');
  }
}]);
</script>

Multiple Pixels

For multiple ad accounts or business units:

<script>
fbq('init', 'PIXEL_ID_1'); // Main business pixel
fbq('init', 'PIXEL_ID_2'); // Agency pixel
fbq('track', 'PageView'); // Fires on both pixels
</script>

Cross-Domain Tracking

If your HubSpot site spans multiple domains:

<script>
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');

// Track across domains
fbq('set', 'agent', 'tmgoogletagmanager', 'GTM-XXXXX');
</script>

Troubleshooting

Meta Pixel Not Loading

Check:

  1. Pixel ID is correct (numeric, no spaces)
  2. Code is in Site Header HTML (not footer)
  3. No JavaScript errors blocking execution
  4. Ad blockers disabled for testing

Debug:

// Check if fbq function exists
console.log(typeof fbq); // Should be 'function'

// Try manually firing event
fbq('track', 'PageView');

PageView Events Not Showing in Events Manager

Possible causes:

  • Pixel code not loaded
  • Ad blocker preventing tracking
  • Events Manager delay (can take 20 minutes)
  • Pixel not active in Events Manager

Solution: Use Meta Pixel Helper extension for instant verification.

Duplicate Events

Cause: Pixel installed multiple times (Site Header + App + GTM)

Fix:

  1. Check Site Header HTML
  2. Check installed HubSpot apps
  3. Check GTM tags
  4. Remove all but one implementation

Contact Data Not Passing

Issue: Advanced matching not working

Check:

{# Verify contact variables work #}
{{ contact.email }}
{{ contact.firstname }}

Fix: Ensure contact exists and variables are within HubL context.

Privacy & Compliance

GDPR Compliance

Meta Pixel must respect GDPR:

  • Obtain consent before loading pixel
  • Cookie notice must mention Meta Pixel
  • Allow opt-out via cookie settings
  • Data Processing Agreement with Meta

California Privacy Rights (CCPA)

For California visitors:

<script>
// Disable Meta Pixel for California (if needed)
if (navigator.language.includes('en-US') && userIsInCalifornia) {
  // Don't initialize pixel or use limited data use
  fbq('dataProcessingOptions', ['LDU'], 1, 1000);
}
</script>

User Data Hashing

Meta automatically hashes user data (emails, phone numbers) before transmission. This is done client-side for privacy.

Performance Considerations

Async Loading (Default)

Meta Pixel loads asynchronously by default:

t.async=!0;

Monitor Performance Impact

  • Check PageSpeed Insights
  • Meta Pixel typically adds 10-20kb
  • Async loading minimizes render-blocking

See Performance Troubleshooting.

Next Steps

For general Meta Pixel concepts, see Meta Pixel Guide.

↑ Back to top
// SYS.FOOTER