Google Tag Manager

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

General Setup

To start, you'll need to setup an account by going here: https://tagmanager.google.com/#/home
Enter an account name (primary parent company name) and the container names. The container names will be each individual website.
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.
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:

Adding the Cookie Consent Tag:

Click New. Name the tag Cookie Consent.

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>

Ignore the "Support document.write" and advanced settings and move down to the triggering.
There should only be one option for triggering, labeled All Pages. Select this option as the trigger.
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

PreviousDigital Editions NextAdroll Pixel

Last updated 4 years ago

General Setup

To start, you'll need to setup an account by going here: https://tagmanager.google.com/#/home

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

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.

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:

Adding the Cookie Consent Tag:

Click New. Name the tag Cookie Consent.

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>

Ignore the "Support document.write" and advanced settings and move down to the triggering.
There should only be one option for triggering, labeled All Pages. Select this option as the trigger.
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>