Google Tag Manager & Vanilla Forums - HL Vanilla Community
<main> <article class="userContent"> <h2 data-id="set-up-google-tag-manager">Set up Google Tag Manager</h2><p>Set up Google Tag Manager for webpages by following <a href="https://support.google.com/tagmanager/answer/6103696?hl=en" rel="nofollow noreferrer ugc">Google's "set up and install" steps</a> in the following video.</p><div class="js-embed embedResponsive" data-embedjson="{"height":270,"width":480,"photoUrl":"https:\/\/i.ytimg.com\/vi\/P4suvDuj0kI\/hqdefault.jpg","videoID":"P4suvDuj0kI","showRelated":false,"url":"https:\/\/youtu.be\/P4suvDuj0kI","embedType":"youtube","name":"Installing the Google Tag Manager Container Snippet","frameSrc":"https:\/\/www.youtube.com\/embed\/P4suvDuj0kI?feature=oembed&autoplay=1"}"> <a href="https://youtu.be/P4suvDuj0kI" rel="nofollow noreferrer ugc"> https://youtu.be/P4suvDuj0kI </a> </div><h2 data-id="add-google-tag-manager-code-to-foundation-theme">Add Google Tag Manager code to Foundation theme</h2><p>The information in this section is applicable to Foundation themes and those looking to measure Google Analytics activity in the Vanilla KB.</p><p>You will have to add two snippets of code from Google. Let's add them to Vanilla now!</p><p>Google Tag Manager gives you:</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><!-- 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> </pre><p>...and:</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><!-- 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) --> </pre><p>📝 <strong>NOTE</strong>: This second block, with the iframe <code class="code codeInline" spellcheck="false" tabindex="0">(<!-- Google Tag Manager (noscript) -->)</code>, is for when someone (or a bot) browses your site and does not have JavaScript. </p><p>The first block is doing two things:</p><ul><li>Injecting a script tag that calls the URL <code class="code codeInline" spellcheck="false" tabindex="0">https://www.googletagmanager.com/gtm.js?id=[yourGTM_ID]</code>.</li><li>Adding <code class="code codeInline" spellcheck="false" tabindex="0">{'gtm.start':new Date().getTime(),event:'gtm.js'}</code> to a browser object known as <code class="code codeInline" spellcheck="false" tabindex="0">window['dataLayer']</code>.</li></ul><p>You will have to format it so that it can be executed by the Foundation theming engine without violating our Content Security Policy.</p><p>1. Open Theme Editor and click the <strong>Edit</strong> button.</p><p>2. Add the JavaScript code to be placed in the <code class="code codeInline" spellcheck="false" tabindex="0"><head></code> in the JavaScript tab.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">const injectJSFile = (validUrl) => { const nonce = 'nonce-'+document.querySelector("script")?.nonce; 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. injectJSFile('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'}); }); }); </pre><p>3. Add the <code class="code codeInline" spellcheck="false" tabindex="0"><noscript></code> portion of the snippet to the <strong>Header</strong> tab of your Foundation theme.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png" alt="image.png" height="228" width="921" loading="lazy" data-display-size="large" data-float="none" srcset="https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=10/https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png 10w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=300/https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png 300w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png 800w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1200/https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png 1200w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png 1600w, https://us.v-cdn.net/6030677/uploads/EP036NGWT3BC/image.png"></img></a> </div> </div> <p>4. Click <strong>Save</strong>.</p><p>5. Navigate to the <strong>Technical > Security</strong> tab to ensure Google Analytics traffic can be read.</p><p>6. Add the following in the <strong>Content Security Domains</strong> field.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">*.googletagmanager.com *.google-analytics.com </pre><p> as shown below:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png" alt="image.png" height="537" width="745" loading="lazy" data-display-size="large" data-float="none" srcset="https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=10/https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png 10w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=300/https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png 300w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png 800w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1200/https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png 1200w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png 1600w, https://us.v-cdn.net/6030677/uploads/Q7CF1UVN92SC/image.png"></img></a> </div> </div> <p>7. Go to <a href="https://tagassistant.google.com/" rel="nofollow noreferrer ugc">Google Tag Assistant</a> and run the debug to make sure things are working as expected.</p><p>📝 <strong>NOTE</strong>: 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. </p><h2 data-id="add-google-tag-manager-code-to-non-foundation-theme">Add Google Tag Manager code to non-Foundation theme</h2><p>The information in this section is applicable only to non-Foundation themes.</p><p>You will have to create two <a href="https://success.vanillaforums.com/kb/articles/19" rel="nofollow noreferrer ugc">Pockets</a> in order to add the two snippets of code from Google.</p><h3 data-id="first-pocket">First Pocket</h3><p>The Pocket houses the Google Tag Manager code for the Head area.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png" alt="GTM code-nonFoundation 1.png" height="462" width="765" loading="lazy" data-display-size="large" data-float="none" srcset="https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=10/https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png 10w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=300/https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png 300w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png 800w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1200/https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png 1200w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png 1600w, https://us.v-cdn.net/6030677/uploads/1YS1SEXVAOXV/gtm-code-nonfoundation-1.png"></img></a> </div> </div> <p>1. Slide the toggle to the right to <strong>enable</strong> the Pocket.</p><p>2. Give the Pocket a memorable <strong>Name</strong> and:</p><ul><li><strong>Body</strong> - paste Google Tag Manager code from part one</li><li><strong>Page</strong> - select <strong>(All)</strong></li><li><strong>Location</strong> - select <strong>Head</strong></li><li><strong>Repeat</strong> - select <strong>Before</strong></li></ul><p>3. Click <strong>Save</strong>.</p><h3 data-id="second-pocket">Second Pocket</h3><p>The Pocket houses the secondary Google Tag Manager code for the Content area. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png" alt="GTM code-nonFoundation 2.png" height="461" width="678" loading="lazy" data-display-size="large" data-float="none" srcset="https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=10/https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png 10w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=300/https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png 300w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png 800w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1200/https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png 1200w, https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=1600/https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png 1600w, https://us.v-cdn.net/6030677/uploads/M6T4UAOL6C3C/gtm-code-nonfoundation-2.png"></img></a> </div> </div> <p>1. Slide the toggle to the right to <strong>enable</strong> the Pocket.</p><p>2. Give the Pocket a memorable <strong>Name</strong> and:</p><ul><li><strong>Body</strong> - paste Google Tag Manager code from part two</li><li><strong>Page</strong> - select <strong>(All)</strong></li><li><strong>Location</strong> - select <strong>Content</strong></li><li><strong>Repeat</strong> - select <strong>Before</strong></li></ul><p>3. Click <strong>Save</strong>.</p><h2 data-id="add-universal-analytics">Add Universal Analytics</h2><p>Now you're ready to add Google <em>Universal Analytics</em> tags in your Google Tag Manager.</p><ul><li>To do this, see <a href="https://support.google.com/tagmanager/answer/6107124?hl=en" rel="nofollow noreferrer ugc">Deploy Universal Analytics with Tag Manager</a>.</li></ul> </article> </main>