Wrapping tags both inside and outside of Google Tag Manger at the same time

[ProductTeam]

On occasion you may need to hard-code a tag on a page, rather than through Google Tag Manager (GTM). When this is required, you will likely still need this tag to fire upon consent.

This document covers how to:

• Wrap certain tags in GTM using firing triggers; and at the same time,
• Wrap hard-coded tags on a page directly, ensuring they will be behind the consent wall. This document walks through this process with a focus on category level consent.

Notes:

• These instructions assume a general knowledge of GTM and require a pre-existing tag in GTM. See UCP Google Tag Manager Support Guide for Category and Vendor Level Support for more information.
• Tag triggers will still be applied, and you will still need to apply triggers for All Categories or All Vendors to every tag firing within GTM. The tags will look something like this once you've applied triggers:
  
  Example of tags with triggers

Once you have your tags and triggers configured in GTM, perform the following steps:

1. In GTM, replace the code within the Evidon consent tag with the following code:
   
   Note: You'll need to replace the XXXX at the bottom of the code block with your unique company ID.
   
   

   <script type="text/javascript"> 
   
       (function (id) { 
   
           function append(scriptid, url, async) { 
   
               var d = document, sn = 'script', f = d.getElementsByTagName(sn)[0]; 
   
               if (!f) f = d.head; 
   
               var s = d.createElement(sn); 
   
               s.async = async; 
   
               s.id = scriptid; 
   
               s.src=url; 
   
               s.charset = 'utf-8'; 
   
               f.parentNode.insertBefore(s, f); 
   
           } 
   
    
   
           function is2parttld(value) { 
   
               var tldindicators = ['co', 'com', 'info', 'web', 'info', 'gov', 'edu', 'biz', 'net', 'org']; 
   
               var countryindicators = ['uk', 'us', 'fr', 'es', 'de', 'at', 'au', 'ae', 'be', 'br', 'ca', 'ch', 'cn', 'co', 'cz', 'dk', 'eg', 'eu', 'fi', 'gb', 'gr', 'hk', 'hr', 'hu', 'ie', 'in', 'jp', 'mx', 'nl', 'no', 'nz', 'pl', 'ro', 'ru', 'se']; 
   
               return (tldindicators.indexOf(value) !== -1 || countryindicators.indexOf(value) !== -1); 
   
           } 
   
    
   
           function getRootDomain() { 
   
               var parts = window.location.hostname.split('.'); 
   
               if (parts.length === 2) rootDomain = parts[0]; 
   
               else if (parts.length > 2) { 
   
                   // see if the next to last value is a common tld 
   
                   var part = parts[parts.length - 2]; 
   
                   if (is2parttld(part)) { 
   
                       rootDomain = parts[parts.length - 3]; // go back one more 
   
                   } 
   
                   else { 
   
                       rootDomain = part; 
   
                   } 
   
               } 
   
    
   
               return rootDomain; 
   
           } 
   
    
   
           if (!window.evidon) window.evidon = {}; 
   
           window.evidon.id = id; 
   
           window.evidon.test = false;  // set to true for non-production testing. 
   
           //window.evidon.userid = ''; 
   
    
   
           var cdn = '//c.evidon.com/', rootDomain = getRootDomain(), noticecdn = cdn + 'sitenotice/'; 
   
           append('evidon-notice', noticecdn + 'evidon-sitenotice-tag.js', false); 
   
           append('evidon-location', cdn + 'geo/country.js', true); 
   
           append('evidon-themes', noticecdn + id + '/snthemes.js', true); 
   
           if (rootDomain) append('evidon-settings', noticecdn + id + '/' + rootDomain + (window.evidon.test ? '/test' : '') + '/settingsV2.js', true); 
   
       })(XXXX); 
   
   </script> ​

2. In your webpage's code, add the following code:
   
   

   <script type="text/javascript"> 
   
   if (!window.evidon) window.evidon = {}; 
   
     
   
   window.evidon.append = function(scriptid, url, async) { 
   
       var d = document, sn = 'script', f = d.getElementsByTagName(sn)[0]; 
   
       if (!f) f = d.head; 
   
       var s = d.createElement(sn); 
   
       s.async = async; 
   
       s.id = scriptid; 
   
       s.src=url; 
   
       s.charset = 'utf-8'; 
   
       f.parentNode.insertBefore(s, f); 
   
   } 
   
    
   
           window.evidon.priorConsentCallback = function (categories, vendors, cookies) { 
   
               // add the tags which need to wait for prior consent 
   
               // here.  This should be all your advertising tags and 
   
               // probably most of your social and tracking tags. 
   
               var handlers = { 
   
                   categories: { 
   
   // your unique categories will be placed here 
   
                   }, 
   
                   vendors: {} 
   
               }; 
   
    
   
   for (var category in categories) { 
   
       if (!categories[category]) continue; 
   
       if (category === 'all') { 
   
           for (var callback in handlers.categories) { 
   
               var handler = window.evidon[handlers.categories[callback]]; 
   
               if (typeof handler === 'function') handler(); 
   
           } 
   
       } 
   
       else { 
   
           var handler = window.evidon[handlers.categories[category]]; 
   
           if (typeof handler === 'function') handler(); 
   
       } 
   
   }			 
   
           }	 
   
   </script> ​

3. Navigate to the Evidon Privacy UI and click Get Site Notice Tag.
   
4. Click the Select Tag Type drop-down, and then select Site Notice Tag. This opens your UCP tag code.
   
   Site Notice Tag option
5. Click the Select Consent Level drop-down, and then select Categories.
   
   Consent Level drop-down and Categories option
6. Scroll down and copy all the data in the categories field.
   
   Categories field data
7. Paste the copied data into the category field of the tag you have on your page. You can identify the proper area by searching “// your unique categories will be placed here” if you used the exact code from above. 
    
   Note: Your category names may differ from the ones in the example below. Ensure the category names here match the category names you put in your window.evidon.handleYourCategoryName function in the previous step.
   
   

                 categories: { 
   
                       'advertising': 'handleAdvertising', 
   
                       'analytics': 'handleAnalytics',  
   
                       'retargeter': 'handleRetargeter', 
   
                       'web ops': 'handleWebOps', 
   
                   } 

8. For each category you wish to wrap a tag in, add a call to that specific category immediately after that portion of the code. Each category call should be written out as:
   

   
   window.evidon.handleYourCategoryName= function(){}  

   For example, if you wanted to wrap a generic Google Analytics tag within the Analytics Category, you would add this after the priorConsentCallback function.

   Note: The sample below will use handleAnalytics.

   In addition, you’ll will need to replace the UA number from GTM with your own GTM tracking number as shown below:
   
   

   window.evidon.handleAnalytics = function () { 
   
    
   
                   window.evidon.append(0, 'https://www.googletagmanager.com/gtag/js?id=UA-120802170-1'); 
   
                   window.dataLayer = window.dataLayer || []; 
   
                   function gtag(){dataLayer.push(arguments);} 
   
                   gtag('js', new Date()); 
   
                   gtag('config', 'UA-120802170-1'); 
   
    
   
   } 

   The tag is now wrapped in the window.evidon.handleAnalytics so that it will fire only when the Analytics Provider toggle is triggered. It will also fire when general consent is granted or when all vendors are enabled or turned off.

   Follow this process for every category you are using, making a category level specific handler and then wrapping the appropriate tags within those functions.

9. The full result means that the unique tag you are putting directly on your page for this exercise should now look like the following example.is. Compare your code and remember your category names and GTM tracking number should be unique to your configuration.
   
   

   <script type="text/javascript"> 
   
   if (!window.evidon) window.evidon = {};  
   
   window.evidon.append = function(scriptid, url, async) { 
   
       var d = document, sn = 'script', f = d.getElementsByTagName(sn)[0]; 
   
       if (!f) f = d.head; 
   
       var s = d.createElement(sn); 
   
       s.async = async; 
   
       s.id = scriptid; 
   
       s.src=url; 
   
       s.charset = 'utf-8'; 
   
       f.parentNode.insertBefore(s, f); 
   
   } 
   
           window.evidon.priorConsentCallback = function (categories, vendors, cookies) { 
   
               // add the tags which need to wait for prior consent 
   
               // here.  This should be all your advertising tags and 
   
               // probably most of your social and tracking tags. 
   
               var handlers = { 
   
                   categories: { 
   
                       'advertising': 'handleAdvertising', 
   
                       'analytics': 'handleAnalytics', 
   
                       'retargeter': 'handleRetargeter', 
   
                       'web ops': 'handleWebOps', 
   
                   }, 
   
                   vendors: {} 
   
               }; 
   
    
   
   for (var category in categories) { 
   
       if (!categories[category]) continue; 
   
       if (category === 'all') { 
   
           for (var callback in handlers.categories) { 
   
               var handler = window.evidon[handlers.categories[callback]]; 
   
               if (typeof handler === 'function') handler(); 
   
           } 
   
       } 
   
       else { 
   
           var handler = window.evidon[handlers.categories[category]]; 
   
           if (typeof handler === 'function') handler(); 
   
       } 
   
   } 
   
    
   
           } 
   
    
   
   window.evidon.handleAnalytics = function () { 
   
    
   
                   window.evidon.append(0, 'https://www.googletagmanager.com/gtag/js?id=UA-120802170-1'); 
   
                   window.dataLayer = window.dataLayer || []; 
   
                   function gtag(){dataLayer.push(arguments);} 
   
                   gtag('js', new Date()); 
   
                   gtag('config', 'UA-120802170-1'); 
   
    
   
   console.log('category worked'); 
   
   } 
   
   </script>