How to Install Google Tag Manager on Shopify

Installing Google Tag Manager (GTM) on your Shopify store is a straightforward process. Here’s a step-by-step guide to help you with the installation:

Create a Google Tag Manager Account

1. Go to Google Tag Manager.
2. Sign in with your Google account.
3. Click on “Create Account.”
4. Enter your account name (usually your business name), and select your country.
5. Enter your container name (usually your website name) and select “Web” as the target platform.
6. Click “Create” and agree to the terms of service.

1. ADD GOOGLE TAG MANAGER TO YOUR THEME

Navigate to ‘Online Store’, then ‘Themes’, and edit the theme.liquid file. You will then need to paste your Google Tag Manager container code between the head tags. Here’s an example of the code (important: you will need to replace GTM-EXAMPLE with your own Google Tag Manager container ID):

<!-- Google Tag Manager -->
<script>
window.dataLayer = window.dataLayer || [];
</script>
<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-EXAMPLE');</script>
<!-- End Google Tag Manager -->

Navigate to ‘Online Store’, then ‘Themes’, and edit the theme.liquid file. You will then need to paste your Google Tag Manager container code between the head tags. Here’s an example of the code (important: you will need to replace GTM-EXAMPLE with your own Google Tag Manager container ID):

Source: GitHub

2. ADD GOOGLE TAG MANAGER WITH A DATA LAYER TO YOUR ORDER CONFIRMATION PAGE

Navigate to ‘Settings’, then ‘Checkout’, add a modified tracking code to the ‘Additional Scripts’ section (under ‘Order Status Page’. Here’s an example you can use (important: you will need to replace GTM-EXAMPLE with your own Google Tag Manager container ID):

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "{{ checkout.order_id }}",
      value: {{ total_price | times: 0.01 }},
      tax: {{ tax_price | times: 0.01 }},
      shipping: {{ shipping_price | times: 0.01 }},
      currency: "{{ checkout.currency }}",
      items: [
       {% for line_item in line_items %}{
        item_id: "{{ line_item.product_id }}",
        item_name: "{{ line_item.title | remove: "'" | remove: '"' }}",
        currency: "{{ checkout.currency }}",
        price: {{ line_item.final_price | times: 0.01 }},
        quantity: {{ line_item.quantity }}
      },{% endfor %}
 ]
  }
});
{% endif %}
</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-EXAMPLE');</script>
  <!-- End Google Tag Manager -->

Source: GitHub

Visit Skillshare to learn more: