Objective: Integrate Google Tag Manager with a Shopify store.
Ideal Result: There are no technical problems during the installation of Google Tag Manager.
Prerequisites or requirements: Google Analytics must be installed on your store as a prerequisite or necessity. If you have not already, you can add Google Analytics to a Shopify store by following blog067.
Why this is significant : With this, you can add and manage several pixels and tracking codes without having to change the website’s source code.
Note: To add Google Analytics to a Shopify store, follow blog 067 – How to Add Google Analytics to a Shopify Store rather than Google Tag Manager. To install other scripts to your Shopify site, this is still the most suggested method.
Where this is done : Google tag manager and your Shopify admin panel.
When it is completed: Just once, during the first installation of Google Tag Manager.
Who performs this: the one in charge of website management or analytics.
Environment Setup
- Install the Google Tag Assistant Chrome Extension by downloading it (Free)
Obtain the container code
- In the event that you do not yet have a Google Tag Manager account:
a. Join it for free:
1. To continue, you must sign into your Google account.
2. Your account creation prompt will appear immediately
away.
a. You can simply name both the account and the container
business or website.
b. Choose “Web” under “Where to Use Container.”
c. The terms and conditions are accepted.
d. Your code will be visible.
d1 . You will need the code for the following chapter, so copy it without
the script> and /script> tags.
D2. You will find more code below that; copy the entire block, including
the no script> tags; you will need it for the chapter that follows.
e. Click on Submit > Publish > once you are in your workspace. Publish your
Tag Manager container as usual:
- If you currently use Google Tag Manager:
1. Enter your login information.
2. Click “Admin” and “Install Google Tag Manager” in the top header.
3. Between the script> and /script> tags, paste the code (do not copy those tags). It will be necessary in the following chapter.
Important: To pay attention to the code section being copied. To proceed with this process, you must exclude the “script>” and “/script>” tags.
4. You will find a second code snippet below the first; duplicate it completely this time, including the no script> tags. You will require it for the subsequent chapter as well.
Your Shopify store can now use Google Tag Manager
Note: Using this method, you can add Google Tag Manager to every page of your website, unlike the official documentation, which only permits you to do so if you have a Shopify Plus subscription.
If you use Shopify Plus, abide by the official instructions provided here.
- Register with your Shopify store.
- Click “Preferences” under “Online Store” on the sidebar.
- “Add custom JavaScript to Google Analytics” should be clicked
.
- paste the code fragment you were given in the prior chapter.
- Choose “Save”
- Click “Themes” on the sidebar, next to “Online Store”:
- Select “Edit Code” under “Actions.”
- Do a “theme.liquid” search in the search bar. Toggle “theme.liquid” on.
- Locate a part of the code that begins with “body”; you may accomplish this by scrolling down or by using the browser’s search function (usually Ctrl+F on a PC or +F on a Mac). The second piece of code you received from it, the one with the “noscript” tag, should be pasted in there:
Example:In the top right corner,
- select “Save”:
Installing quality assurance
- Use Chrome to view the homepage of your website.
- We should select the Google Tag Assistant Chrome Extension .
- Select “Enable”
- Click the Google Tag Assistant Chrome Extension once more after refreshing the page
- A green tag for Google Tag Manager should appear, signifying that the installation was successful.
