Using Google Tag Manager with Vanilla Forums

* { padding: 0; margin: 0; box-sizing: border-box; transition: opacity .3s ease-in-out,color .3s ease-in-out; transition-delay: 0; } .footer { background: #2B2B2B; color: #909090; font-size: 14px; line-height: 1.5; padding: 28px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #fff; opacity: 0.8; } .footer a:hover { color: #fff; opacity: 1; } .footer a * { color: inherit; } .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; flex: 1; } .footer-col-logo { justify-content: flex-start; } .footer-col-copyright, .footer-col-logo { display: flex; } .logo { width: 120px; height: 36px; color: inherit; } .social-links { display: flex; flex-wrap: wrap; align-items: center; } .social-link-item { flex: 1; list-style: none; color: white; } .social-link-item a { padding: 0 12px; display: inline-block; } .social-link-icon { height: 36px; width: 36px; } @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 { margin-top: 6px; margin-bottom: 18px; } .footer-col-copyright, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } .social-links { justify-content: center; } .social-link-item { display: flex; align-items: center; justify-content: center; } } /*# sourceMappingURL=styles.css.map */

Using Google Tag Manager with Vanilla Forums - Vanilla Success

Requirements

Getting started with Google Tag Manager in Vanilla requires the use of the Pockets Plugin.

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 Code to Vanilla Forums

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 now additional Google Analytics Tags as needed to your Google Tag Manager. Google has some handy documentation here.