AutomationHow to Install Google Tag Manager On Shopify: A Detailed Guide
Last updated: December 03 2024
Google Tag Manager (GTM) is a free management tool from Google that gives you access to measurement tools like Google Analytics and Google Ads. This allows you to measure the performance of your Shopify store effectively.
In this guide, I will guide you on installing Google Tag Manager on Shopify, so you can take full control of your store's analytics and confidently grow your business. Follow along!
Related Posts:
- How to Set up Google Shopping on Shopify?
- Shopify Statistics & Figures
- How to Make Money with Shopify?
- How to Add Facebook Pixel to Shopify?
What is Google Tag Manager?
Google Tag Manager is a free tool that allows you to manage and implement tracking tags (such as Google Analytics, Facebook Pixel, and other third-party scripts) on your website without touching the code. Instead of individually adding tracking codes for each tool, you install one GTM code, and then manage all your tags in GTM’s user-friendly interface.
I will show you one case of how Google Tag Manager will work. Specifically, when people share information from one data source with another data source through Google Tag Manager. So, the Google Tag Manager will help you a lot if you own a lot of tags to manage as all of the code is stored in one place.
Why Should You Use Google Tag Manager for Shopify?
Why should you use the Google Tag Manager for your Shopify store? I will show you some essential benefits you should consider using Google Tag Manager right now.
- Easier Tag Management: GTM acts a central hub for all your tracking codes (tags) making it easier to manage and update theme without constantly editing your Shopify theme code.
- Enhanced Tracking Capabilities: GTM enables you to track more than just basic pageviews. You can easily track events like button clicks, form submissions, scroll depth, video views, and more, providing valuable insights into user behavior.
- Improved Data Accuracy: GTM helps ensure your tracking codes are implemented correctly, leading to more accurate data and better decision-making.
- Reduced Code Clutter: By managing tags through GTM, you avoid adding multiple code snippets directly to your Shopify theme, which can slow down your website’s loading speed.
- Easy Integration with Marketing Platforms: GTM seamlessly integrates with various marketing platforms like Google Ads, Facebook Ads, and analytic tools, allowing you to track conversions, retarget audiences, and optimize your campaigns more effectively.
How To Install Google Tag Manager on Shopify
Step 1: Custom tracking setups Account
Go to Google Tag Manager > Create a new account. You will be asked to fill in your company name and Shopify file domain here. Fill in the order.
You will be asked to fill in your company name and shopy file domain here. Please fill in the order. If you do not know how to fill in, here are the instructions for your reference.
- Account Name: Your company
- Country: Select where you live
- Share data anonymously with Google and others: You can tick it so that it will be complete and accurate when Google Analytics collects it.
- Container name: yourshopifypage.com (Note: The name cannot start with an "_" or contain a reserved character (!, @, #, $, <, etc)
Example:
https://www.shopify.com is wrong because have https://
You must fill: www.shopify.com
- Target platform: Select Web
Then click Create to continue. you create an account, you will receive a notification, tick to agree and click Yes to continue.
Step 2: Get Your Google Tag Manager Container Code
After successfully creating, you will receive a code, copy this code and paste it into the homepage of your site.
- Head Tag Snippet: This snippet goes into the <head> section of your website.
- Body Tag Snippet: This snippet goes directly after the <body> tag.
Step 3: Add Google Tag Manager Code to Your Shopify Store
Method 1: Adding GTM Code to Your Shopify Theme
Log in to Shopify admin and go to Online Store> Themes > Edit Code” on your current theme.
Paste the GTM code snippets in the theme.liquid file:
- Place the first code snippet right after the opening <head> tag.
- Place the second snippet right after the opening <body> tag.
Method 2: Using a Shopify App
Shopify apps make it easier to install Google Tag Manager (GTM). These apps provide detailed tools and instructions, helping you integrate GTM without complicated coding.
Step-by-step guide to installing GTM via an app:
- Step 1: Go to the Shopify App Store and search for Google Tag Manager-related apps, such as "GTM for Shopify" or similar apps.
- Step 2: Install the app of your choice into your Shopify store. I will use the XO Insert Code app to install it.
You can refer to other apps, but choose this app that is highly rated and compatible with the latest versions of Shopify.
- Step 3: Activate the app and follow the instructions in the app to add the GTM code to your page.
- Step 4: Create a new code tag, Add the code from Tag Manager as instructed
Setting Up Tags, Triggers, and Variables in GTM
Creating Tags
Tags in Google Tag Manager (GTM) help track specific actions on your website, such as page views, purchases, or form submissions. Here’s how to set up some essential tags:
Google Analytics Tag
- Go to your GTM dashboard and select “Tags” from the menu.
- Click on “New,” name your tag, and choose “Google Analytics: GA4 Configuration.”
- Enter your GA4 Measurement ID, configure any additional settings, and “Save”
Facebook Pixel Tag
- Create a new tag, naming it “Facebook Pixel.”
- Select the “Custom HTML” tag type and paste your Facebook Pixel code.
- Save the tag after configuring your preferred settings.
Other Tracking Tags
- For other tools like Hotjar, LinkedIn, or Twitter, choose “Custom HTML” or specific integrations within GTM.
- Paste the tracking code, and save the tag.
Setting Tag Types
- Each tag type has predefined settings that make connecting with popular analytics tools easier.
- Make sure each tag aligns with your data-tracking requirements.
Setting Up Triggers
Triggers define when and where tags should fire. Here’s how to configure common triggers:
All Pages Trigger
- This trigger ensures that tags fire on every page.
- In the “Triggers” section, create a new trigger, select “Page View,” and set it to fire on “All Page Views.”
Click Trigger (e.g., Button Clicks)
If you want to track button clicks, create a new trigger, select “Click - All Elements,” and configure the settings based on the specific button ID or class.
Using Variables
Variables in GTM capture additional data that tags may need to fire accurately. Here’s how to set up some useful variables:
Page URL and Referrer
Go to “Variables” and enable the built-in variables “Page URL” and “Referrer” to understand the user’s navigation path.
Click Variables
Enable click-related variables (e.g., “Click URL,” “Click Text”) to capture specific data on what users are clicking.
Custom JavaScript Variables
You can create custom JavaScript variables to track more specific actions if your site requires it.
Google Analytics Variables
If you’re tracking multiple GA4 properties, create user-defined variables for Measurement IDs to easily switch between them.
How to Test Your GTM Installation on Shopify
Step 1: Open the Workspace in the GTM
Firstly, you need to open the workspace in the GTM to test the installation.
Step 2: Choose “Preview” to test your site
Click the “Preview” to proceed the installation.
Step 3: Publish the initial version
Click “Preview,” and a debug window will open, allowing you to test your site in real-time
Note: If your Google Tag Manager is new without Tags or versions already set up, you can’t access the Preview option.
However, you can create an initial version by clicking “Submit.”
Add an initial name to the version in Google Tag Manager and publish it. This enables access to the Preview Mode, directing you to Google Tag Assistant.
Step 4: Connect Google Tag Assistant to Your Website:
- Add your website URL to the URL section in Google Tag Assistant and click “Connect.”
- Confirm the connection with the Connected pop-up message, indicating successful installation of Google Tag Manager.
Step 5: Verify Tracking with Google Tag Assistant:
- In Tag Assistant, observe entries showing the number of recent visits to your website.
- Open another page on the website; new entries will appear in Tag Assistant to track the additional page visit.
Test by interacting with various products or items on your webpage to ensure all events are tracked correctly.
Step 6: Track Pageview Events:
- Each page you open will be recorded by Tag Assistant, verifying that Google Tag Manager is functioning across most pages of your Shopify website.
Step 7: Add Google Tag Manager to the Thank You Page:
- Proceed with installing Google Tag Manager on the Thank You page to complete the setup.
Troubleshooting Common Issues When Install GTM On Shopify
GTM tags not firing correctly on Shopify
- Ensure triggers and variables are correctly configured.
- Double-check any custom code to ensure it doesn’t conflict with Shopify’s tracking.
Page speed concerns after installing GTM
- Keep your tags efficient and remove any unused or redundant tags to minimize impact on page load times.
Conflicts between GTM and existing Shopify tracking codes
Review any built-in Shopify tracking codes, especially if you use Shopify Analytics, and make sure they don’t interfere with GTM tracking.
In Conclusion
Installing Google Tag Manager on your Shopify store empowers you to track various events, implement marketing pixels, and gather valuable data without editing your store's code every time. While there are different methods to achieve this, the core process involves adding provided code snippets to your theme's theme.liquid file.
Install Google Tag Manager on Shopify: FAQs
How to install Google Tag Manager on Shopify?
You can install Google Tag Manager on Shopify by adding the GTM code to your site's <head> section or using a Shopify app that supports GTM installation.
How do I add a Google HTML tag to Shopify?
To add a Google HTML tag to Shopify, go to the "Themes" section, select "Edit code," and paste the HTML tag into the correct location, usually within the <head> section.
Where to put a tag in Shopify?
You should place the tag code in your site's <head> section, or you can use GTM to centrally manage the tag code for easier control.
How do I paste a Google tag in Shopify?
To paste a Google tag, go to "Edit code" in your theme and add the code in the <head> section, or use Google Tag Manager to conveniently manage your tags.
Can I use GTM on all Shopify plans?
Yes, Google Tag Manager can be used on all Shopify plans, but some advanced features may require access to the theme code, which may not be available on the Shopify Starter plan.
How to Set Up GA4 Ecommerce Tracking with GTM
To set up GA4 Ecommerce tracking with GTM, ensure your GA4 account is connected to GTM. Then, add the necessary variables and triggers to track eCommerce events, such as product views, add-to-cart actions, and transactions.
