dataLayer configuration: Shopify

How to create and populate a dataLayer on your Shopify site

When implementing the Lexer Tag on your Shopify store, we recommend first configuring your dataLayer to ensure consistent and clean data capture.

This article will guide you in building and populating the dataLayer in line with Google's Enhanced Ecommerce guidelines. Google's docs are available here.

While this guide is specific to Shopify, the methodology can be applied to any eCommerce store.

For an understanding of what the Lexer Tag can track, see our overview article here.

What are we trying to do?

Ultimately we want to gain an understanding of our customers' browsing behaviors. Information like the product categories a person views or which products they added or removed from the cart is all valuable.

Using Shopify's Liquid syntax and Google's Enhanced eCommerce guidelines, we'll create a series of standardized JavaScript dataLayer objects that our tag can read and capture using Google Tag Manager.

Google Tag Manager Setup

Your first step on this journey, after creating your Google Tag Manager (GTM) account, is to implement GTM on your Shopify store. To implement GTM, you will need to copy and paste your GTM code snippets into your Shopify store template.

1. Set Up Google Tag Manager, here are Google's official docs for set up & installation
2. You can access your code snippets in Admin > Install Google Tag Manager
3. Copy the first code snippet from GTM into the highest possible place in the tag of your theme.liquid code
4. Copy the second code snippet from GTM into the just underneath the first in your theme.liquid code

dataLayer Setup

Now that GTM is installed in your Shopify site, we can start designing and populating our dataLayers. Keep in mind, we are mostly concerned with collecting product level information, such as the name of a product, the category of a product, and the names of products added or removed from your store's cart.

NB: Your setup of Shopify may differ from ours, so we have made every effort to keep our language generic.

In the following sections, we'll be taking you through how to leverage Shopify's robust Liquid syntax to dynamically populate the dataLayer. The liquid cheat sheet can be used for more information on Liquid page variables in Shopify. The Liquid syntax needed to complete your dataLayer set up can be found below.

To create a dataLayer, you will need to have Admin access to Shopify. We will be editing the underlying code of your store. To access your code, navigate to Online Store > Themes > Actions > Edit Code.

Here you will be editing what we refer to as liquid templates. Below is a table of the four key templates and the data we will hope to collect from each.

Liquid is really powerful, but not all data points will use the same liquid format. See some common gotchas below.

Category Data

To capture category data on your site, you will need to prepare the dataLayer in your collection-template.liquid code template. This step must be followed on all pages that are pushing data to the dataLayer.

Copy and paste the following code snippet into the top of your collection-template.liquid code:

Within collection-template.liquid category names are called page_title. We can use this to push the name of a category being viewed to the dataLayer.

The following code snippet should be used in collection-template.liquid, below the dataLayer preparation snippet.

dataLayer.push({
 'event': 'categoryView',
 'ecommerce':{
   'detail': {
      'product' : {
         'category' : '{{ page_title | join: ',' }}',
       }
    }
  }
});

Events are used to help define when the tag fires. The categories viewed tag would only fire where there is a categoryView event.

Product Data

On the product page, we would like to populate the dataLayer with both product and category information. We would also like to populate the dataLayer with product information when a user adds something to their cart. This can be done in product-template.liquid.

Copy and paste the following code snippet into the top of your product-template.liquid code:

Within liquid, the name of products are called product_titles. Juxtaposed to category pages, the liquid variable for category names in a product page is product.collections.

The following code snippet should be used in product-template.liquid, below the dataLayer preparation.

dataLayer​.​push​({
  'event' : 'productView',
  ​'ecommerce'​:​ ​{​
    ​'impressions'​: {
      'products': {
        'name'​:​ '{{ product.title }}',​
        'category'​:​ '{{ product.collections | join: ', ' }}',​
      }
    }
  }
});

Adding a Product to the Cart

To push product and category data to the dataLayer when a product is added to cart, we must locate the code that is used to add a product to cart. This could be a < button > or < a > HTML tag.

To locate the code, use your browser's developer inspect tools or search the product-template.liquid code for words such as “add” or “submit”.

Once located, we put the dataLayer push event in an onclick handler within the HTML tag responsible for the add to cart button push. Copy the following code into the HTML tag managing adding a product to cart before the tag close:

onclick="dataLayer.push({
  'event': 'addToCart', 
  'ecommerce': {
    'add': {
      'product' : {
        'name': '{{ product.title }}',
        'category' : '{{ product.collections | join: ','}}',
}}}});"

Cart Data

On the cart page cart.liquid, we want to populate the dataLayer with an event to show a customer has reached the cart and we want to capture the name of any products that are removed from the cart. We don't need to recapture the cart's contents, as we should have a complete view of this with our previously created addToCart event.

Within the dataLayer preparation, we can create a cartView event. Paste the following code snippet into the top of cart.liquid to prepare the dataLayer and push a cartView event to the dataLayer:

The liquid variable for product names in the cart page is item.product.title. To push product data to the dataLayer when a product is removed from cart, we must locate the code that is used to remove a product from the cart.

Similarly to add to cart, this may be a < button > or < a > tag but not always. To locate the code, use your browser's developer inspect tools or search the cart.liquid code for words such as “remove”.

Once located, we put the dataLayer push event in an onclick handler inside the HTML tag handling the remove from cart action. Copy the following snippet into the Shopify code responsible for handling the removal of a product from the cart. This code should be placed inside the tag before the tag close:

onclick="dataLayer.push({
  'event':'removeFromCart',
  'ecommerce': {
    'remove': {
      'product' : {
        'name': '{{ item.product.title }}'
}}}});"

For example, the above code would be placed where the “X” is marked below.

 {{ 'cart.general.remove' | t }} 

Capturing a Customer’s Email Address

One of the key pieces of information to push to the dataLayer is the email address of customers as they convert on your website. Because customers must use their email address to checkout from the store, we can push email data to the dataLayer from here.

To do this, you'll need to navigate to Shopify Settings > Checkout and scroll down the page to Additional Scripts.

Copy the following code into the Additional Scripts input field:

NB: As this is a new page, you will also need to copy and paste both GTM code snippets from the GTM Setup section into this dialog box. They can be pasted directly after the code snippet above.

If you wanted to make a customer's email address available sooner in their conversion journey, the above mapping of email : {{ customer.email}} can be included within any of the earlier provided snippets.

For example, here is our earlier snippet used on the category page with the addition of the customer's email value, if it's available.

dataLayer.push({
 'event': 'categoryView',
 'ecommerce':{
   'detail': {
      'product' : {
         'category' : '{{ page_title | join: ',' }}',
       }
    }
  }
  'email': '{{ customer.email }}'
});