On 13th of August 2024 Shopify deprecated checkout.liquid and the method to add “Additional Scripts” to the checkout page directly. Since then a lot of Shopify shop owners were struggling to track checkout related events without using an app. And there are not many guides out there and Shopify hasn’t provided a proper guide at all. They have only given a standard event parameter breakdown. Not only that this removed Google Tag Manager or any code snippet which was added to the checkout pages. So nothing was being tracked in the checkout pages.
This guide will help you to send purchase events data with all the available data in Shopify using Google Tag Manager to any platform you desire.
Step 1 – Find where to add?
Go to Shopify Admin panel > Settings > Customer Events
Step 2 – Add custom pixel
Press “Add custom pixel” and add the following code after giving it a recognizable name. The GTM container ID would be ideal for this. And please change the GTM-XXXXX to your GTM ID in the code snippet.
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');
//Update GTM ID Please
console.log('cgtag loaded');
window.dataLayer = window.dataLayer || [];
// Subscribe directly to the checkout_completed event
analytics.subscribe('checkout_completed', (event) => {
console.log('cgtag custom event - checkout_completed', event);
// Construct the dataLayerObject with safety checks
const dataLayerObject = {
event: "orderPlaced",
transactionCurrency: event?.data?.checkout?.currencyCode || "",
transactionId: event?.data?.checkout?.order?.id || "",
transactionOrigin: event?.data?.checkout?.billingAddress?.country || "Online",
transactionDate: event?.timestamp || "",
transactionEmail: event?.data?.checkout?.email || "",
transactionPhone: event?.data?.checkout?.billingAddress?.phone || "",
transactionUserName: `${event?.data?.checkout?.billingAddress?.firstName || ""} ${event?.data?.checkout?.billingAddress?.lastName || ""}`.trim(),
transactionUserId: event?.data?.checkout?.order?.customer?.id || "",
transactionUserTotalSpent: event?.data?.checkout?.totalPrice || 0,
transactionPaymentType: event?.data?.checkout?.transactions?.[0]?.gateway || "",
transactionCoupon: event?.data?.checkout?.discountApplications?.[0]?.title || "",
transactionShippingMethods: event?.data?.checkout?.delivery?.selectedDeliveryOptions || "",
transactionCity: event?.data?.checkout?.billingAddress?.city || "",
transactionState: event?.data?.checkout?.billingAddress?.city?.province || "",
transactionStateCode: event?.data?.checkout?.billingAddress?.city?.provinceCode || "",
transactionPostalCode: event?.data?.checkout?.billingAddress?.zip || "",
transactionCountry: event?.data?.checkout?.billingAddress?.country || "",
transactionCountryCode: event?.data?.checkout?.billingAddress?.countryCode || "",
transactionSubTotal: event?.data?.checkout?.subtotalPrice?.amount || 0,
transactionTotal: event?.data?.checkout?.totalPrice?.amount || 0,
transactionTags: event?.data?.checkout?.customer?.tags || [],
transactionTotalTax: event?.data?.checkout?.totalTax || 0,
transactionShipping: event?.data?.checkout?.shippingLine?.price?.amount || 0,
transactionDiscount: event?.data?.checkout?.discountsAmount?.amount || 0,
transactionItems: (event?.data?.checkout?.lineItems || []).map(line => ({
item_id: line?.variant?.product?.id || "",
item_name: line?.variant?.product?.title || "",
product_category: line?.variant?.product?.type || "",
discount: line?.discountAllocations?.[0]?.amount?.amount,
quantity: line?.quantity || 0,
item_price: line?.variant?.price?.amount
})),
};
// Log the constructed dataLayerObject
console.log('cgtag constructed dataLayerObject:', dataLayerObject);
// Try pushing data to the dataLayer
try {
console.log('cgtag order placed', { dataLayerObject });
window.dataLayer.push(dataLayerObject);
} catch (error) {
console.error('cgtag Error pushing dataLayerObject:', error);
}
});
Step 3 – Save and connect
Change the Permission to “No required”
Press “Save” and “Connect”. Thats it!
This code snippet will start sending datalayer events for purchases again. However, please note the Google Tag Manager assistant does not get connected in checkout pages at the moment, even though the datalayer events are being sent to the live site, it’s being sent to a sandbox environment in the front end. As of now Google Tag Manager does not have the capability to access the code snippets in the checkout pages.
So don’t assume Google Tag Assistant breaking on checkout pages, is related to GTM code not being present on the checkout pages. Add the code as I mentioned and do a test purchase to see it working and you receiving data in GA4, Meta etc.
How to test if it’s working
If all goes well, when you do a purchase you should see a log in your browser console.
Now you can use the purchase event data, under the datalayer event name “orderPlaced” to send data to any platform you want using Google Tag Manager.
If you do have trouble please reach out to me in the comment section or via email, I’m happy to troubleshoot this for you.
Do want me to expand this further? let me know in the comments section.
If you are so eager to see the actually datalayer events in the new shopify checkout pages, here’s how to do that.
After doing a purchase, in the console you should see something called “top” as a dropdown. Open the dropdown and find an option called “web-pixel-sandbox-CUSTOM-xxxxxxxxxxxxx” and click on that(if you have multiple other custom pixels added to Shopify backend, you will be see one for each of those as well).
After that if you type “dataLayer” as usual in the console, it will show you the datalayer.
0 Comments