In order to implement StatSig tracking on Shopify Custom Pixels, you need to ensure that the StatSig SDK is properly initialized and that events are logged correctly. Here's a step-by-step guide on how to do this:
1. First, create a script element and set its source to the StatSig SDK. Append this script to the document head.
javascript const statsigScript = document.createElement('script'); statsigScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/statsig-js/build/statsig-prod-web-sdk.min.js'); document.head.appendChild(statsigScript);
2. Next, initialize the StatSig SDK. This should be done within an asynchronous function that is called when the StatSig script has loaded.
javascript const statsigInit = new Promise(async (resolve) => { statsigScript.onload = async () => { await statsig.initialize("client-sdk-key", { userID: "user-id" }); resolve(); } })
3. Subscribe to the event you want to track and log it with StatSig. Make sure to wait for the StatSig SDK to initialize before logging the event.
javascript analytics.subscribe("checkout_started", async () => { await statsigInit; statsig.logEvent("checkout_started"); });
Remember that statsig
will be the global, you want to wait for initialization before logging, no need to require
.Please note that the SDK accumulates events within, and flushes periodically. Ensure that Statsig.logEvent()
was ever called, and that the application didn’t exit right away after that so the SDK has enough time to flush the events.
Inspect the network requests and see what requests were made and what their responses were to verify if the events are being sent correctly.