How to implement Google Tag Manager for Shopify

Another great thing about Shopify is that it has its own App Store for almost any feature that you would need for your website. The not so great thing about Shopify is that it lacks customization options in comparison to other similar services and most useful apps will increase your monthly budget by a bit, but most of its downfalls can be countered by a good and reliable Liquid developer.

Now let’s dig into our topic of interest: Data collection.

There are two main ways to send data from Shopify websites to Google Analytics:

• The easy way
• Our way

Let’s dig a little deeper into each solution.

The easy way

Being that Shopify is such a great platform, it allows you to just paste your Google Analytics tracking code into the admin settings, by navigating to Online Store > Preferences > Google Analytics section. After saving this change, an additional option appears right under the Google Analytics tracking code, which allows you to easily implement Enhanced Ecommerce with a literal push of a button (don’t forget to save your changes – so two buttons actually).

The caveat is that you will be limited to basic data collection, without having the option to add additional custom dimensions or custom metrics to your implementation. If you need more information about dimensions and metrics, feel free to browse through another cool article that we wrote for you.

Also, you won’t be able to send custom events or user data to Google Analytics, which will limit your insights considerably.

Our way

If you had the opportunity to work with us, you would know that we don’t like to keep things simple, although we love to show off data in a seamless manner.

Let’s check out our way of collecting data from Shopify websites.

First of all, make sure that you have admin privileges in Shopify. You can access the admin section by simply adding “/admin” after your website’s homepage URL, for example “https://datarevolt.agency/admin”. Also, you will need to create a Google Tag Manager account if you don’t already have one by following Google’s instructions.

Next, you’ll need to edit the code of your currently published theme, by following the three steps shown below:

Then, you will be presented with all Liquid files of your website’s theme, but we’ll focus on theme.liquid, which contains the underlying code of almost all of your website’s pages. This means that any code present in the theme.liquid file will run sitewide. At least that’s what we expected at first, but we soon discovered that Shopify has some security features in place for the checkout and purchase pages, which means that the checkout.liquid file is unavailable for clients using the standard Shopify plan, which most small businesses would use. But we’ll get back to that in a second.

Once you’ve identified the theme.liquid file in the Layout section of the code editor, you can follow Google’s tutorial on how to install Google Tag Manager on your website, but we’ll make it easier for you:

1. After you’ve set up Google Tag Manager, click on the Google Tag Manager ID;
2. Copy the script section as high as possible in the section of your theme.liquid file in Shopify;
3. Copy the noscript section as high as possible in the section of your theme.liquid file in Shopify and save your changes.

Now it’s time to bypass Shopify’s restrictions and install Google Tag Manager on the thank-you page, also called the purchase page. The main reason behind this is to track the most important event from any Enhanced Ecommerce implementation, which is the transaction event.

In order to do this, you’ll need to navigate to Shopify admin Settings > Checkout > Scroll down to Additional scripts and paste both the Google Tag Manager script and noscript sections, in that order.

The only caveat is that you will not have Google Tag Manager installed on the checkout pages, which implies that the Google Analytics Checkout funnel report will be missing some steps, but we recommend that you set the cart page as the first and only checkout step in your Enhanced Ecommerce implementation.

In order to make this implementation useful, let’s start with adding a pageview event into Google Tag Manager that triggers on all pages. By doing this, we’ll be able to collect pageviews, sessions and user data.

If you need help with implementing Enhanced Ecommerce and the Google documentation is not enough, feel free to contact us.

Also, you can find more information about the advantages of Enhanced Ecommerce in this article.

If you feel comfortable with your coding skills, you can access the entire list of Shopify Liquid variables here, which allows you to build your Enhanced Ecommerce objects by following the requirements from the Enhanced Ecommerce (UA) Developer Guide. Well done! You have successfully installed Google Tag Manager for your Shopify store!

Good luck & happy coding!Sources & useful information:

• Enhanced Ecommerce (UA) Developer Guide
• Google Tag Manager
• Google Analytics
• dataLayer
• Shopify
• Priceless insights from our beloved Data Revolt Agency team