Categories
analytics

Google Tag Manager with Google Analytics Ecommerce tracking for Shopify Lite users

There’s a false belief, that Google Tag Manager is only for Shopify Plus plan. That is true, if you are looking for Shopify’s built-in GTM implementation. However, you can have it all: Google Tag Manager and Google Analytics (Universal), with ecommerce tracking, for Shopify Lite as well. (Yes, I’ll try to make a post of GA4 soon).

There’s a false belief, that Google Tag Manager is only for Shopify Plus plan. That is true, if you are looking for Shopify’s built-in GTM implementation. However, you can have it all: Google Tag Manager and Google Analytics (Universal), with ecommerce tracking, for Shopify Lite as well. (Yes, I’ll try to make a post of GA4 soon).

Read the Google Analytics Ecommerce Tracking for Universal analytics at https://support.google.com/tagmanager/answer/6107169. You are supposed to put the script for ecommerce tracking ABOVE the GTM script, so that GTM can have access to it BEFORE it fires the pageview. If, for some reason, you can not add the script above the GTM, then you should try find a way to fire the tag with DOM Ready.

How to install Google Tag Manager with Ecommerce Tracking for Shopify Lite Users

Total Time: 5 minutes

Copy and paste your Google Tag Manager script into your Shopify’s theme.liquid file.

Choose Online Store > themes > Actions button on the right > Edit code > theme.liquid. Copy the upper script to <head> section and lower just after <body> tag.

Copy and paste your Google Tag Manager script to Shopify’s checkout page

If you have access to your checkout.liquid file (which Lite users don’t usually have), you should copy and paste the previous scripts the checkout.liquid file, like in the previous step.

For Shopify Lite users we are just going to use the Settings > Checkout > additional scripts. Paste the GTM script here. Remember to remove the comment lines, so that the code will start and end with script tags.

Check that Google Tag Manager is working & install Google Analytics

Go ahead and install Google Analytics via GTM. Just add the tag and trigger it for all pages. Click Submit. (The firs tag on the pic below)

Copy and paste the dataLayer script from this post into your checkout settings additional scripts

Copy the script below and put it BEFORE the GTM script on checkout page settings additional scripts.

Add a tag in GTM and trigger it for checkouts page.

Create a new Google Analytics tag and choose transaction as track type. Make it fire at checkouts page (=pageview). You can use Page URL and contains “/checkouts”.

That’s it. Test it!

Submit addons. Test the installation with Google Tag Assistant and/or make a purchase.

{% if first_time_accessed %}
<script>                               
window.dataLayer = window.dataLayer || [];                                            
var shipping_price = '{{shipping_price | money_without_currency }}';
shipping_price  = shipping_price.replace(",", ".");
var total_price = '{{total_price | money_without_currency }}';
total_price  = total_price.replace(",", ".");
var tax_price = '{{tax_price | money_without_currency }}';
tax_price  = tax_price.replace(",", ".");
window.dataLayer.push({
'transactionTotal': total_price,
'transactionShipping': shipping_price,
'transactionTax': tax_price,
'transactionId': "{{order.name}}",
'transactionProducts': [
{% for line_item in line_items %}
{
'sku': '{{ line_item.sku }}',
'name' : '{{ line_item.title }}',
'price': {{ line_item.line_price | divided_by: 100}},
'quantity':{{ line_item.quantity }}
},
{% endfor %}
]
});
</script> 
{% endif %}

Some thoughts

Shopify’s logic for currency and price formats is interesting. For some reason, my prices come with comma, not dot, so I have to get rid of the comma in order to follow the Google Analytics syntax. Also, check in which format you provide the prices, meaning are your prices 12.00, or 12.34? In the example above, Shopify will give you the prices in format 1200, therefore we need to divide it to fit Google Analytics specification. You could have a different kind of loop for collecting the line items in Shopify and format the price, but in my case, the shop did not have any cents, so it was pointless to do this. Google Analytics can handle the 12 as 12.00.

Useful links for Google Tag Manager and Shopify

Shopify additional scripts: https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status#add-additional-scripts (Yes, it says also tracking scripts in here. You can have JavaScript here. Just remember to have <script> tags, otherwise the code will be between <div> tags and won’t work.)

Shopify’s Cheat Sheet: https://www.shopify.com/partners/shopify-cheat-sheet (check the money formats)

Let me know, how it went 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *