Vlad Kononov
AuthorThis article explores how to achieve 100% accurate Shopify tracking using Stape and sever GTM. Learn how to prevent data loss, improve attribution, and optimize your marketing performance with a reliable and effective tracking solution. Accurate Shopify analytics is crucial for achieving your business goals.
You need reliable data to decide how to allocate budgets, see the performance of your campaigns, and return on invested money. Losing track of conversions can lead to an incomplete picture and misguided decisions. Luckily, Stape has you covered, and in this article we will explain how it is possible to track 100% of your purchases on Shopify no matter what and deliver all necessary data to the analytics and/or marketing platforms so that you could get better insights, accurate attribution reports and train your pixels more effectively.
Although Shopify released a web pixel API that allows us to subscribe to different events and track them more precisely, you may have noticed that sometimes you’re still missing a percentage of orders that weren’t reported to your advertising or analytics platforms. This can happen for various reasons - ad blockers, ITP restrictions, slow internet, a failure on the user’s device, or even just an unfortunate coincidence. Any of these can cause you to lose track of your conversions.
But don’t worry, Stape got you covered! With Shopify server-side tracking, you can bypass these common issues.
In short, the implementation flow looks like this:
Stape Server GTM app on Shopify allows you to easily install Custom GTM and GA4 Loader and become more resistant against adblockers. Combined with the Cookie Keeper power-up, it will even allow you to bypass ITP restrictions.
We have great articles and ready-made container templates that describe how to implement this step, please check them out:
Now we need to store the cookies we might need in the future in the Stape Store.
In our example, we will store Meta cookies on the “checkout_started” event and send them from the Shopify web pixel to sGTM. At this moment, the checkout token will be available to us and we’ll be able to use it as a stitching parameter to later match the webhook with the checkout and cookies.
A similar process can be applied to any other platform you want to report to.
The following code snippet will send a payload with checkout token and Meta cookies to the server container URL. The Data Client will claim this request; by default, it accepts requests on /data path.
analytics.subscribe("checkout_started", (event) => {
setTimeout(() => {
async function getCookiesPayload() {
try {
const payload = {
"event": "store_cookies",
"cart_token": init.data.cart.id,
"fbp": await browser.cookie.get('_fbp'),
"fbc": await browser.cookie.get('_fbc')
};
return payload;
} catch (error) {
console.error('Error retrieving cookies:', error);
return null;
}
}
async function sendCookiesToSgtm() {
const payload = await getCookiesPayload();
if (payload) {
fetch("https://sst.example.com/data", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload),
keepalive: true
}).then(response => {
console.log('Payload sent successfully:', response);
}).catch(error => {
console.error('Error sending payload:', error);
});
}
}
sendCookiesToSgtm();
}, 1500);
});Now we need to store these cookies in Stape Store using the Stape Store Writer tag available in the server GTM gallery, so we can later retrieve them and report to Meta off the webhook. These cookies will be referenced by cart token, which is available to us on ‘store_cookies’ event, and that will also be available in the native webhook payload sent from Shopify.
Here is an example of how the Stape Store Writer tag can be configured:
If applicable, please also keep in mind privacy regulations and store advertising and/or analytics consent status as well, so you can later know whether this user has granted consent and you are allowed to report such conversion. Alternatively, if your consent banner supports Shopify privacy API, you may configure your web pixel to fire only if necessary consent status has been granted.
We need to store every purchase reported in a “usual” way from the web container in Stape Store, so we can later know if this conversion has already been reported to Meta.
Apply a similar approach used on a previous step, but this time use transaction_id as a document key, which will also be available to us from the Shopify webhook payload.
Here is an example of a Stape Store Writer tag that can be configured for this purpose:
It is better to convert transaction_id “number” variable type to a string to avoid any conflicts between data types used in sGTM, Shopify, and Stape Store. There is a variable in the sGTM gallery that easily allows us to do that.
You may set up a webhook in Shopify in many different ways. One of the easiest would be to use the Stape Server GTM app - it has all the necessary payload: cart token, properly structured order and product information, and user data. You may also use native webhook functionality or any other app of your choice.
We would also suggest using Stape’s Request Delay Power Up to ensure that the request sent from the web container reaches the server container before the webhook from the backend. This will allow us to explicitly control the sequence of requests, which is crucial for our case. A delay of 1 minute should be sufficient for the purchase request to reach the server container, allowing all necessary tags to fire and process the required requests.
On this step, we already have the following:
Now, we need to verify whether the incoming webhooks should be processed and reported to Meta or disregarded, since the order has already been processed.
Thus, we take transaction_id from the incoming webhook and check if it is available in the Stape Store using the Stape Store Lookup variable.
As a result, our variable will return ‘true’ if this transaction_id is found in the Stape Store. This means we should disregard this webhook since this transaction has already been reported off the web container.
If our variable returns undefined or false, it means that this transaction has not been reported off the web container for some reason, and we should process this webhook.
Set up an additional Facebook tag and fill it with basic information from the webhook, like value, currency, content_ids, user data, etc.
For the most accurate attribution, you should also report the _fbp and _fbc cookies from the Stape Store. They can be retrieved using the Stape Store Lookup variable referenced by the cart token available in your webhook. Here is an example:
Stape Store Lookup variable for _fbp should override Browser ID parameter in Facebook tag, and Stape Store Lookup for _fbc should override Click ID parameter.
This Facebook tag should be triggered when our Stape Store Lookup variable for transaction_id check returns a value that does not equal true.
If applicable, perform an additional check for consent status using a similar approach.
This approach allows you to achieve 100% Shopify conversion tracking accuracy, so you’ll never miss a conversion that will be attributed appropriately. It can be extended for any marketing/analytics platform you need; just make sure to store all necessary cookies in step 2. Then, in step 5, you can create an additional tag like TikTok, Snapchat, GA4, Google Ads, etc. You just have to override the necessary parameters with cookie values obtained from Stape Store.
For more complex platforms like Google Ads, Stape already offers excellent solutions with a simple authentication process, including the Google Ads Offline Conversion tracking tag and Conversion Adjustment tag reporting, if you have such specific needs.
Feel free to reach out if you have any questions.
Happy to hear that! Just click Try for free button and see all the options!
Vlad, a Tracking & Measurement specialist, excels in GTM and sGTM. He helps businesses ensure accurate data collection, seamless integration, and optimized measurement strategies.
Comments