Install Meta Pixel on Site123 (Step-by-Step) | OpsBlu Docs

Install Meta Pixel on Site123 (Step-by-Step)

How to install Meta (Facebook) Pixel on Site123 using code injection or Google Tag Manager for Facebook ads tracking.

Learn how to install Meta Pixel (formerly Facebook Pixel) on your Site123 website for Facebook and Instagram ads tracking.

Installation Methods

Method Difficulty Customization Recommended For
Direct Code Injection Easy Medium Quick setup
Google Tag Manager Medium High Best practice

Method 1: Direct Code Injection

Install Meta Pixel directly into Site123's code injection system.

Step 1: Get Your Pixel ID

  1. Go to Meta Events Manager

  2. Select or Create Pixel

    • If you have a Pixel: Select it from the list
    • If not: Click Add Events → From a New Website → Meta Pixel

  3. Copy Pixel ID

    • Your Pixel ID is a 15-16 digit number
    • Format: 1234567890123456

Step 2: Add Meta Pixel to Site123

  1. Log in to Site123 Dashboard

  2. Navigate to Code Injection

    • Click Manage in top menu
    • Go to Settings → Advanced Settings
    • Select Code Injection or Custom Code

  3. Add Meta Pixel Code to Head Section

    In the Head Code section, 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>
<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 -->

    Replace YOUR_PIXEL_ID with your actual 15-16 digit Pixel ID.

  4. Save Changes

    Click Save or Update to apply the code to your website.

Advanced matching sends hashed customer data for better ad targeting:

Replace the basic init code with:

<script>
  fbq('init', 'YOUR_PIXEL_ID', {
    em: '', // Will be populated if available
    fn: '',
    ln: '',
    ph: '',
    external_id: ''
  });
  fbq('track', 'PageView');
</script>

Note: Site123 doesn't provide automatic access to user data. Advanced matching works best with GTM or custom form integrations.

Step 4: Verify Installation

  1. Install Meta Pixel Helper

  2. Visit Your Site

    • Open your Site123 website
    • The Pixel Helper icon should turn blue with a number

  3. Check Pixel Status

    • Click the Pixel Helper icon
    • Green checkmark = Working correctly
    • Yellow warning = Review warnings
    • Red error = Fix required

  4. Verify in Events Manager

    • Go to Meta Events Manager
    • Click Test Events
    • Enter your website URL
    • Navigate your site and watch events appear

Using GTM provides better event management and easier updates.

Prerequisites

Step 1: Create Meta Pixel Base Tag

  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>

    Replace YOUR_PIXEL_ID with your actual Pixel ID.

  4. Triggering: Select All Pages

  5. Tag Sequencing (optional):

    • Advanced Settings → Tag Sequencing
    • Fire this tag before other Meta event tags

  6. Name: Meta Pixel - Base Code

  7. Save

Step 2: Create Event Tags

See event tracking section below for specific event implementations.

Step 3: Test and Publish

  1. Use GTM Preview Mode

    • Click Preview in GTM
    • Enter your Site123 URL
    • Verify Meta Pixel base tag fires on all pages

  2. Check with Pixel Helper

    • Visit your site with Preview active
    • Pixel Helper should show PageView event

  3. Publish Container

    • Click Submit
    • Add version name
    • Click Publish

Standard Event Tracking

Track common Meta Pixel events.

ViewContent Event

Track when users view important content or specific pages.

Direct Code (add to specific pages via page-specific code injection):

<script>
  fbq('track', 'ViewContent', {
    content_name: 'Page Name',
    content_category: 'Services', // or 'Blog', 'About', etc.
    content_type: 'page'
  });
</script>

GTM Method:

  1. Create Page View trigger for specific pages
  2. Create Custom HTML tag with ViewContent event
  3. Assign trigger and publish

Lead Event

Track form submissions and lead generation.

Site123 Contact Form:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    form.addEventListener('submit', function(e) {
      fbq('track', 'Lead', {
        content_name: 'Contact Form',
        content_category: 'Lead Generation'
      });
    });
  });
});
</script>

Add this to Site123's Body Code or Footer Code section.

GTM Method:

  1. Create Form Submission trigger
  2. Create Custom HTML tag:
    <script>
  fbq('track', 'Lead', {
    content_name: 'Contact Form'
  });
</script>
  3. Assign Form Submission trigger
  4. Publish

Contact Event

Track when users initiate contact (phone, email).

Phone Click Tracking:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const phoneLinks = document.querySelectorAll('a[href^="tel:"]');

  phoneLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      fbq('track', 'Contact', {
        contact_type: 'phone'
      });
    });
  });
});
</script>

Email Click Tracking:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const emailLinks = document.querySelectorAll('a[href^="mailto:"]');

  emailLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      fbq('track', 'Contact', {
        contact_type: 'email'
      });
    });
  });
});
</script>

CompleteRegistration Event

Track user signups or account creations (if applicable).

<script>
  fbq('track', 'CompleteRegistration', {
    status: 'completed'
  });
</script>

Add to your signup confirmation page using page-specific code injection.

Ecommerce Events (Site123 Store)

If using Site123's ecommerce features:

ViewContent (Product Page)

<script>
  fbq('track', 'ViewContent', {
    content_ids: ['PRODUCT_SKU'],
    content_name: 'Product Name',
    content_type: 'product',
    value: 99.99,
    currency: 'USD'
  });
</script>

Add to product pages using page-specific code injection.

AddToCart Event

<script>
document.addEventListener('DOMContentLoaded', function() {
  const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');

  addToCartButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      // Extract product data from page
      const productName = document.querySelector('.product-name')?.textContent;
      const productPrice = parseFloat(
        document.querySelector('.product-price')?.textContent.replace(/[^0-9.]/g, '')
      );

      fbq('track', 'AddToCart', {
        content_name: productName,
        content_type: 'product',
        value: productPrice,
        currency: 'USD'
      });
    });
  });
});
</script>

InitiateCheckout Event

<script>
  fbq('track', 'InitiateCheckout', {
    content_type: 'product',
    value: 99.99, // Cart total
    currency: 'USD',
    num_items: 2
  });
</script>

Add to cart page or when checkout button is clicked.

Purchase Event

Add to order confirmation/thank you page:

<script>
  fbq('track', 'Purchase', {
    content_type: 'product',
    value: 99.99,
    currency: 'USD',
    content_ids: ['SKU1', 'SKU2'],
    num_items: 2
  });
</script>

Important: Only fire this once per order using page-specific code injection on the thank you page.

Custom Events

Track site-specific interactions.

Button Click Tracking

<script>
document.addEventListener('DOMContentLoaded', function() {
  const ctaButtons = document.querySelectorAll('.cta-button, .get-quote-btn');

  ctaButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      fbq('trackCustom', 'CTAClick', {
        button_text: this.textContent,
        page_location: window.location.pathname
      });
    });
  });
});
</script>

Download Tracking

<script>
document.addEventListener('DOMContentLoaded', function() {
  const downloadLinks = document.querySelectorAll('a[href$=".pdf"], a[href$=".doc"], a[href$=".zip"]');

  downloadLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      const fileName = this.getAttribute('href').split('/').pop();

      fbq('trackCustom', 'FileDownload', {
        file_name: fileName,
        page_location: window.location.pathname
      });
    });
  });
});
</script>

Video Play Tracking

<script>
document.addEventListener('DOMContentLoaded', function() {
  const videos = document.querySelectorAll('video');

  videos.forEach(function(video) {
    video.addEventListener('play', function() {
      fbq('trackCustom', 'VideoPlay', {
        video_title: this.title || 'Untitled',
        page_location: window.location.pathname
      });
    });
  });
});
</script>

Privacy & Consent

GDPR Compliance

Implement consent before loading Meta Pixel:

<script>
  // Wait for user consent
  document.addEventListener('cookieConsentGranted', function() {
    // Load Meta Pixel only after consent
    !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>

Limited Data Use (CCPA)

For California visitors:

fbq('dataProcessingOptions', ['LDU'], 1, 1000); // California

Or disable for all:

fbq('dataProcessingOptions', []);

Testing & Verification

1. Meta Pixel Helper

  • Install: Chrome Web Store
  • Green icon: Pixel working
  • Yellow: Warnings to review
  • Red: Errors to fix

2. Meta Events Manager

Test Events Tool:

  1. Go to Events Manager
  2. Select your Pixel
  3. Click Test Events
  4. Enter your Site123 URL
  5. Navigate your site
  6. Watch events appear in real-time

Check Event Quality:

  • Events appear within seconds
  • Parameters are correct (value, currency, etc.)
  • No duplicate events
  • Event names match standard or custom events

3. Browser Console

Check Pixel loaded:

console.log(window.fbq);
// Should show function

Monitor Pixel calls:

// Open browser console, then interact with site
// You'll see fbq() calls logged

Troubleshooting

Pixel Not Loading

Symptoms: Pixel Helper shows no pixel

Fixes:

  1. Verify Pixel ID is correct (15-16 digits)
  2. Check code injection saved in Site123
  3. Clear browser cache, test in incognito
  4. Disable ad blockers for testing
  5. Check browser console for errors
  6. Verify Site123 site is published

Duplicate Events

Cause: Pixel installed in multiple locations

Fix:

  • Check Site123 code injection (head, body, footer)
  • If using GTM, remove direct pixel code
  • Search all code areas for fbq('init'
  • Keep only ONE implementation

Events Not Tracking

Symptoms: PageView works, but custom events don't

Fixes:

  1. Verify event code runs after base pixel
  2. Check element selectors are correct
  3. Ensure event code is inside DOMContentLoaded
  4. Test event manually in browser console:
    fbq('track', 'Lead');
  5. Check Events Manager for the event

Purchase Event Fires Multiple Times

Cause: Purchase code on page that's revisited

Fix:

  • Only add purchase code to thank you page
  • Use page-specific code injection, not global
  • Consider using sessionStorage to prevent duplicates:
    if (!sessionStorage.getItem('purchase_tracked_' + ORDER_ID)) {
  fbq('track', 'Purchase', {...});
  sessionStorage.setItem('purchase_tracked_' + ORDER_ID, 'true');
}

Mobile Tracking Issues

Symptoms: Works on desktop, not mobile

Fixes:

  1. Test on actual mobile device
  2. Check mobile browser console for errors
  3. Verify scripts load on mobile (Network tab)
  4. Ensure Site123 mobile version has same code

Advanced Features

Server-Side Events (Conversions API)

For better iOS 14+ tracking and ad blocker bypass, implement Conversions API.

Options:

  1. Use Meta's Conversions API Gateway (requires Plus plan)
  2. Implement custom server-side tracking
  3. Use third-party tools (e.g., Zapier, Segment)

Note: Server-side implementation requires development work beyond Site123's capabilities.

Multi-Language Sites

Track language in events:

const siteLang = document.documentElement.lang || 'en';

fbq('track', 'Lead', {
  content_name: 'Contact Form',
  language: siteLang
});

Best Practices

  1. Use Standard Events when possible (ViewContent, Lead, Purchase, etc.)
  2. Add Custom Events for site-specific actions (CTAClick, etc.)
  3. Always include value and currency for ecommerce events
  4. Implement consent management for GDPR/CCPA compliance
  5. Test thoroughly before launching ad campaigns
  6. Monitor event quality in Events Manager regularly
  7. Use GTM for easier management of multiple events

Next Steps

For general Meta Pixel concepts, see Meta Pixel Guide.

返回顶部