Facebook Pixel Gateway Integration Guide

Non-Shopify Website Integration

Option 1: For Websites WITHOUT Existing Facebook Pixel

If your website doesn't already have Facebook Pixel installed, use this standard implementation:

<script 
  src="" 
  data-auto-init="true" 
  data-pixel-id="YOUR_PIXEL_ID">
</script>

Or initialize manually:

<script src=""></script>
<script>
  // Initialize with your pixel ID
  fbPixelGateway.init({
    pixelId: 'YOUR_PIXEL_ID',
    debug: true // Set to false in production
  });
</script>

Option 2: For Websites WITH Existing Facebook Pixel

Add this code after your existing Facebook Pixel code:

<!-- First, your existing Facebook Pixel code -->
<script>
  !function(f,b,e,v,n,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>

<!-- Then, our fixed gateway code -->
<script 
  src="" 
  data-auto-init="true" 
  data-pixel-id="YOUR_PIXEL_ID">
</script>

Tracking Events

You can track standard and custom events using either method:

// Standard events
fbPixelGateway.pageView();
fbPixelGateway.viewContent({ content_name: 'Product Name', value: 99.99, currency: 'USD' });
fbPixelGateway.addToCart({ content_ids: ['123'], value: 99.99, currency: 'USD' });
fbPixelGateway.purchase({ value: 99.99, currency: 'USD', order_id: '12345' });

// Custom events - ANY event name is supported
fbPixelGateway.track('CustomEvent', { custom_property: 'value' });
fbPixelGateway.track('UserSignedUp', { method: 'email' });
fbPixelGateway.track('VideoWatched', { video_id: '12345', duration: 120 });

If you're using the fixed version with existing Facebook Pixel, you can also use the standard fbq function:

// Using standard Facebook Pixel
fbq('track', 'Purchase', { value: 99.99, currency: 'USD' });
fbq('track', 'CustomEvent', { property: 'value' });

// Both client-side and server-side events will be sent

Testing Your Integration

Add this code during development to test your integration:

<script>
// Add a test button to your page
document.addEventListener('DOMContentLoaded', function() {
  const testButton = document.createElement("button");
  testButton.innerText = "Test Pixel";
  testButton.style.position = "fixed";
  testButton.style.bottom = "10px";
  testButton.style.right = "10px";
  testButton.style.zIndex = "9999";
  testButton.style.padding = "8px 16px";
  testButton.style.backgroundColor = "#4CAF50";
  testButton.style.color = "white";
  testButton.style.border = "none";
  testButton.style.borderRadius = "4px";
  testButton.style.cursor = "pointer";
  
  testButton.addEventListener("click", function() {
    // Test event
    if (typeof fbPixelGateway !== 'undefined') {
      fbPixelGateway.track("TestEvent", {
        test_id: "manual_test_" + Date.now(),
        timestamp: new Date().toISOString()
      });
      console.log("Test event sent via fbPixelGateway!");
    } else if (typeof fbq !== 'undefined') {
      fbq('track', 'TestEvent', {
        test_id: "manual_test_" + Date.now(),
        timestamp: new Date().toISOString()
      });
      console.log("Test event sent via fbq!");
    } else {
      console.error("No Facebook Pixel found!");
    }
  });
  
  document.body.appendChild(testButton);
});
</script>