Connect Shopify with Google Tag Manager

Lesson Resources

 

The Code using is list in my blog post:

How to Connect Shopify with Google Tag Manager

 

Today We will connect the Shopify with our Google Tag Manager.

In the last video, I am letting you write down you google tag manager container id. I hope you already do that.

In our case, our google manager container id is:

Now there are two steps to follow now:

  1. Replace your container id in the sample code below
  2. Put the sample code in your Shopify template

Now I will show you exactly how to do that.

The script we are using is:

<script>
//=======================================================
//
// More Awesome scripts and tricks about shopify on www.connectdots.co
//=======================================================

// IMPORTANT: Change this value to whatever the ID of your
// GTM container is.
const GTM_CONTAINER_ID = ‘GTM-MFNSHGD’;

//=======================================================
// Only customise the below if you know what you’re doing
//=======================================================

// Initialise data layer object

var dataLayer = [{
page: {
type: ‘{{ template }}’,
currency:'{{shop.currency}}’,
title: ‘{{ page_title }}’
},
}];

{% if template contains ‘product’ %}
//=======================================================
// Product pages
//=======================================================
dataLayer[0].page.breadcrumb = ‘{{ collection.title }}’;
dataLayer[0].ecommerce = {
‘detail’: {
‘actionField’: {‘list’:'{{collection.title}}’},
‘products’: [{
‘name’: ‘{{ product.title }}’,
‘id’: ‘{{ product.id }}’,
‘price’: ({{ product.price }} / 100).toString(),
‘brand’: ‘{{ product.vendor }}’,
‘category’: ‘{{ product.type }}’
}]
}
};

{% endif %}

//=======================================================
// GTM container tag
//=======================================================
<!– Google Tag Manager –>
(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_CONTAINER_ID);
<!– End Google Tag Manager –>
</script>

 

Now, You will replace the container id in the constant, and then copy the whole script.

Next, As we are explaining before, Shopify is also the website have the template, if you put the code at the template, it will automatically populate across all pages.

Now, go to your theme.liquid file, and put the whole code in the <head> section, before the </header>

After that, save the file, and Now it’s all set.

Now we will debug to see if we have done everything correctly.

Let’s go to the Google tag manager, and open the preview & debug mode. and then refresh your shopify store.

You should be able to see a small window popup at the bottom of the page if you do see that. You have done everything correctly.

We are ready for the next step.