Do you need help with digital marketing?Start here
  • It is important to know how people are interacting with your website..no matter what type of website you have. It can be a normal static website or a big e-Commerce website. Google analytics can provide lots of very important insights that you are looking for your website such as audiences, acquisition, behavior, etc., but it has some limitations when it comes to some specific or alone insights.
    But these limitations can be surpassed easily by using Google Tag Manager in conjunction with Google Analytics. With this combination, you’ll be able to collect much more data than ever. Thus, we have come up with this write-up to guide you step-by-step on how to track your Shopify website conversion tracking through Google Tag Manager.

    Google Tag Manager

    Google Tag Manager is a tool which has been designed with a user-friendly and web-based interface that delivers simple, reliable, easily integrated tag management solutions and simplifies the process of working with tags. It allows you to manage all your website tags without editing code.

    How to install Google Tag Manager to your Shopify Website

    First of all you need to create a GTM account to install to your website. It will provide you two codes that would be needed to paste in your website’s <head> and <body> section with the provided instructions. If you have already been created it, follows the following steps to install it in your website.

    • Login to your website admin interface
    • Go to “Online Store” options from left panel and select “Preferences
    • Choose “Add custom JavaScript” options under the “Google Analytics” section.

    GTM Install in Shopify website through custon JavaScript

    • Copy the first provided GTM code

    GTM Installation Code

    • And paste it in the “Add custom JavaScript” section, and be sure to exclude the script tags (Shopify will enclose the content you enter in script tags by default)

    GTM Install in Shopify

    Or you can add this GTM code directly in <head> section of your website’s theme. For this,

    • In the admin interface, Go to “Online Store” under Sales Channels from the left panel.
    • Then Go to Themes >> Actions >> Edit code

    Shopify Themes Edit

    • Select “theme.liquid” under Layout and add your GTM code tag just before the closing </head> tag.
    • Same as add your second GTM <body> tag code just after the opening <body> tag.
    • And Save your changes

    GTM code installation in them.liquid template

     

    Now Google Tag manager has successfully installed in your site, and you are able to start tracking for your site.

    Shopify website tracking through GTM

    Here, you will introduce with some basics but most important website tracking points.

    1. Phone call clicks tracking

    2. Email click tracking

    3. Contact form tracking

    But, before we get down the business, here is what you will need to successfully tracking your website through Google Tag Manager.

    • Google Tag Manager account
    • Google Analytics account
    • Google Analytics settings variable
    • Enable already build in variables
    • A website with details of tracking event

    If you have not setup the GTM and GA account for your website tracking, firstly setup and install these within your website. After that, create a new variable for Google Analytics setting with GTM.

    Google Analytics settings variable

    How to create Google Analytics settings variable to track events data in GA. Steps are below to make connection between Google Analytics and Google tag manager account.

    • Go to your GTM account dashboard
    • And Click Variables from the left panel
    • Then click New, under the User-Defined Variables heading

    Google Analytics setting variable

    • Click Variable Configuration and choose a variable type Google Analytics Settings.

    Google Analytics Variable Configuration Setting

    • In the Tracking ID field enter your Google Analytics ID.

    Google Analytics Tracking ID

    • “Cookie Domain” set to auto.
    • Leave it the More Settings
    • Save the tag.

    Enable Already Build-In Variables

    As per your website and the solution implemented, enable the already build in variables from Built-In Variables. You might not need all the variables in these categories. If you’re not sure, start by enabling all the variables- you can always go back and disable the ones you don’t need.

    GTM - Already build in variables

    GTM - enable already build in variables

    Phone Call Click Tracking

    To execute an event listener for phone call clicks tracking in GTM, it is significant to set the correct HTML mark-up code to open the mobile device to call. Here’s an example,”<a href=” tel:91-8750-799-799″>Phone Call 91-8750-799-799</a>”.

    Click here to see how it works Phone Call 91-8750-799-799

    Now open Google Tag Manager Account and

    Create the trigger to fire on phone click

    • Name your trigger , I have given “Click for phone call
    • Choose the trigger type Just Links

    Choose the trigger type Just Links

    • Check “Wait for Tags” and “Check Validation
    • Enable this trigger on the website pages where there phone number has been. (Note*: Phone number is on every page of my site, so I have enabled this for all pages “.*” ).
    • Configure this trigger to fire on Some Link Clicks, when Click URL contains tel:
    • Click to Save for save your trigger.

    Configure phone call clicks tracking trigger

    Create the Tag to pass event values in Google Analytics

    • Create a new Tag with your desired name, my tag name is “GA-Phone Call Clicks
    • Configure the Tag and choose tag type “Google Analytics: Universal Analytics

    GA Tag for phone call clicks

    • Choose the Track Type Event
    • Fill the event tracking parameters “Category, Action and Label” as you want them to seem in GA.
    • Value field is optional, fill Value if you want it to appear in GA. We’ll leave it blank.
    • In the Google Analytics Setting field, choose the analytics property (which you were created to make connection between GA and GTM) where you want to receive this event.

    Configure GA Tag for phone call clicks

    NOTE*: We want to track form which page phone number was clicked since it is available on every page of my site, so my label is “from page {{Page Path}}”. If you have multiple phone numbers on your website and on a specific page, you might consider using Click URL to send the number that was clicked lieu of the page where it was clicked. Additionally, if you want to track both, you can use the Action field for Click URL and the rest as it’s presented above or put this “Phone number “{{Click URL}}” was clicked from page “{{Page Path}}” in the Label field.

    Select the trigger which you had created in Triggering and Save your Tag.

    Choose click for phone call trigger

    Test and Debug

    • Now, enter the Preview mode in GTM and open your website.

    Enter preview mode in GTM

    • Then, click any of the phone number which you want to track and check if the tag is fired properly.

    phone call clicks tag is fired successfully.

    • Don’t forget to check on Real-Time report in Google Analytics if the event is configured as you want.

    GA real time report for phone click event tracking

    If everything is fine and you’re happy with your phone call clicks event setup, you can publish your container.

    NOTE*: In the Real-Time report, you won’t be able to see the Label you had set up in tag configure in GTM. You will have to wait for the next day to view the label, when the data is loaded into GA. This data can be found in the Behavior report in GA, under Events. Filter for the Category you created.

    Setup Analytics Goal

    The Events report in Google Analytics might give you some insights about your phone number click or other events, but when combine this information with Acquisition, you can only do it with Category, Action or Label individually. It may become quite too hard in read if you have a high number of events set up. Goal is one of the ways to cross this information that will invariably be available in Acquisition and other sections in a more readable way. To do this,

    • Go to Admin setting of your Google Analytics and choose Goal from View section.

    Google Analytica Admin

    • Then click + NEW GOAL.

    Create new goal in GA

    • Set it as custom, and Click Continue.

    Goal type custom

    • Give your goal a name that will identify it among the others, as my goal name is “Website phone number click”.
    • And select goal type Event. Click Continue.

    Website phone number click goal setup

    • Fill the Event’s conditions like Category and Action exactly as you did on GTM. Click Save.

    Website phone number click goal setup - 2

    NOTE*: If you are dynamically receiving the Label field as we set up previously in GTM, leave it blank. If you populated it with a constant value in GTM adds it here as well. After you set up your Goal, go to on your website and click on phone, then check real time conversions report in GA. As you can see one website phone number click is recorded one in my case.

    Website phone click goal conversion real time overview

    Email Click Tracking

    Email click tracking is same as phone call click, only change in trigger to fire on where in phone click “Click URL contains “tel:” , in Email click “Click URL contains “mailto:”.

    Configure email click trigger

    Save your trigger, and create a new Tag to pass values in Google Analytics.

    Website email click tag configure

    Go to preview mode for test and debug your code, open your website and click on the email which you want to track and check if tag is fired properly. If you satisfied with your tag.

    Email click tag is fired successfully

    If you satisfied with your tag, submit your container, and setup a new event goal in Google Analytics for email clicks conversions.

    Website email click goal setup

    Check on real time report in GA for email click successful conversion. In my case, it is working fine as you can see one conversion has been recorded in real time conversion report.

    Real time email click conversion

    Contact form tracking

    In shopify, when we fill and submit a contact us form it is redirected on this page /pages/contact?contact_posted=true#contact_form”  with thankyou message. So, to track a contact us form submission in Shopify, we need to create a Page View trigger that would be fired on some page views that Page URL Contains “contact_posted=true”.

    Shopify Contact form submission trigger setup

    Save your trigger, and create a tag to pass event values in GA.

    Shopify contact form tag setup in GTM

    Open preview mode of your GTM to test your “contact us form submission” tag and trigger in debug mode. Open your website and visit the page where contact us form is existing. Fill the form and check is tag is fired successfully.

    Contact us form tag fired test

    Also check on Real Time Events report in Google Analytics to check your contact us form submission event.

    Now setup a new goal in GA for contact us form submission conversions.

    Contact us form submission goal setup in GA

    Now; Go to your website and fill a contact us form to test on Real Time conversion report in Google Analytics. As you can see in my case one contact us form submission goal conversion has been recorded in the Real Time Conversion report.

    Real time contact us form submission conversion track

    Now, you have finished all three types of events tracking and Goals conversion for Shopify website. Enjoy the Shopify website tracking with Google Tag Manager, and share with your friends and peer.

    Tell us about your Shopify project

    If you are looking for a Shopify SEO company to become your long term partner to handle your shopify website and succeed business online then we would love to hear from you.  Our Shopify SEO experts will help you whether it’s branding, website’s conversion tracking or SEO, we have the experience to get it right.

  • MenuMore From Brandconn Digital.