Google Tag Manager

Modified on Thu, 22 Dec, 2022 at 8:27 PM

Google Tag Manager is a tag management system that allows you to create and monitor tags on a user interface, without writing new code each time you want to construct a tag. You simply embed the Google Tag Manager code into each page of your website. This eliminates the manual process of creating tags, making your marketing process more efficient and precise.

Incorporate Google Tag Manager to Manger Hushly’s Tag on your Page

Configure a Tag with Hushly’s Code using Google Tag Manager
Configure your page with the Google Tag Manager Tag

Configure a Tag with Hushly’s Code using Google Tag Manager:

Once you have a Google Tag Manager account, the first thing you should learn is how to set up a tag. Let’s check out how to set up a tag:

Within your Google Tag Manager dashboard, click the “Add a New Tag” button, circled below in red.
Give a Title to your tag, and then click anywhere in the top “Tag Configuration” box, to choose a tag type.
There are dozens of tag types (they are not all displayed here, and you can also customize a tag type). Chose “Custom HTML”.
Enter the Hushly Code in the HTML content
Next, choose a trigger (a trigger means when you want the tag recorded, i.e. “every time someone visits the page”). I chose “All Pages”, to get insights every time someone views any of my web pages, but this varies depending on your purposes.
When you’re happy with the information in the “Tag Configuration” and “Triggering” boxes, click the blue “Save” button.
Next, click the blue “Submit” button. Your tag won’t work until you do so.
When you click “Submit”, you’ll be taken to this “Submission Configuration” page. There are two options: “Publish and Create Version” or “Create Version”. Since I’m ready to push the tag onto all my site pages, I selected “Publish and Create Version”, and then I pressed the blue “Publish” button in the top right.
Finally, you’ll be shown this “Container Version Description”. To keep your tags organized, add a name and description to understand what you’re trying to record with this tag.
Ensure your tag appears in your “Version Summary” report. Now, you’ve successfully created your first tag.

Configure your landing page and content hub with the Google Tag Manager Tag:

Configuring your page with the Google Tag manually is relatively simple to do.

Here’s what you do:

Copy the Google Tag Manager code you are given during the set-up process. If you’ve already set up your account, click the blue “Google Tag Manager” code beside “Workspace Changes” on your Google Tag Manager homepage
The Google Tag Manager container snippet is a small piece of JavaScript and non-JavaScript code that you paste into your pages. It enables Tag Manager to fire tags by inserting the gtm.js into the page (or through the use of an iframe when JavaScript isn't available).

To implement Google Tag Manager on your website landing pages (not for content Hub):

Copy the following JavaScript and paste it as close to the opening <head> tag as possible on every page of your website, replacing GTM-XXXX with your container ID:

<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->

Copy the following snippet and paste it immediately after the opening <body> tag on every page of your website, replacing GTM-XXXX with your container ID:

!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

To implement Google Tag Manager on your content hub:
- Copy the following JavaScript and paste it to the JavaScript section, found within the advanced option of your Hub branding menu item, replacing GTM-XXXX with your container ID:
```
(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-XXXX');
```
  Note: Hushly is a modern one-page application and as such requires JavaScript to be enabled on browsers. As such, there is no need to insert the <noscript> Google Tag Manager tag with Hushly content hubs. Please disregard the warning message you see within the Google Tag Assistant tool about the missing <noscript> tag.
To implement Google Tag Manager on your ABM Page:
- Click Hubs from the Left Nav Menu. Select the Hub.
- Copy the following JavaScript and paste it into the Branding > Show Advanced Options > ABM Page Head section, replacing GTM-XXXX with your container ID:
```
(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-XXXX');
```
  Note: Hushly is a modern one-page application and as such requires JavaScript to be enabled on browsers. As such, there is no need to insert the <noscript> Google Tag Manager tag with Hushly ABM Pages. Please disregard the warning message you see within the Google Tag Assistant tool about the missing <noscript> tag.
Google Tag Manager will automatically code future tags and embed them in whichever page you’ve selected.