BASE CMS
Documentation Home
  • Getting Started
  • Content Management
    • Searching for Content
    • Adding and Editing Content
      • Attribution
    • Scheduling
      • Troubleshooting
    • The WYSIWYG Editor
    • Embedding Content
      • Third-party content
      • Images
      • Custom (IFrames)
    • Content Types
      • Contacts
      • Documents & Whitepapers
      • Media Gallery
      • Page
      • Promotion
      • Video
    • Content States
    • Retrieving Deleted Content
    • Taxonomy
    • Media
      • Supported File Types
      • Image Specs
      • Why are my images uploading sideways?
    • Engagement Report
      • How to Access
      • Company Details
      • Content Overview and Share
      • Content Effectiveness
      • Appearances in Categories and Channels
    • Gated Content
      • Wufoo
  • Print Issue Management
    • Publications
      • Updating Magazine/Publication Links & Info
    • Issues
    • Scheduling Content to Magazines
  • Newsletter Management
    • New Framework
      • Newsletter Structure
      • Scheduling Content to Newsletters
      • Previewing Newsletters
      • Modifying Newsletter Templates
      • Adding Newsletter Revisions
      • Campaign Deployment
        • Using BASE for ESP Integration
          • Initial Omeda Requirements
        • Extracting the HTML for deployment
    • Legacy Framework
      • Block Structure
      • Scheduling Content to Newsletters
      • Previewing Newsletters
      • Modifying Newsletter Templates
      • Campaign Deployment
        • Initial Omeda Integration Requirements
        • Extracting the HTML for Deployment
      • Adding Newsletter Revisions
      • Digital Editions
  • Administration
    • Google Tag Manager
      • Adroll Pixel
  • Contract Management
    • Types of Contracts
      • Contributor Agreement
      • Contributor Work-For-Hire
      • Internal
      • Photo Release
      • Work-For-Hire
    • People
Powered by GitBook
On this page
  • General Setup
  • Preview Mode
  • Dragon Form Implementation
  1. Administration

Google Tag Manager

PreviousDigital EditionsNextAdroll Pixel

Last updated 4 years ago

Not everyone will have their own Google Tag Manager account access, this section may not apply to you.

General Setup

  1. To start, you'll need to setup an account by going here:

  2. Enter an account name (primary parent company name) and the container names. The container names will be each individual website.

  3. When your new container first loads, you'll be prompted with the web container installation code snippet. That is what we'll need to sync the site with your new GTM account. If you could, just copy+paste that block of code into this message. You'll do this for each of your new containers/websites.

  4. Now that you have the containers, we can add tags. We'll use this Cookie Consent tag as an example, which looks like this on the websites:

  1. Adding the Cookie Consent Tag:

    1. Click New. Name the tag Cookie Consent.

    2. Select the tag type Custom HTML and add this block of code to the input field:

      • <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
        <script>
        window.addEventListener("load", function(){
        window.cookieconsent.initialise({
          "palette": {
            "popup": {
              "background": "#237afc"
            },
            "button": {
              "background": "#fff",
              "text": "#237afc"
            }
          },
          "theme": "classic",
          "position": "bottom-left",
          "content": {
            "href": "/privacy-policy"
          }
        })});
        </script>
    3. Ignore the "Support document.write" and advanced settings and move down to the triggering.

    4. There should only be one option for triggering, labeled All Pages. Select this option as the trigger.

    5. When you're ready, click Submit in the upper-right corner of the screen to begin publishing your changes. Add details such as a version name and version description, then click Publish.

Preview Mode

  • There's something called Preview Mode which gives you an opportunity to inspect your Tag Manager configuration on your sites to make sure everything behaves as expected.

  • To use it, after selecting Preview Mode, you'll open a new tab in the same browser and go the website you're previewing.

  • At the bottom of the page you'll see a block that shows you the tags that are firing and provide a debug option to see how they interact with the site. It should look something like this:

Until we receive the code snippet for those two containers and add those on our end, you won't see the tags firing properly.

Dragon Form Implementation

Specifically for bottom of channel content pages

Custom HTML can be added with the "All Pages" trigger in Google Tag Manager. See VSP's example below (switch out source urls as needed)

<script type="application/javascript">


// This is currently targeting the idme.newslettr-signup ellemnt
// {"type" : "idme.newsletter-signup"} element would have to me placed in the config for given site and content types
  
  
(function () {
  // define your forms & form variables

    var forms = [
        Recap = {
            src: 'https://securityinfowatch.dragonforms.com/init.do?omedasite=Recap_eNLshort',
            id: 'Recap',
            height: '600px',
            width: '350px',
            targetDivs: [
                'meta[data-bvo-param-section-hierarchy-ids*="60173"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
                'meta[data-bvo-param-section-hierarchy-ids*="60220"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
                'meta[data-bvo-param-section-hierarchy-ids*="60261"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
                'meta[data-bvo-param-section-hierarchy-ids*="60313"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
                'meta[data-bvo-param-section-hierarchy-ids*="60343"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
            ]
        },
        MarketSys = {
            src: 'https://securityinfowatch.dragonforms.com/init.do?omedasite=MarketsSys_eNLshort',
            id: 'MarketSys',
            height: '600px',
            width: '350px',
            targetDivs: [
                'meta[data-bvo-param-section-hierarchy-ids*="60144"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
                'meta[data-bvo-param-section-hierarchy-ids*="60335"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
            ]
        },
        Frontline = {
            src: 'https://securityinfowatch.dragonforms.com/init.do?omedasite=Frontline_eNLshort',
            id: 'Frontline',
            height: '600px',
            width: '350px',
            targetDivs: [
                'meta[data-bvo-param-section-hierarchy-ids*="60111"]:not([data-bvo-param-content-type="company"]) ~ main .block[data-bvo-key="model.display"] .element[data-bvo-type="idme.newsletter-signup"]',
            ]
        }
    ];


    forms.forEach( function(form) {
        var src         = form.src,
            id          = form.id,
            height      = form.height,
            width       = form.width,
            targetDivs  = form.targetDivs;

            targetDivs.forEach( function(target) {
                targetDiv = $(target);
                if (targetDiv.length !== 0) {
                $('.element[data-bvo-type="idme.newsletter-signup"]').after(
                    $('<iframe>', {
                    src: src,
                    id:  id,
                    frameborder: 0,
                    scrolling: 'no',
                    height: height,
                    width: width
                    })
                );
                $('#' + id).wrap('<div>').data('bvo-width', 100).addClass('element');
                $('.element[data-bvo-type="idme.newsletter-signup"]').remove();
                }
            });
    });
}());
</script>

Further documentation on this subject can be found here:

https://support.google.com/tagmanager/?hl=en#topic=3441530
https://tagmanager.google.com/#/home