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> watch 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>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><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/PNKU2919OMRB/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PNKU2919OMRB/image.png" alt="image.png" height="209" width="919" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Add the <noscript> portion of the snippet to the Header 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"></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 in:</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"></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"></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"></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>