Google Tag Manager & Vanilla Forums

/* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 120px; height: 28px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# sourceMappingURL=styles.css.map */

Google Tag Manager & Vanilla Forums - Vanilla Success

Google Tag Manager Setup

https://youtu.be/P4suvDuj0kI

Setup Google Tag Manager for webpages, by using the following steps from Google - or watch the video above.

Adding Google Tag Manager to Foundation Theme

The following applies to Foundation themes and for those looking to measure Google Analytics activity in the Vanilla KB.

You will have two snippets to add, that you are given by Google. Let's add them now to Vanilla!

Open Theme Editor - and click the edit button. Add the Javascript code to be placed in the <head> in the Javascript tab,

Then add the <noscript> portion of the snippet to the Header of your Foundation theme

Of course making sure you have the right GTM code. Make sure to save.

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

*.googletagmanager.com
*.google-analytics.com

It should appear as so:

Now run debug on your Google Tag manager here to make sure things are working as needed.

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.

Adding Google Tag Manager Code to non-Foundation Theme

The following applies only to non-Foundation themes.

To add the code given to you, you will need to create two Pockets, with the Pockets Plugin.

The first Pocket will be for placing the Google Tag Manager code for the Head area.

Give the Pocket a memorable name and make sure the following:

Paste Tag manager code from part one in Body
Page selected is (All)
Location is Head
Repeat is set to Before

Click Save.

Let's move to the second Pocket we will need to create for the secondary Tag Manager code, required for the content area.

Give the Pocket a memorable name and make sure the following:

Paste Tag manager code from part two in Body
Page selected are (All)
Location is Content
Repeat is set to Before

Click Save.

Enable both Pockets, by toggling the button to the right.

You are now ready to add additional Google Analytics Tags as needed in your Google Tag Manager. Google has some handy documentation here.