I've never used this technology (nor do I intend to), but I need a solution on how to insert GTM analytics on the checkout page.
Basically, I don't even know where the code for checkout is.
Help, please?
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'purchase-gtm',
'ecommerce': {
'purchase': {
'actionField': {
'id': '{{checkout.order.id}}', // order number
'revenue': '{{checkout.order.total.value}}', // total transaction value (incl. tax and shipping)
'tax':'{{ecommerce.tax}}',
'shipping': '{{ecommerce.shipping}}'
},
'products': [
{{#each checkout.order.items}}
{
'name': '{{name}}', //Product Name
'id': '{{product_id}}', //Product ID
'price': '{{price.value}}', //Product Price
'brand': '{{brand.name}}', //Product Brand
'category': '{{category}}', //Product Category
'quantity': '{{quantity}}',
'variant': '{{sku}}', //Product variant if applicable
},
{{/each}}
],
}
}
});
</script>
Code as a sample.
For Cornerstone stencil theme, the file you want is templates/pages/checkout.html.
You probably want to add just after the line:
{{{head.scripts}}}
I've not checked all the values in your sample code, but that's where it should go.
We actually use a slightly fuller solution.
Instead of putting the script in the page, we've updated the build so that the script gets minified and we can use shared code.
So after the {{{head.scripts}}} we have:
<script src="{{cdn 'assets/dist/theme-bundle.checkout.js'}}"></script>
Then in webpack.common.js we have:
entry: {
main: './assets/js/app.js',
head_async: ['lazysizes'],
polyfills: './assets/js/polyfills.js',
checkout: './assets/js/checkout.js'
},
and we put our actual code into a new file /assets/js/checkout.js.
You'll need to use the Storefront API to gather the appropriate information using JS fetch. Make sure you get all of the line items from their include query string. We only have physical products, so in the example below that's all we're including.
You'll want to group all of the line items into an array and then push them into the GTM event once you're all done.
Here's how we're doing it, which I'm sure you can adapt to use for your own. Same can be done on the checkout confirmation page as well.
fetch('/api/storefront/carts?include=lineItems.physicalItems.options',{credentials:'include'})
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
var items = data[0].lineItems.physicalItems;
// ==== GA4 Analytics
var cartData = {
'event': 'begin_checkout',
'ecommerce': {
'items': []
}
}
// Insert order items into dataLayer
for (var i = 0; i < items.length; i++){
var item = items[i],
variant = item.options[0] == undefined ? '' : item.options[0].value,
cartItem = {
'item_name': item.name,
'item_id': item.sku,
'price': item.extendedListPrice,
'item_variant': variant,
'quantity': item.quantity
}
cartData.ecommerce.items.push(cartItem);
}
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push( cartData );
});
}
);