@HappyTail @wrayjames
The GA4 commerce tracking we set up is working. I'll post details below. Keep in mind that there's no "standard" setup per se -- it just depends on what you want to measure. In this case we're measuring:
- Products viewed
- Products added to cart
- Completed checkouts
That said, here's what we did.
product.liquid
Add the script below to the top of the template. This will add an event to the data layer when a product is viewed, and will include the following product info:
- Title
- ID
- Price
- Brand
- Categories
- Selected variant
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
event: 'view_item',
ecommerce: {
currency: '{{shop.currency}}',
value: {{product.price | money_without_currency | remove: ","}},
items: [{
item_name: '{{ product.title }}',
item_id: "{{ product.id}}",
price: {{ product.price | money_without_currency | remove:',' }},
item_brand: "{{ product.vendor | remove: "'" | remove: '"' }}",
{% for collection in product.collections %}
item_category{% unless forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | remove: "'" | remove: '"' }}",
quantity: 1
}]
}
});
</script>
product-form.liquid
Add the script below to the bottom of the template. Make sure that the querySelector method targets your add-to-cart button. This will add an event to the data layer when a product is added to the cart, and will include the following product info:
<script>
window.dataLayer = window.dataLayer || [];
document.querySelector('button.add-to-cart').addEventListener('click', () => {
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
'event': 'add_to_cart', /* create a custom event in GTM */
'ecommerce': {
'currency': '{{ shop.currency }}',
'value': {{ product.selected_or_first_available_variant.price | money_without_currency | remove: "," }},
'items': [
{
'item_name': '{{ product.title}}',
'item_id': '{{product.id}}',
'price': {{ product.selected_or_first_available_variant.price | money_without_currency | remove:',' }},
'item_brand': '{{ product.vendor }}',
'item_variant': '{{ product.selected_or_first_available_variant.title }}'
}
]
}
});
});
</script>
Confirmation page
Go to Settings > Checkout and add the script below in the Additional scripts box. This will add an event to the data layer when a purchase is completed and will include the following transaction info:
- Currency
- Value
- Tax
- Shipping cost
- Transaction ID
- Items purchased (title, ID, price, brand, quantity, variant)
<script>
window.dataLayer = window.dataLayer || [];
{% if first_time_accessed %}
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
'page_type': 'purchase',
'event': 'purchase', /* create a custom event in GTM */
'ecommerce': {
'currency': '{{ checkout.currency }}',
'value': {{ checkout.total_price | money_without_currency | remove:',' }}, // order total (price of all products + shipping)
'tax': {{ checkout.tax_price | money_without_currency | remove:',' }}, // tax
'shipping': {{ checkout.shipping_price | money_without_currency | remove:',' }}, // shipping costs
'transaction_id': '{{ checkout.transactions[0].id }}', // transaction id
'items': [
{% for line_item in checkout.line_items %}
{
'item_name': '{{ line_item.product.title}}',
'item_id': '{{line_item.product_id}}',
'price': {{ line_item.final_price | money_without_currency | remove:',' }},
'item_brand': '{{ line_item.vendor }}',
'quantity': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</script>
Additional setup and notes
The scripts above will simply push the data you need into the data layer. In order to actually send the data to GA you'll need to do a few additional things:
- Make sure the base GA4 script is on every page where you want to use GA.
- Send data from the data layer to GA. This can be done in GTM as outlined in the e2msolutions blog post. Skip to "Create GTM Trigger for the view_item and purchase event".
Also note that we didn't do any of the user tracking stuff. And we already had page view tracking set up so the instructions above don't cover that.
Hope that helps! If anyone needs further assistance feel free to DM me.
