Meta's Browser Tracking not Working on my Web Pixel Extension

[kevdev94]

I'm trying to build a web pixel extension in order to track the browser-side events for Meta.
When I try to initialize the Meta Tracking script before the

analytics.subscribe("page_viewed", (event) => { ... });

:

!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', pixelId , customerData);

I get the following error:

[Web Pixels] Error: The creation of Web Pixel id "82411820" failed: {}
    at jt (bab9016a5w09126b9fp260b266fmecbb582em.js:1:67568)
    at async bab9016a5w09126b9fp260b266fmecbb582em.js:1:71110
    at async Promise.all (index 0)

 If I move the Meta's script inside the subscription of the event I get the following error:

worker.modern.js:140 Uncaught (in promise) ReferenceError: window is not defined

I read Window is not available inside the web pixel extensions so this makes sense.
It is worth mentioning that I also tried another approach provided by Meta's documentation here. But, this didn't work either.
Here is the code I tested:

var fbtag = document.createElement("img");
var externalId = sha256("123456789");
fbtag.src="https://www.facebook.com/tr/?id=" + "123" + "&ev=" +
   "PageView" + "&ud[external_id]=" + externalId + "&dl=" + "https://test.com";
document.body.appendChild(fbtag);

When I tried the code above I got the following error:

Uncaught (in promise) ReferenceError: document is not defined
    at executeFbBrowserEvent (worker.modern.js:181:23)
    at Object.<anonymous> (worker.modern.js:328:11)
    at Generator.next (<anonymous>)
    at fulfilled (worker.modern.js:35:26)

It seems like the document is not available either.
So, how are we supposed to track the browser events for the checkout steps once we update our store to the Checkout extensibility?
Can anyone help, please?
Thanks in advance.

[Liam]

Hi Kevdev94,

Based on the error messages you're receiving, it seems like the global objects document and window are not accessible within the context of the web pixel extension. This is likely due to the sandbox environment in which the extension code is executed.

Shopify's web pixel extension API provides a limited set of controlled APIs for accessing browser APIs and subscribing to customer events. Direct access to the window and document objects is not available. Instead, you can use the browser object provided by the API to interact with the browser and handle events.

Here's an example of how to send a beacon request to a server:

browser.sendBeacon('https://example.com/pixel', {event_name: 'example'});

In this example, https://example.com/pixel would be the endpoint of your server where you want to send the event data. {event_name: 'example'} is the data you want to send.

Additionally, you can use the analytics.subscribe function to subscribe to specific events:

analytics.subscribe('page_viewed', event => {
  // Code for handling the event
});

In this example, the callback function will be executed every time a page_viewed event is emitted.

In order to implement Meta's tracking script, you would likely need to refactor it to fit within the constraints of the web pixel extension API. Unfortunately, it seems like the tracking script you're trying to use is not compatible with the web pixel extension API as it is.

Hope this helps!

[kevdev94]

Thanks for your response Liam,

Yes, the beacon requests to the server work fine. The issue is only when trying to track the browser events.

Meta highly recommends sending both server and browser events to improve the accuracy and effectiveness of the advertising campaigns and measurement. We have always sent both, this is the reason why it is important for us.

Is there anything else that Shopify recommends to use/build instead of a web pixel extension so I can continue tracking the browser events in the checkout? (I'd like to track all the checkout steps or at least just the purchase event).

[Anil_learner]

Hey Kevdev, Have you found any solution? I am also stuck very badly in this issue. please help me.