Set up Google Tag Manager
Set up Google Tag Manager for webpages by following Google's "set up and install" steps in the following video.
Add Google Tag Manager code to Foundation theme
The information in this section is applicable to Foundation themes and those looking to measure Google Analytics activity in the Vanilla KB.
You will have to add two snippets of code from Google. Let's add them to Vanilla now!
Google Tag Manager gives you:
<!-- 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','yourGTM_ID');</script>
<!-- End Google Tag Manager -->
...and:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=yourGTM_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
📝 NOTE: This second block, with the iframe (<!-- Google Tag Manager (noscript) -->), is for when someone (or a bot) browses your site and does not have JavaScript.
The first block is doing two things:
- Injecting a script tag that calls the URL
https://www.googletagmanager.com/gtm.js?id=[yourGTM_ID]. - Adding
{'gtm.start':new Date().getTime(),event:'gtm.js'} to a browser object known as window['dataLayer'].
You will have to format it so that it can be executed by the Foundation theming engine without violating our Content Security Policy.
1. Open Theme Editor and click the Edit button.
2. Add the JavaScript code to be placed in the <head> in the JavaScript tab.
/**
* Get the current nonce from scripts in the head.
**/
const getNonce = () => {
const scripts = document.querySelectorAll('script');
for (let i = 0; i < scripts.length; i++) {
if (scripts[i].nonce) {
return scripts[i].nonce;
}
}
console.warn('Failed to retrieve a nonce. Check to see if your scripts work.');
};
// Get the nonce value that Vanilla is putting on scripts on this page.
const NONCE = document.querySelector('script')?.nonce ?? getNonce();
// Create a script tag to embed the Google Script in the head of the page.
const injectGTMFile = (validUrl) => {
const head = document.querySelector('head');
const scriptTag = document.createElement('script');
scriptTag.setAttribute('nonce', NONCE);
scriptTag.async = true;
scriptTag.src = (validUrl) ? validUrl : '';
head.appendChild(scriptTag);
}
onVanillaReady(() => {
// Put a script tag in the head of the document with tag manager Id attached to it.
injectGTMFile('https://www.googletagmanager.com/gtm.js?id=[yourGTM_ID]');
window.addEventListener('load', () => {
// Once the window is loaded, get the dataLayer and do the push function to attach GTM magic.
const dataLayer = window['dataLayer']||window.dataLayer;
dataLayer.push({'gtm.start': new Date().getTime(), event:'gtm.js'});
});
});
3. Add the <noscript> portion of the snippet to the Header tab of your Foundation theme.
4. Click Save.
5. Navigate to the Technical > Security tab to ensure Google Analytics traffic can be read.
6. Add the following in the Content Security Domains field.
*.googletagmanager.com*.google-analytics.com
as shown below:
7. Go to Google Tag Assistant and run the debug to make sure things are working as expected.
📝 NOTE: Foundation must be the theme used for mobile theme; otherwise, mobile traffic will not be measured, unless this code has been separately added to the mobile theme.
Add Google Tag Manager code to non-Foundation theme
The information in this section is applicable only to non-Foundation themes.
You will have to create two Pockets in order to add the two snippets of code from Google.
First Pocket
The Pocket houses the Google Tag Manager code for the Head area.
1. Slide the toggle to the right to enable the Pocket.
2. Give the Pocket a memorable Name and:
- Body - paste Google Tag Manager code from part one
- Page - select (All)
- Location - select Head
- Repeat - select Before
3. Click Save.
Second Pocket
The Pocket houses the secondary Google Tag Manager code for the Content area.
1. Slide the toggle to the right to enable the Pocket.
2. Give the Pocket a memorable Name and:
- Body - paste Google Tag Manager code from part two
- Page - select (All)
- Location - select Content
- Repeat - select Before
3. Click Save.
Add Universal Analytics
Now you're ready to add Google Universal Analytics tags in your Google Tag Manager.
