Google Tag Manager & Vanilla Forums - Vanilla Success
<main> <article class="userContent"> <h2 data-id="google-tag-manager-setup">Google Tag Manager Setup</h2><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><p>Setup Google Tag Manager for webpages, by using the <a href="https://support.google.com/tagmanager/answer/6103696?hl=en" rel="nofollow noreferrer ugc">following steps from Google</a> - or watch the video above.</p><h2 data-id="adding-google-tag-manager-to-foundation-theme">Adding Google Tag Manager to Foundation Theme</h2><p>The following applies to Foundation themes and for those looking to measure Google Analytics activity in the Vanilla KB. </p><p>You will have two snippets to add, that you are given by Google. Let's add them now to Vanilla!</p><p>Open Theme Editor - and click the edit button. 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"></img></a> </div> </div> <p>Then add the <noscript> portion of the snippet to the Header 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"></img></a> </div> </div> <p>Of course making sure you have the right GTM code. Make sure to save.</p><p>Next head over to the Technical ->Security tab and ensure you allow Google Analytics traffic to be read. By adding the following in the Content Security Domains</p><pre class="code codeBlock" spellcheck="false" tabindex="0">*.googletagmanager.com *.google-analytics.com </pre><p> It should appear as so:</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"></img></a> </div> </div> <p>Now run debug on your Google Tag manager <a href="https://tagassistant.google.com/" rel="nofollow noreferrer ugc">here</a> to make sure things are working as needed.</p><p><em>Please note: Foundation must be the theme used for mobile theme, otherwise, mobile traffic will not be measured, unless this code is added to the mobile theme separately.</em></p><h2 data-id="adding-google-tag-manager-code-to-non-foundation-theme">Adding Google Tag Manager Code to non-Foundation Theme</h2><p>The following applies only to non-Foundation themes.</p><p>To add the code given to you, you will need to create <strong>two</strong> Pockets, with the <a href="https://success.vanillaforums.com/kb/articles/19-pockets" rel="nofollow noreferrer ugc">Pockets Plugin</a>. </p><p>The <strong>first</strong> Pocket will be for placing 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/937/ECHDDZZ6EBND.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/937/ECHDDZZ6EBND.png" alt="image.png"></img></a> </div> </div> <p>Give the Pocket a memorable name and make sure the following:</p><ul><li>Paste Tag manager code from part one in <em>Body</em></li><li>Page selected is <em>(All)</em></li><li>Location is <em>Head</em></li><li>Repeat is set to <em>Before</em></li></ul><p>Click Save.</p><p>Let's move to the <strong>second</strong> Pocket we will need to create for the secondary Tag Manager code, required 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/463/CW0BASFY5Q81.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/463/CW0BASFY5Q81.png" alt="image.png"></img></a> </div> </div> <p>Give the Pocket a memorable name and make sure the following:</p><ul><li>Paste Tag manager code from part two in <em>Body</em></li><li>Page selected are <em>(All)</em></li><li>Location is <em>Content</em></li><li>Repeat is set to <em>Before</em></li></ul><p>Click Save.</p><p>Enable both Pockets, by toggling the button to the right.</p><p>You are now ready to add additional Google Analytics Tags as needed in your Google Tag Manager. Google has some handy documentation <a href="https://support.google.com/tagmanager/answer/6107124?hl=en" rel="nofollow noreferrer ugc">here</a>.</p> </article> </main>