Knowledge |

Shopify: Enhance your Google Analytics & Install Google Tag Manager

Out of the box Shopify provides a good implementation of Google Analytics including Enhanced Ecommerce. Our solution builds upon that implementation to provide you with additional data analysis capabilities. We also deploy Google Tag Manager with a rich data layer for your other marketing channels. Best of all, the installation is straightforward and you can get going in no time.

In the spirit of Open Source, this solution is available on the MIT license and full source code is available on our GitHub repository: https://github.com/3whitehats/shopify-gtm-ga/. If you’re feeling adventurous then please do modify the code to suit your unique requirements, we’ve set some sensible defaults but it may be that your requirements differ slightly. (And if you do modify the code, we’d love to hear from you!).

How does it work?

We extend the existing Shopify integration with Google Analytics, this allows their native integration to be maintained and allows you to keep the checkout funnel tracking (something that is otherwise limited to Shopify Plus subscribers).

A script is added to your theme files and included within the <head> of every page of your website, this script extracts important data insights from Shopify core objects and makes this data available within a variable.

From there this data is then used on every pageview of the website, sent to Google Analytics and made available within Google Tag Manager to share data with your other marketing channels.

What is enabled after setup?

Once configured you’ll have some additional data insights available within Google Analytics and data exposed to Google Tag Manager for your other marketing channels.

This will allow you to run reports and build audiences based on this data, for example:

    • If users land on a product page that is out of stock, does that impact conversion rates?
    • If a user lands on a page with multiple variants (such as shoe size or colour) and some of those variants are out of stock – does conversion rate reduce?
    • Add customers with the tag “VIP” to an audience for remarketing in Google Ads.
    • What are the most popular page types?
    • What product types are viewed most frequently across the website?
    • Add customers that have viewed a product with the tag “Best Seller” to an audience for remarketing in Google Ads.
    • etc

None of the above is easily accessible with Shopify’s default integration – it’s seamless with this solution and made accessible through custom dimensions.

Google Analytics

Our solution enables 20 custom dimensions, 2 Content Groupings and provides the User-ID values needed if you wish to enable User-ID features in Google Analytics. Below we break down what these values are, and what they do.

Content Groupings

Page Type

A content group for the page type, enabling grouping of pageview hits by the page type.

Collection Group The collection group currently being viewed, either a collection page or when viewing a user is viewing a product from a collection, the associated collection.

Custom Dimensions

IDNameScopeUse
1User IDSessionIf a user is logged in, their corresponding Shopify User-ID.
2Customer Lifetime ValueUserIf a user is logged in, their lifetime order value.
3Customer Total OrdersUserThe total number of orders a customer has created
4Customer TagsUserAny tags you’ve defined for the current user. For example “VIP” or “Wholesale” – this is great for audience building. (This is a comma separated list)
5Page Type/TemplateHitThe current page template a hit was triggered on, really helpful when analysing your page template performance.
6Cart TotalHitThe total value of a users cart when this hit was made.
7Cart Product CountHitThe number of products in a users cart when this hit was made.
8Collection NameHitThe collection a user is viewing and/or the collection a product is in. (Only available for products when the collection is within the page URI).
9Collection Product CountHitThe number of products available within the page when a user is viewing a collection.
10Product NameHitThe product name currently being viewed by the user.
11Product SKUHitIf defined, the Product SKU currently being viewed by the user.
12Product TypeHitThe product type defined within the Shopify CMS for this product view.
13Product BrandHitThe product brand defined within the Shopify CMS for this product view.
14Product PriceHitThe price of the product at the time of this product view.
15Product in Stock?HitBoolean, true/false – was the product in stock when it was viewed?
16Product Stock QtyHitThe quantity available for a product when it was viewed.
17Product TagsHitThe tags defined for this product within the Shopify CMS. (Comma separated list)
18Product has no variants?HitTrue if the product doesn’t have any variants, false otherwise.
19Number of VariantsHitHow many variants does this product have?
20Number of Variants in StockHitHow many variants were in stock when this product view occurred?

 

Installation

Requirements

Before we get started on the installation you’ll first need:

 

Install and configure our code on your website

We’ll start with the deployment of the code on Shopify, this process is reasonably straightforward and the changes simple, but if you’re not comfortable with any of the setting/theme changes below I’d suggest liaising with your development team so you don’t break anything (or step on any toes!).

Note: If you have a process for deploying theme changes then this should be followed to ensure you don’t have any conflicts.

First, install the liquid snippet that powers the solution.

1. Navigate to your theme code in Shopify (Online Store > Themes > Current Theme > Actions > Edit code):

2. On the left hand side, scroll down to “Snippets” and hit “Add a new snippet”:

3. Give your snippet a sensible name (ours is called 3wh-gtm)

4. Copy the code from our Github repository from the 3wh-gtm.min.liquid file and paste it into the new file, you should end up with something that looks like this:

5. At the bottom of this file, there is a snippet of code that looks like the below. Replace the code GTM-XXXXXX with your Google Tag Manager Container ID.

6. Hit Save.

7. On the left hand side again, navigate to your theme.liquid file:

8. At the top of this file, immediately following the <head> add an include for your new snippet (note, this should match the name of your snippet from the previous steps):

 {% include ‘3wh-gtm’ %}

For example:

9. Finally, hit Save on this file as well.

Note: This does not install the non-JS snippet for Google Tag Manager, if you would like to add this it will need to be added to the <body> of the page separately.

Next, Configure the Google Analytics scripts.

1. Navigate to your Online Store Preferences (Online Store > Preferences)

2. Scroll down to the Google Analytics section, and you should see a box labelled Additional Google Analytics JavaScript.

3. Copy and paste the file in our Github called additional-google-analytics-settings.js into this text field.

4. Make sure the “Use Enhanced Ecommerce” checkbox is ticked.

5. Save your changes.

Next, configure your checkout success page.

Shopify’s checkout success page is completely separate to the rest of your theme files and we need to track things separately there.

1. Navigate to the Checkout Settings page (Bottom right Settings > Checkout).

2. Scroll down to Order processing and find the input box Additional scripts.

3. Take the code from our file named additional-scripts.min.liquid and paste this into the input box.

4. Modify the Google Tag Manager code at the bottom of this file, again updating the ID GTM-XXXXXX with your respective Container ID (as you did during the theme snippet file addition).

5. Hit save.

Configure Google Analytics to use your new data

At this point in the process your data is already flowing to Google Analytics (and Google Tag Manager), however the platform needs to be configured in order to make use of this data and enable your data insights.

Note: This guide does not cover the configuration of User-ID features, if you would like to enable User-ID features follow Google’s guide (we’ve covered the installation within the tracking code, but you will need to complete the rest of the setup).

Install Custom Dimensions

Custom Dimensions are what will be used to store all of the additional Customer, Product and Website properties we’re sending to Google Analytics.

1. Navigate to Admin and under your Shopify analytics property, select Custom Definitions > Custom Dimensions

2. Hit Add Custom Dimension and add the following Custom Dimensions in the order below. It is important these are added in order and make sure you choose the Scope that matches the below:

Setup Content Groupings

1. Navigate to Content Grouping within your Analytics View of choice:

2. Click + New Content Grouping

3. Configure two new Content Groupings that match the setup shown in the screenshots below:

Page Type

Collection Group

Import our Google Tag Manager container for your other marketing tags

This extension fully populates the Google Tag Manager data layer with comprehensive information about the (when relevant):

  • Page
  • Customer
  • Cart
  • Transaction
  • Collection
  • Product

To help, we’ve built a container export that contains all of the data exposed to Google Tag Manager as variables (46 in total) to help speed up your deployment. Use Google’s guide if you’re not aware of the process used for importing a container.

The container export can be found within our GitHub repository: https://github.com/3whitehats/shopify-gtm-ga/blob/master/gtm-import.json

Start using your new data!

That’s it, you’re all setup, if all is well you should start to see your enhanced data begin to populate within Google Analytics and be able to go about your data interrogation.

We’ve shared a couple basic example usages below, but it really is now up to you – what do you need to know to improve your website experience?

Need help?

Get in touch and lets chat about how we can help you get the most from your Shopify store and gain insights from your data.