Shopify Data Layer

Overview

The goal of this tutorial is to set up a Google Enhanced Ecommerce Data Layer on your Shopify site. This data layer can be used with a Tag Manager like Google Tag Manager to set up tracking and analytics for marketing platforms.
Please note, this data layer might not work 100% on all Shopify sites and should be tested on a development site before being used in production.

Deep Dive

These instructions will ask you to create a single file in the Shopify backend and place 2 copy and paste pieces of code in different locations. The outcome of these steps is a data layer that will populate product level details for listing (category & search), product, basket, and conversion pages. I will outline a high level overview of the integration steps below:

Note: This data layer will not be able to populate product level information on custom pages that have pages in the URL without additional logic added.

Create a file named google_ee_datalayer.liquid under the snippets section of your theme. This file will contain the core logic for the data layer on the storefront pages.
Add an "include" statement to your theme.liquid file to include the google_ee_datalayer.liquid file on your store.
Add copy and paste code to your additional scripts section under the settings > checkout section.

Integration Steps

Open up your Shopify store a navigate to the admin portal
Open up the core theme code editor by selecting "Online Store" in the side navigation and then "Edit Code" under the "Actions" tab.
Scroll down to the "Snippets" section and select "Add a new snippet".
When asked to name this snippet, call it google_ee_datalayer. The ".liquid" file ending will be added automatically.

Once the file is created, copy the code below into the file and hit save in the top right.

<script>
  {% assign template-type = template | split: '.' | first %}
  window.dataLayer = window.dataLayer || [];
  switch("{{ template-type }}") {
    case "index":
      // do nothing, the ee datalayer does not populate anything on the homepage
      console.log("homepage");
      break;
    case "product":
      dataLayer.push({
        'ecommerce': {
          'detail': {
            'currencyCode': '{{ shop.currency }}',
            'products': [
              {
                'name': '{{ product.title }}',
                'id': '{{ product.id }}',
                'variant_id':  '{{ product.selected_or_first_available_variant.id }}',
                'variant_sku':  '{{ product.selected_or_first_available_variant.sku }}',
                'handle': '{{ product.handle}}',
                'price': '{{ product.price | money_without_currency }}',
                'availability': '{{ product.available}}',
                'product_type': '{{ product.type }}',
                'vendor': '{{ product.vendor }}',
              }
            ]
           }
         }
      });
      break;
    case "collection":
      dataLayer.push({
        'ecommerce': {
          'currencyCode': '{{ shop.currency }}',
          'impressions': [
            {% for product in collection.products %}
              {
                'name': '{{ product.title }}',
                'id': '{{ product.id }}',
                'variant_id':  '{{ product.selected_or_first_available_variant.id }}',
                'variant_sku':  '{{ product.selected_or_first_available_variant.sku }}',
                'handle': '{{ product.handle}}',
                'price': '{{ product.price | money_without_currency }}',
                'availability': '{{ product.available}}',
                'product_type': '{{ product.type }}',
                'vendor': '{{ product.vendor }}',
              },
            {% endfor %}
          ]}
      });
      break;
    case "search":
      dataLayer.push({
        'ecommerce': {
          'currencyCode': '{{ shop.currency }}',
          'impressions': [
            {% for product in search.results %}
              {
                'name': '{{ product.title }}',
                'id': '{{ product.id }}',
                'variant_id':  '{{ product.selected_or_first_available_variant.id }}',
                'variant_sku':  '{{ product.selected_or_first_available_variant.sku }}',
                'handle': '{{ product.handle}}',
                'price': '{{ product.price | money_without_currency }}',
                'availability': '{{ product.available}}',
                'product_type': '{{ product.type }}',
                'vendor': '{{ product.vendor }}',
              },
            {% endfor %}
          ],
        'keyword': '{{search.terms}}',
      }
      });
      break;  
    case "cart":
      dataLayer.push({
        'event': 'cart',
        'ecommerce': {
          'checkout': {
            'currencyCode': '{{ shop.currency }}',
            'products': [
              {% for item in cart.items %}
                {
                  'name': '{{ item.product.title }}',
                  'id': '{{ item.product.id }}',
                  'sku': '{{ item.sku }}',
                  'variant_id':  '{{ item.product.selected_or_first_available_variant.id }}',
                  'variant_sku':  '{{ item.product.selected_or_first_available_variant.sku }}',
                  'handle': '{{ item.product.handle}}',
                  'price': '{{ item.product.price | money_without_currency }}',
                  'quantity': '{{ item.quantity }}',
                  'availability': '{{ item.product.available}}',
                  'product_type': '{{ item.product.type }}',
                  'vendor': '{{ item.product.vendor }}',
                },
              {% endfor %}
           ]
         }
       }
      });
      break;
    default:
      // do nothing since its not a page we can get info on

  }
</script>

Once the file is saved, scroll up the page to the "Layout" section and select the theme.liquid file.
At the bottom of that page, right above the closing </body> node, add the below "include" statement and hit save.
```
{% include 'google_ee_datalayer' %}
```
In the end, it should look something like this:
```
    {% include 'google_ee_datalayer' %}
    </body>
</html>
```
You will now want to navigate to the "Settings" tab in the navigation and select the "Checkout" option.

Once in the "Checkout screen, scroll down to the "Order processing" section and copy the code below into the "Additional scripts" box below any existing code and hit save.

{% if first_time_accessed %}
<script type="text/javascript">
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'ecommerce': {
      'purchase': {
        'actionField': {
          'id': '{{ order.order_number }}',
          'revenue': '{{ order.subtotal_price | money_without_currency }}',
          'tax': '{{ order.tax | money_without_currency}}',
          'shipping': '{{order.shipping_price | money_without_currency}}',
          'currency': '{{ order.currency }}'
        },
        'products': [
          {% for item in order.line_items %}
            {
              'name': '{{ item.product.title }}',
              'id': '{{ item.product.id }}',
              'sku': '{{ item.sku }}',
              'variant_id':  '{{ item.product.selected_or_first_available_variant.id }}',
              'variant_sku':  '{{ item.product.selected_or_first_available_variant.sku }}',
              'handle': '{{ item.product.handle}}',
              'price': '{{ item.product.price | money_without_currency }}',
              'quantity': '{{ item.quantity }}',
                'availability': '{{ item.product.available}}',
              'product_type': '{{ item.product.type }}',
              'vendor': '{{ item.product.vendor }}',
            }
          {% endfor %}
        ],
        'user': {
          'email': '{{ customer.email | remove: " " | strip_newlines | downcase }}',
          'zip_code': '{{ order.shipping_address.zip }}'
        }
      }
    }
  });
</script>
{% endif %}

That's it! You have successfully installed a Google Enhance Ecommerce data layer on your site.

Last update: December 3, 2020