Google Tag Manager
Google Tag Manager is a tag management platform that enables you to deploy and control analytics tags, tracking pixels and third-party scripts from a single dashboard. Google Tag Manager allows you to update tracking code on your website without editing theme files each time a change is required.
Google Tag Manager provides container-based tag management, preview and debugging tools and integration with a wide range of analytics and marketing platforms.
Key features for Google Tag Manager include:
- Centralised control of analytics scripts and tracking pixels
- Version control for tag changes
- Preview and debug mode for testing tag behaviour
- Support for Google Analytics, Google Ads and third-party tags
- Container workspaces for managing changes safely
- Automatic updates to installed tags without further theme edits
Google Tag Manager integrates with ShopWired by adding two installation code blocks to your theme. After installation, all tag management is controlled within your Google Tag Manager account.
Account creation
Account creation
To begin using Google Tag Manager with ShopWired, create an account on the Google Tag Manager website. After your account is created, Google Tag Manager provides two installation code blocks for your website.
Head installation code block
Head installation code block
Use this method to install the main Google Tag Manager script into the <head> section of your theme.
The example below shows the format of the first installation code block provided by 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-XXXXXX');</script>
The code block shown above is provided as an example only. You must copy the exact code block provided in your own account, as the code block and any ID values will be unique to your website.
Add this installation code block to your theme’s master.twig file:
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to install it on - Add the installation code block just above the closing
</head>tag
Body noscript
Body noscript
Install the noscript iframe immediately after the opening <body> tag.
Locate the second installation code block in Google Tag Manager, similar to the example below:
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
The code block shown above is provided as an example only. You must copy the exact code block provided in your own account, as the code block and any ID values will be unique to your website.
Add this installation code block to your theme’s master.twig file:
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to install it on - Add the script just after the opening
<body>tag
Verifying installation
Verifying installation
After installing both code blocks, use Google Tag Manager’s preview mode to confirm that the container loads correctly on your website.
Recommendations
Recommendations
Use Preview mode before publishing
Preview mode helps ensure your tags load correctly before making changes live.
Avoid unnecessary tags
Adding too many tags can affect website performance.
