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.

1282
  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.

Value Liquid Template Name Liquid Variable
Categories collection-template.liquid page_title
  product-template.liquid product.collections
Products product-template.liquid product_titles
  cart.liquid item.product.title

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.

Data captured Liquid Template Name
Category Data collection-template.liquid (Snippet)
Product Data product-template.liquid (Section)
Cart Data cart.liquid (Template)
Email Data Checkout (Settings)

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.

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 }}'
});
Updated:
September 19, 2022
Did this page help you?
Thank you! Your feedback has been received!
Oops! Something went wrong while submitting the form, for assistance please contact support@lexer.io
Welcome to Lexer!
Fundamentals
Getting started
Our glossary
Fundamentals
Getting started
Integrations
Fundamentals
Setup
My account
Fundamentals
Setup
Manage team
Fundamentals
Setup
Group permissions
Fundamentals
Setup
Classifications
Fundamentals
Setup
Out of the box segments
Fundamentals
Setup
Browser guide
Fundamentals
Security
Corporate networks
Fundamentals
Security
Emergency contact
Fundamentals
Security
Multi-factor authentication
Fundamentals
Security
Single sign-on
Fundamentals
Security
Trust and compliance
Fundamentals
Security
Lexer's Identity Resolution
Fundamentals
Identity Resolution
Troubleshooting tech issues
Fundamentals
Troubleshooting
Error code: 503 Service Unavailable
Fundamentals
Troubleshooting
Error code: 401 Unauthorized
Fundamentals
Troubleshooting
Error code: 403 Forbidden
Fundamentals
Troubleshooting
Troubleshooting Activate
Fundamentals
Troubleshooting
Troubleshooting Respond
Fundamentals
Troubleshooting
Help! My data is missing from the Hub
Fundamentals
Troubleshooting
Understanding APIs at Lexer
Data
Data Onboarding
Providing JSON data to Lexer
Data
Data Onboarding
Providing CSV data to Lexer
Data
Data Onboarding
Upload using SFTP
Data
Data Onboarding
Upload using S3
Data
Data Onboarding
Lexer data specification
Data
Lexer Data Specification
Customer data specification
Data
Lexer Data Specification
Commerce data specification
Data
Lexer Data Specification
Marketing data specification
Data
Lexer Data Specification
Compliance data specification
Data
Lexer Data Specification
Data Formatting and Validation
Data
Getting Started with APIs
Authentication and API token creation
Data
Getting Started with APIs
Rate Limits
Data
Getting Started with APIs
Response codes and common errors
Data
Getting Started with APIs
Product imagery
Data
Getting Started with APIs
Currency conversion
Data
Getting Started with APIs
Lexer’s APIs overview
Data
Lexer’s APIs
Dataset management in the Hub
Data
Dataset management
Chatbox user API
Data
Lexer’s APIs
Activity API
Data
Lexer’s APIs
Visualize API
Hidden from nav
Profile Read API
Data
Lexer’s APIs
Lexer Javascript Tag basics
Data
Lexer Javascript Tag
Lexer Javascript Tag technical guide
Data
Lexer Javascript Tag
Lexer Javascript Tag use cases
Data
Lexer Javascript Tag
dataLayer configuration: Shopify
Data
Lexer Javascript Tag
Customer segment CSV export
Data
Data off-boarding
Export to CSV
Data
Data off-boarding
Data in Lexer's CDXP
Understand
Customer Data
Lexer's attributes
Understand
Customer Data
Attribute value types
Understand
Customer Data
Data source - CRM
Understand
Customer Data
Data source - Transactions
Understand
Customer Data
Data source - Email
Understand
Customer Data
Partner data - Experian
Understand
Customer Data
Partner data - Mastercard
Understand
Customer Data
Partner data - Roy Morgan
Understand
Customer Data
GDPR and CCPA requests
Understand
Customer Data
Upload data files
Understand
Customer Data
File upload API
Understand
Customer Data
Data provision and schemas
Understand
Customer Data
Segment overview
Understand
Segment
Creating segments
Understand
Segment
Smart Search
Understand
Segment
Export attribute results
Understand
Segment
Contact a customer
Understand
Segment
Fixing a disabled segment
Understand
Segment
Profile tab
Understand
Segment
Compare segments
Understand
Compare
Compare attributes
Understand
Compare
Activate overview
Engage
Activate
Ongoing activations
Engage
Activate
Audience splits
Engage
Activate
A/B splits
Engage
Activate
Control group splits
Engage
Activate
Inbox filtering
Engage
Respond
Ignored Senders
Engage
Respond
Forms for service
Engage
Respond
Workflow states
Engage
Respond
Bulk changes
Engage
Respond
Scheduled replies
Engage
Respond
Message templates
Engage
Respond
Customer profiles
Engage
Respond
Grouped messages
Engage
Respond
Automation rules
Engage
Respond
Redact messages
Engage
Respond
Track overview
Measure
Track
Activity overview
Measure
Activity
Team report
Measure
Activity
Cases report
Measure
Activity
Listen overview
Measure
Listen
Searching in Listen
Measure
Listen
Tier filters
Measure
Listen
Boolean search
Measure
Listen
Saved dives
Measure
Listen
Email notifications
Measure
Listen
Twitter data
Measure
Listen
Facebook data
Measure
Listen
Instagram data
Measure
Listen
Visualize overview
Measure
Visualize
Curate feed
Measure
Visualize
Report overview
Measure
Report