Extension Code: Fire events for extra FB pixel(s)
Go to app > More > Integrations: Extension Code
Click and view "Extension Code developer guides and samples"
Check disclaimer "I have read the App Extension developer guides and understand the risks of Extension code."
Click "Change"
5. Replace FB_PIXEL_ID, paste code, and click Save.
-Tracks FB events the same as Shopify native checkout:
// FB base code: copy the latest codes from the ads platform
!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');
// set your pixel id here
fbq('init', 'FB_PIXEL_ID');
// InitiateCheckout event
itc.addEventHandler('InitiateCheckout', function(payload, additional) {
fbq('track', 'PageView');
fbq('track', 'InitiateCheckout', payload);
});
// AddPaymentInfo event
itc.addEventHandler('AddPaymentInfo', function(payload, additional) {
fbq('track', 'AddPaymentInfo', payload);
});
// Original Purchase event - without shipping cost
itc.addEventHandler('Purchase', function(payload, additional) {
const purchaseObject = { ...payload, value: additional.totalWOShipping };
fbq('track', 'Purchase', purchaseObject);
});
-Track "Purchase" with shipping cost and "PostPurchase" events:
// FB base code: copy the latest codes from the ads platform
!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');
// set your pixel id here
fbq('init', 'FB_PIXEL_ID');
// InitiateCheckout event
itc.addEventHandler('InitiateCheckout', function(payload, additional) {
fbq('track', 'PageView');
fbq('track', 'InitiateCheckout', payload);
});
// AddPaymentInfo event
itc.addEventHandler('AddPaymentInfo', function(payload, additional) {
fbq('track', 'AddPaymentInfo', payload);
});
// Original Purchase event - with shipping cost
itc.addEventHandler('Purchase', function(payload, additional) {
const purchaseObject = { ...payload, value: additional.total };
fbq('track', 'Purchase', purchaseObject);
});
// Post-Purchase event
itc.addEventHandler('PostPurchase', function(payload, additional) {
fbq('track', 'Purchase', payload);
});
6. Verify by placing a test checkout using Funnel Preview and FB Pixel Helper
Appendix:
A. Track events for multiple FB pixels
Add extra fbq init codes to script, replace FB_PIXEL_ID_1, FB_PIXEL_ID_2, FB_PIXEL_ID_3 by your pixels:
// Multiple pixel id
fbq('init', 'FB_PIXEL_ID_1');
fbq('init', 'FB_PIXEL_ID_2');
fbq('init', 'FB_PIXEL_ID_3');
...
B. Track original purchase with or without shipping cost
Replace by below codes:
-Original purchase value without shipping cost:
// Original Purchase event - without shipping cost
itc.addEventHandler('Purchase', function(payload, additional) {
const purchaseObject = { ...payload, value: additional.totalWOShipping };
fbq('track', 'Purchase', purchaseObject);
});
-Original purchase value with shipping cost:
// Original Purchase event - with shipping cost
itc.addEventHandler('Purchase', function(payload, additional) {
const purchaseObject = { ...payload, value: additional.total };
fbq('track', 'Purchase', purchaseObject);
});
C. Track without post-purchase event
Remove the below codes:
// Post-Purchase event
itc.addEventHandler('PostPurchase', function(payload, additional) {
fbq('track', 'Purchase', payload);
});
References:
https://developers.facebook.com/docs/facebook-pixel/implementation
https://developers.facebook.com/docs/facebook-pixel/advanced
https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?hl=en
---