Shopify (not Plus) Google Tag Manager Checkout Page Data Layer

Intro

When using Shopify Standard (not plus) you add the Google Tag Manager snippets to your theme layout file in the head and body as per standard instructions, and then you need to add some code and setup for tracking conversions from the order page. Follow these steps:

Add this code to checkout scripts

Go to Settings > Checkout > Scripts

{% if first_time_accessed %}

<script>

var lftOrders = {{ customer.orders.size }};
var custType = 'repeatcustomer';
if (lftOrders == 1)
{
 custType = 'newcustomer';
}

var coupons = 'None';  
{% assign lcoupons = "" %} 
{% for discount in order.discounts %}  
 {% assign lcoupons = lcoupons | append:  discount.code | upcase   %}
{% endfor %}

var dataLayer = window.dataLayer = window.dataLayer || [];
dataLayer.push(
{
 'ecommerce' : {
  'purchase': {
   'actionField': {
   'id': '{{order.order_number}}',
   'revenue': {{total_price | times: 0.01}},
   'subtotal': {{subtotal_price | times: 0.01}},
   'tax': {{tax_price | times: 0.01}},
   'shipping': {{shipping_price | times: 0.01}},
   'customerType': custType,
   'lifetimeOrders': lftOrders,
   'email': '{{order.email}}',
   'coupon': '{{ lcoupons }}'
  },
  'products': [
  {% for line_item in line_items %}
   {
    'id': '{{line_item.sku}}',
    'name': '{{line_item.vendor | append: ' - '  | append: line_item.product.title}}',
    'category': '{{line_item.product.type}}',
    'brand': '{{line_item.vendor}}',
    'price': {{line_item.line_price | times: 0.01}},
    'quantity': {{line_item.quantity}}
   },
  {% endfor %}]
  }
 }
}
);
</script> 

<!-- enter the google tag manager head and body code here //-->

{% endif %} 

Define some variables in Google Tag Manager

  • Create a new constant user defined variable called gaAccountId with value = YOURGAACCOUNTID.
  • Create a new constant user defined variable called gaCrossDomains with value = “mywebsite.com,checkout.shopify.com”
  • Create a new constant user defined variable called gaDomain with value = “auto”
  • Optionally create variables based on the data layer. For example:
    • Create a Data Layer Variable for OrderID named transOrderID with value ecommerce.purchase.actionField.id
    • Create Data Layer Variables for Revenue, Shipping, Tax, Coupon, SubTotal, Email, CustomerType. eg transRevenue with value ecommerce.purchase.actionField.revenue
  • Create a page view trigger named “Transaction” with 2 conditions:
    • Page url matches RegEx(ignore case) https://checkout.shopify.com/(.*)/orders/(.*)thank(.*)
    • Referrer does not contain myshopify.com/admin/orders/

Create Google Analytics tag (type = Universal Analytics)

  • Tracking ID : {{gaAccountID}} – This is the variable we created where we stored our TrackingID
  • allowLinker: true
  • cookieDomain: {gaDomain}}
  • Enable Enhanced Ecommerce Features – Check
  • Use data layer – Check
  • Enable Display Advertising Features – Check
  • Auto Link Domains: {{gaCrossDomains}}
  • Use Hash as Delimiter: False
  • Decorate Forms: False
  • Under Triggering
    • Select All pages
    • Select Add Exception, and select Transaction.

Create Google Analytics Transaction Tag

  • Copy the tag we created above
  • Remove all the triggers and excepts
  • Select the trigger to the Transaction trigger we initially created.

References:

  • https://help.shopify.com/manual/reports-and-analytics/google-analytics/google-tag-manager
  • https://www.dbmarketer.com/db-marketer/google-tag-manager-on-shopify/
  • https://github.com/toddheslin/gtm-ecommerce-platforms/blob/master/shopify/shopify.md