Shopify Plus + GTM Integration for Checkout

Highlighted
New Member
8 0 0

We're launchign a new website but keeping Shopify for checkout purposes. Thus, we're going to have checkout.liquid but not theme.liquid.

Right now GTM works on the checkout pages because I've stripped the <script> </script> part of the snippet and placed it into the preferences section (this is just a hack workaround for the moment) but no matter what I try in terms of configuration, the data layer never comes to life.

The data layer message WILL pop up in debug mode, but none of the ecommerce or product information comes up.

Anyone encounter this issue workign with Shopify Plus and GTM?

Here's my set up:

checkout.liquid:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
    <meta name="referrer" content="never">

    <title>{{ shop.name }} - {{ page_title }}</title>
    
    <script>
        window.dataLayer = window.dataLayer || [];
    </script>
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MN85MTH');</script>
    <!-- End Google Tag Manager -->
    
    <script>
          var SUB_TOTAL = {{ checkout.subtotal_price | money_without_currency }};
    </script>
    
   
    <!-– Oracle Maxymiser Script Start -->
    <script type="text/javascript" src="//service.maxymiser.net/api/us/inkbox.com/d8c037/mmapi.js"></script>
    <!–- Oracle Maxymiser Script End -->
    
    
    {{ content_for_header }

    {{ checkout_stylesheets }}
    {{ checkout_scripts }}
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MN85MTH"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

Additional scripts:

 {% if first_time_accessed %}
    <script>
          window.dataLayer.push({
            'ecommerce': {
              'purchase': {
                'actionField': {
                  'id': {{ checkout.order_number }},                         // Transaction ID. Required for purchases and refunds.
                  'affiliation': 'Online Store',
                  'revenue': '{{ checkout.total_price | money_without_currency }}',                     // Total transaction value (incl. tax and shipping)
                  'tax': '{{ checkout.tax_price | money_without_currency }}', 
                  'shipping': '{{ checkout.shipping_price | money_without_currency }}',
                  {% for discount in checkout.discounts %}
                      'coupon': {{ discount.code }},
                  {% endfor %}
                },
                'products': [
                {% for item in checkout.line_items %} 
                  {
                     'name': {{ item.product.title | strip_html | json }},        
                     'id': "{{ item.product.id }}",
                     'price': {{ item.price | money_without_currency }},
                     'brand': {{ item.vendor }},
                     'quantity': {{ item.quantity }}
                  },
                {% endfor %} 
               ]
             }
           }
          });
    </script>
{% else %}
<script>
console.log("GTM NOT FIRED!");
</script>
{% endif %}
 

Preferences: (Note: I realize the below is a hack intended for non-Plus customers to workaround GTM)

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MN85MTH');

0 Likes
Highlighted
New Member
2 0 0

This is what worked for us, to get GTM on the shop and checkout pages

  • Log in to the Admin interface
  • Go to the “Online Store” option and select “preferences”
  • Under the “Google Analytics” section, Select “Additional Google Analytics Javascript”
  • Add your GTM code, and be sure to exclude the script tags (Shopify will enclose the content you enter in script tags by default)

Description with images: https://intellitonic.com/blog/2018/01/24/add-google-tag-manager-shopify-checkout/

0 Likes
Highlighted
New Member
4 0 0

So if using GTM to track purchases,( I currently use the additional scripts with the first_time_accessed without GTM), but to use GTM what you are doing is sending all that info to an ecommerce that GTM can now access. 

So I'd basically need to check for that ecommerce variable in my custom GTM script. Even if I am not using shopify plus, I should still be able to put that in additional scripts

 

0 Likes