Data layer is one of the most important aspects of data tracking & analytics. To help you make the most of your tracking experience, we have created a custom code block that will allow your Google Tag Manager to read & process your purchase and product page data on your Shopify store.

Shopify doesn’t have data layers by default. That’s why we have created open-source Shopify data layers for all Shopify merchants to use at no cost!

You can find two different data layers (purchase + product) for your Shopify store in this page. You will get the code blocks and also our support with Google Tag Manager, in addition to the GTM variable names and a guide on how to use these data layers.

Here’s an important point for you before we get down to business: Although dataLayer won’t perform anything magical by itself, you can follow along with our Free Shopify GTM Course on Youtube to discover more about how to utilize it in the best way possible.

Let’s have a sneak peek before you see how the two major data layer code blocks work for you:

Purchase data layer: You can use the purchase data layer for your Google Analytics 4 e-commerce tracking, Google Ads & Facebook pixel conversion tracking wherever you see it. The purchase data layer includes all the order data & purchased product details. ⬇️

Product View data layer: You should use this data layer on product pages as it includes all product-level data. You can trigger Google Analytics 4 product view e-commerce events and any product view-related tag you wish by using it. You are going to find out more, below. ⬇️

Complete GA4 Setup Tutorial:  Follow our in-depth, step-by-step tutorial and set up data layers, Google Tag Manager, and Google Analytics 4 including e-commerce events on your Shopify store. View on Youtube.


Here’s another important suggestion for you: You should consider using Analyzify or another Shopify GTM app for the other data layer events such as add to cart, remove from cart, product impression, and product click to have a deeper understanding of your data.

Update on February 2022: We have updated the purchase data layer that we initially prepared for our ‘GTM course 2021’. We have added new variables and details.

Effortlessly integrate Shopify & GTM, including advanced data layers.
Chapter 1

Purchase Datalayer

 

The following dataLayer code block will get the essential data from your “order completed” page and make it available for the GTM to read and process. The code block includes the following variables: purchased products, page type, currency, shipping price, total price, tax price, payment type, and transaction ID. By following our course, you will be able to pass all this data to Google Ads, Facebook Pixel, Google Analytics 4, and other parties you want to share with.

1- Copy the Shopify dataLayer (Checkout – Purchase)

We have made a code update here and added product details in the purchase data layer. Make sure to visit step 4 and add related dynamic data layer variables into your GTM. Go ahead and copy the code from the following paragraph:

    
     {% comment %} Purchase data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.com/shopify-google-analytics/ga4 for complete tutorial
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

window.appStart = function(){
  window.allPageHandle = function(){
    window.dataLayer.push({
      event: "ga4kit_info",
      contentGroup: "{{ template_name }}",
      {% if customer %}
      userType: "member",
      customer: {
        id: "{{- checkout.customer.id | json -}}",
        lastOrder: "{{- customer.last_order.created_at | date: '%B %d, %Y %I:%M%p' -}}",
        orderCount: "{{- checkout.customer.orders_count | json -}}",
        totalSpent: "{{- checkout.customer.total_spent | times: 0.01 | json -}}",
        tags: {{- checkout.customer.tags | json -}}
      }
      {% else %}
        userType: "visitor",
      {% endif %}
    });
  };
  allPageHandle();

{% if first_time_accessed and post_purchase_page_accessed != true %}

  var shippingPrice = "{{shipping_price | money_without_currency }}".replace(",", ".");
  var totalPrice = "{{checkout.total_price | money_without_currency }}".replace(",", ".");
  var taxPrice = "{{tax_price | money_without_currency }}".replace(",", ".");
  var orderItemsName = [];
  var orderItemsId = [];
  var orderItemsCategory = [];
  var orderItemsBrand = [];
  var orderItemsType = [];
  var orderItemsPrice = [];
  var orderItemsSku = [];
  var orderItemsvariantId = [];
  var orderItemsQuantity = [];
  var orderItemsvariantTitle = [];
  var totalQuantity = 0;

  {% for line_item in checkout.line_items %}
      orderItemsName.push("{{ line_item.product.title | remove: "'" | remove: '"'}}");
      orderItemsId.push("{{ line_item.product_id }}");
      orderItemsPrice.push("{{ line_item.price | times: 0.01 }}");
      orderItemsSku.push("{{ line_item.sku | remove: "'" | remove: '"' }}");
      orderItemsQuantity.push("{{ line_item.quantity }}");
      orderItemsvariantId.push("{{ line_item.variant_id }}");
      orderItemsvariantTitle.push("{{ line_item.variant.title }}");
      orderItemsCategory.push("{{ line_item.product.collections.last.title | remove: "'" | remove: '"' }}");
      orderItemsBrand.push("{{ line_item.vendor | remove: "'" | remove: '"' }}");
      orderItemsType.push("{{ line_item.product.type | remove: "'" | remove: '"' }}");
      totalQuantity += {{ line_item.quantity }};
  {% endfor %}

  window.dataLayer.push({
      page_type: "purchase",
      event: "analyzify_purchase",
      currency: "{{ shop.currency }}",
      totalValue: totalPrice,
      totalValueStatic: totalPrice,
      currencyRate: window.Shopify.currency.rate,
      shipping: shippingPrice,
      tax: taxPrice,
      payment_type: "{{order.transactions[0].gateway}}",
      {% if order.name %}
      transaction_id: "{{order.name | remove: "'" | remove: '"'}}",
      {% else %}
      transaction_id: "{{checkout.id | remove: "'" | remove: '"'}}",
      {% endif %}
      productName: orderItemsName,
      productId: orderItemsId,
      productBrand: orderItemsBrand,
      productCategory: orderItemsCategory,
      productVariantId: orderItemsvariantId,
      productVariantTitle: orderItemsvariantTitle,
      productSku: orderItemsSku,
      productType: orderItemsSku,
      productPrice: orderItemsPrice,
      productQuantity: orderItemsQuantity,
  });

{% endif %}

}
appStart();
</script>


    
   

Make sure that you have copied it correctly.

2- Paste the code into Shopify Checkout

 

Go to your Shopify Admin > Settings (Left bottom) > Checkout and then Navigate to Order Processing > Additional Scripts.

You should paste the code right below your GTM container code. If you don’t have a GTM container here yet, check out our free Shopify - GTM video course.

3- Create Custom Variables in GTM

You need to create custom variables and custom events on Google Tag Manager to be able to use the values in dataLayer. You can watch the related video of our course if you need some support here. These are the steps that you need to take on Google Tag Manager:

 

Go to your Google Tag Manager account. Click Variables from the left menu. Scroll down and find “User-Defined Variables” and then click the “Add New” button on the right top corner of that section.

Click the middle of the screen: “Choose a variable type to begin setup…” and then choose Data Layer Variable from the list.

It is very important to name them properly. You should name the first one as: dlv- transaction-id – Add this to the name field.

Then you need to write the field name that comes from your dataLayer. This should 100% match with your Shopify dataLayer, otherwise, it won’t work. Data Layer Variable Name should be "transaction_id"

Save the first one when you are done.

You have created one of the variables in step 3. Now you will need to create all the rest.
Make sure to write the correct names to the correct places

- dlv-shipping / shipping
- dlv-tax / tax
- dlv-totalValue / totalValue
- dlv-payment_type / payment_type
- dlv-currency / currency

At the end of this step, your GTM variable settings should look like in the screenshot.


Step 5: Product Data in data layers

It is more complex and technical to add the product level data as GTM variables as there can be multiple products in an order.
Follow our detailed, step-by-step tutorial and validation guide.

If you are seeking more technical information on this topic, feel free to visit Google’s official data layer documentation. 

Chapter 2

Shopify Product View Datalayer


This will send your product-level information to the data layer. All you need to do is just copy the code and paste it into your theme.liquid file and follow the steps below carefully.

If you are familiar with Google Tag Manager or our course, you should be able to use this with ease.

We need to edit your theme files. You can copy your existing theme and work on a duplicated theme if you like to. Technically there is no reason for this as Shopify already saves the change history – so all the changes are actually risk-free.

Code block:

    
     {% comment %} Product view data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.com/shopify-google-analytics/ga4 for complete tutorial 
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

window.appStart = function(){
  window.productPageHandle = function(){

    var productName = "{{ product.title | remove: "'" | remove: '"' }}";
    var productId = "{{ product.id }}";
    var productPrice = "{{ product.price | money_without_currency }}";
    var productBrand = "{{ product.vendor | remove: "'" | remove: '"' }}";
    var productCollection = "{{ product.collections.first.title | remove: "'" | remove: '"' }}";
    var productType = "{{ product.type | remove: "'" | remove: '"' }}";
    var productSku = "{{ product.selected_or_first_available_variant.sku | remove: "'" | remove: '"' }}";
    var productVariantId = "{{ product.selected_variant.id | default: product.variants[0].id }}";
    var productVariantTitle = "{{ product.selected_variant.title | default: product.variants[0].title }}";

    window.dataLayer.push({
      event: "analyzify_productDetail",
      productId: productId,
      productName: productName,
      productPrice: productPrice,
      productBrand: productBrand,
      productCategory: productCollection,
      productType: productType,
      productSku: productSku,
      productVariantId: productVariantId,
      productVariantTitle: productVariantTitle,
      currency: "{{ shop.currency }}",
    });
  };

  window.allPageHandle = function(){
    window.dataLayer.push({
      event: "ga4kit_info",
      contentGroup: "{{ template_name }}",
      {% if customer %}
      userType: "member",
      customer: {
        id: "{{- checkout.customer.id | json -}}",
        lastOrder: "{{- customer.last_order.created_at | date: '%B %d, %Y %I:%M%p' -}}",
        orderCount: "{{- checkout.customer.orders_count | json -}}",
        totalSpent: "{{- checkout.customer.total_spent | times: 0.01 | json -}}",
        tags: {{- checkout.customer.tags | json -}}
      }
      {% else %}
        userType: "visitor",
      {% endif %}
    });
  };
  allPageHandle();
      
  {% case template_name %}
  {% when "product" %}
    productPageHandle();
  {% endcase %}

}
appStart();
</script>
    
   

We will add a new snippet into your theme to make it easier to manager.
Go to Shopify Admin > Online Store > Themes > Choose Live Theme > Actions > Edit Code.

Scroll down to the “Snippets” section and click “Add new snippet” and name it “analyzify-product-datalayer” and CREATE.

Paste the code you copied above into this newly created snippet file and SAVE.

Find theme.liquid file under the “Layout” section on the left bar. Open the theme.liquid file and search "/head" in the file. Paste the following code just above it:

{% render 'analyzify-product-datalayer.liquid' %}

At final, it should look like in the screenshot.

Your Shopify product view data layer is ready to be processed. You can now go to Google Tag Manager and create the trigger for “analyzify_productDetail” event and create data layer variables for “name, id, price, currency, sku, category, variant_id” - just like we did in the above section for the purchase data layer. Alternatively, you can follow our detailed GTM Tutorial on the product data layer and learn how it is used in-depth.

Chapter 3

Analyzify's Datalayer


Analyzify offers you an advanced data layer that includes 35+ variables (data points such as product ID, name, brand, category, etc) and 8 different event sets that cover all standard e-commerce tracking and further.

We also do offer a comprehensive GTM container tailored for your store so that you don’t need to deal with tags, triggers, variables.

Fully customizable data layers & GTM. No secrets, no behind-the-door actions. We inject the data layers into your theme/store openly. We don’t use any external files or scripts.

Chapter 4

FAQ on GTM - Shopify Integration

Shopify Conversion Tracking Chapter FAQ

Definitely yes. You can always use the variables and triggers in Analyzify’s GTM container to make new tags according to your needs.

A data layer is a JavaScript object that collects data on your website in a standardized way. You can learn more about data layers and their use for Shopify merchants in this video.

Technically no, but practically, yes. You can use GTM without using data layers, but if you do that, you won’t be able to pass specific data (e.g. product ID, name, order total revenue, etc.).

You can only use the general tags like Google Analytics 4 – which works on all pages. However, you can’t use Google Ads Conversion Tracking properly, because you again need some information like the order ID, revenue, currency, and a few others.

Analyzify provides open-source data layers for Shopify merchants.

The “Purchase” data layer is made to allow you to track purchases and set up conversion tracking properly.

Analyzify’s “Shopify purchase” data layer can be used in the following tags / conditions:

  • E-commerce tracking in Google Analytics 4,
  • Enhanced e-commerce funnels & goals in Universal Analytics,
  • Conversion tracking in Google Ads,
  • Purchase event tracking in Facebook Pixel,
  • Purchase conversion tracking in Bing / Snapchat / Tiktok.

The “Product View” data layer is created to be triggered on Shopify’s single product pages and send the product-relevant data to GTM. This will allow you to have proper “Products” reports on Google Analytics 4, in addition to many other benefits.

Analyzify’s open-source “Shopify Product View” data layer can also be used in the following tags / conditions:

  • “Product view” in Google Analytics 4,
  • “Viewed product” and dynamic remarketing in Google Ads,
  • “View content” in Facebook Pixel, and many others…