Installing Meta Pixel on Zyro

Meta Pixel (formerly Facebook Pixel) tracks conversions from Facebook and Instagram ads. This guide covers how to install Meta Pixel on your Zyro site.

Prerequisites

Before installing Meta Pixel on Zyro, you need:

1. A Zyro account with a paid plan (Unleash, eCommerce, or eCommerce Plus)
2. A Facebook Business Manager account - Create one
3. A Meta Pixel - Create in Events Manager
4. Your Meta Pixel ID (15-16 digit number)
5. Published Zyro site (tracking only works on published sites)

Step 1: Get Your Meta Pixel Code

1. Go to Meta Events Manager
2. Select your Pixel
3. Click Continue Pixel Setup
4. Select Install code manually
5. Copy the Pixel base code

The code will look like this:

<!-- 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 Pixel ID.

Step 2: Add Meta Pixel to Zyro

1. Log in to your Zyro dashboard
2. Select your website
3. Click Settings in the left sidebar
4. Scroll to Website code section
5. Find the Header code field
6. Paste your Meta Pixel code
7. Click Save

Important Notes:

• Use Header code, not Footer code
• Make sure to click Save after pasting

Step 3: Publish Your Site

1. Click the Publish button (top right corner)
2. Wait for Zyro to deploy your changes (usually 1-2 minutes)
3. Visit your live site

Step 4: Verify Installation

Using Meta Pixel Helper

1. Install Meta Pixel Helper Chrome extension
2. Visit your published Zyro site
3. Click the Pixel Helper icon
4. Verify that your pixel is active and PageView event fired
5. Check for any errors or warnings

Using Events Manager Test Events

1. Go to Meta Events Manager
2. Select your Pixel
3. Click Test Events
4. In a new tab, visit your published Zyro site
5. Return to Events Manager - you should see your visit appear

Using Browser Developer Tools

1. Open your published Zyro site
2. Press F12 to open Developer Tools
3. Go to Network tab
4. Filter by facebook or fbevents
5. Reload the page
6. Look for requests to facebook.com/tr

If you see these requests, Meta Pixel is working correctly.

Step 5: Configure Standard Events

Basic Events (Automatic)

The base pixel code automatically tracks:

• PageView - Every page load

Form Submission (Lead Event)

Add this code to Settings → Website code → Footer code:

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

  forms.forEach(function(form) {
    form.addEventListener('submit', function(e) {
      fbq('track', 'Lead');
    });
  });
});
</script>

Button Clicks (Custom Event)

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(e) {
    const button = e.target.closest('button, .zyro-button');

    if (button) {
      fbq('trackCustom', 'ButtonClick', {
        button_text: button.textContent.trim()
      });
    }
  });
});
</script>

Zyro E-commerce Events

For Zyro eCommerce sites (requires eCommerce plan):

Product View Event

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Check if on product page
  if (window.location.pathname.includes('/product/')) {
    const productName = document.querySelector('.product-name, h1')?.textContent;
    const productPrice = document.querySelector('.product-price, .price')?.textContent;

    if (productName && productPrice) {
      fbq('track', 'ViewContent', {
        content_name: productName,
        content_type: 'product',
        value: parseFloat(productPrice.replace(/[^0-9.]/g, '')),
        currency: 'USD'
      });
    }
  }
});
</script>

Add to Cart Event

<script>
document.addEventListener('click', function(e) {
  const addToCartBtn = e.target.closest('.add-to-cart, [data-add-to-cart]');

  if (addToCartBtn) {
    const productContainer = addToCartBtn.closest('.product-item, [data-product]');
    const productName = productContainer?.querySelector('.product-name')?.textContent;
    const productPrice = productContainer?.querySelector('.product-price')?.textContent;

    fbq('track', 'AddToCart', {
      content_name: productName,
      content_type: 'product',
      value: parseFloat(productPrice?.replace(/[^0-9.]/g, '') || 0),
      currency: 'USD'
    });
  }
});
</script>

Purchase Event (Order Confirmation Page)

Add to custom code on order confirmation page:

<script>
// Only fire on order confirmation
if (window.location.pathname.includes('/order-confirmation') ||
    window.location.search.includes('order_id=')) {

  const orderTotal = document.querySelector('.order-total, .total-price')?.textContent;
  const orderId = new URLSearchParams(window.location.search).get('order_id');

  fbq('track', 'Purchase', {
    value: parseFloat(orderTotal?.replace(/[^0-9.]/g, '') || 0),
    currency: 'USD',
    transaction_id: orderId || 'unknown'
  });
}
</script>

Advanced Configuration

Automatic Advanced Matching

Enhance pixel matching with customer data:

<script>
fbq('init', 'YOUR_PIXEL_ID', {
  em: 'user@example.com', // Email (hashed automatically)
  fn: 'john',             // First name
  ln: 'doe',              // Last name
  ph: '5551234567',       // Phone
  ct: 'new york',         // City
  st: 'ny',               // State
  zp: '10001',            // Zip code
  country: 'us'           // Country
});
</script>

Important: Only include if you have user consent and proper privacy disclosures.

Custom Conversion Events

Track specific actions:

<script>
// Track video play
document.querySelectorAll('video').forEach(function(video) {
  video.addEventListener('play', function() {
    fbq('trackCustom', 'VideoPlay');
  });
});

// Track file download
document.querySelectorAll('a[href$=".pdf"]').forEach(function(link) {
  link.addEventListener('click', function() {
    fbq('trackCustom', 'DownloadPDF', {
      file_name: this.href.split('/').pop()
    });
  });
});
</script>

Conversion API (Server-Side Tracking)

For more reliable tracking (especially with iOS 14+):

Note: Requires server-side implementation. Consider using:

• Facebook's Conversions API
• GTM Server-Side Tagging
• Third-party integration platforms

Troubleshooting

Pixel Not Loading

Problem: Pixel Helper shows no pixel detected.

Solutions:

1. Verify paid plan: Custom code requires paid Zyro plan
2. Check site is published: Pixel doesn't work in preview mode
3. Verify Pixel ID: Ensure ID is correct in code
4. Check code placement: Should be in Header code
5. Clear cache: Hard reload (Ctrl+Shift+R)
6. Disable ad blockers: Test with ad blockers disabled

Events Not Firing

Problem: PageView works but custom events don't fire.

Solutions:

1. Check event syntax: Ensure proper fbq('track', 'EventName') format
2. Test in Events Manager: Use Test Events to see real-time events
3. Check JavaScript errors: Open browser console (F12)
4. Verify selectors: Ensure element selectors match Zyro's HTML
5. Test timing: Some events may need delay or different trigger

Duplicate Events

Problem: Events firing multiple times.

Solutions:

1. Check for duplicate pixel code: Search all code sections
2. Remove from GTM if using direct: Don't use both methods
3. Check event listeners: Ensure listeners aren't duplicated

Privacy and Compliance

Cookie Consent

Implement consent before loading Pixel:

<script>
// Check for consent
if (localStorage.getItem('cookieConsent') === 'granted') {
  // Load Meta Pixel
  !function(f,b,e,v,n,t,s){...}(window, document,'script',...);
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
} else {
  // Show consent banner
}
</script>

GDPR Compliance

• Obtain consent before loading pixel
• Update privacy policy
• Allow users to opt out
• Use Limited Data Use for California

iOS 14+ Considerations

• Use Conversions API for server-side tracking
• Verify your domain in Business Manager
• Configure Aggregated Event Measurement

Testing Checklist

Before going live:

• Pixel loads on all pages
• PageView event fires correctly
• Custom events trigger as expected
• No JavaScript errors in console
• Pixel Helper shows green checkmark
• Events appear in Events Manager
• Tested on mobile devices
• Tested on different browsers

Next Steps

• Set Up GA4 - Track alongside Meta Pixel
• Install GTM - Manage all pixels through GTM
• Troubleshoot Tracking - Debug issues

Additional Resources

• Meta Pixel Documentation
• Meta Events Manager
• Meta Pixel Helper
• Zyro Help Center