Adding GDPR Tracking Consent Banners to External Websites

Tip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article.

Regarding Consent Banners

Lead Gen & CRM landing pages have consent banners that allow visitors to provide, deny, or revoke their consent in permitting their information be tracked by the page. This functionality does not extend to websites created outside of Lead Gen & CRM.

As such, for external websites, it is imperative that you set up a function that enables or disables Lead Gen & CRM's tracking code from placing cookies depending on consent or denial of visitors. Code will need to be added to those websites in order for them to remain compliant with the GDPR. 

Note: Constant Contact offers Professional Services to assist with custom coding.

Obtaining Your Tracking ID 

To obtain the necessary tracking code information for use with consent banners on external websites, do the following:

1. Click    User Menu > Settings in the top toolbar.
   
   

    

2. Click Sites, located under Tracking in the left panel.
3. Click the name of the tracked external website.
   
   

    

4. Click the Tracking Code tab.
5. Copy the KOI-######## set domain value from the Tracking Code box.
   
   

    

Hold on to this value. You will need it soon.

Important: You must obtain the KOI value for the callback function to work

Modifying the Callback Function

To modify the callback function for consent banner usage, do the following: 

1. In a text editor, copy-and-paste the following callback script:

   <script>(function () {
         var checkConsent = function () {
           var results = document.cookie.match('(^|;) ?koiCookieConsent=([^;]*)(;|$)');
           if (!results || !results[2]) return;
           return decodeURIComponent(results[2]) === "1";
         };
         var setCookie = function (v) {
           var expires = (new Date((new Date()).getTime() + 324000000000));
           document.cookie = 'koiCookieConsent=' + v + '; expires=' + expires.toUTCString();
         };
         window.runKoiTracking = function () {
           if (window.koiTrackingRan) return;
           if (!checkConsent()) setCookie('1');
           window.koiTrackingRan = true;
           var ss = document.createElement('script');
           ss.type = 'text/javascript'; ss.async = true;
           ss.src = 'https://KOI-ZZZZZZZZ.marketingautomation.services/client/ss.js?ver=1.1.1';
           var scr = document.getElementsByTagName('script')[0];
           scr.parentNode.insertBefore(ss, scr);
         };
         window.removeKoiConsent = function () {
           setCookie('0');
         };
         if (checkConsent()) {
           runKoiTracking();
         }
       })();</script>

2. Replace the koi-ZZZZZZZZ portion of the above callback script with your website's KOI-########set domain value.
3. Copy the modified callback script.
4. Access the HTML settings of your external website.
5. Locate the tracking code in the header of your external website's HTML.
6. Remove the following lines of code from the Lead Gen & CRM tracking code already in the header:

   (function() {
       var ss = document.createElement('script');
       ss.type = 'text/javascript'; ss.async = true;
       ss.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'koi-ZZZZZZZZ.marketingautomation.services/client/ss.js?ver=1.1.1';
       var scr = document.getElementsByTagName('script')[0];
       scr.parentNode.insertBefore(ss, scr);
   })();

7. Paste the modified callback script where you removed the above portion of the tracking code.
8. Save your changes to the external website's HTML settings.

The provided callback script enables the Lead Gen & CRM tracking code to begin tracking if the visitor accepts the site's cookie policy. The script also disables the Lead Gen & CRM tracking code from tracking the visitor if the visitor denies the site's cookie policy.
 

Setting Onclick Event Code for Cookie Banners

Lead Gen & CRM does not provide cookie policy banner code. You will need to obtain this code on your own—either with the help of your developer or by searching online for custom, stock, or template cookie banners. Be aware that some of these online cookie code banners may not allow you to edit their HTML code. Choose your banner carefully and accordingly. In addition, your cookie policy banner code is different from the above tracking code.

That said, Lead Gen & CRM will provide the general code changes you must make to this custom banner. These code changes are necessary so that the Lead Gen & CRM tracking code works with it. This is done by modifying onclick events.

Onclick events can be thought of as the switches that trigger the callback function to tell the Lead Gen & CRM tracking code to either track or not track the visit. To add onclick event code to cookie policy banner buttons, do the following:

1. Access the HTML settings of your external website.
2. Locate the code for your cookie policy banner.
3. Find the Accept button element.
4. Add the following onclick event:

   <button onclick="window.runKoiTracking()">Accept</button> 

5. Find the Deny button element.
6. Add the following onclick event:

   <button onclick="window.removeKoiConsent()">Deny</button>

7. Save the changes to the external website's HTML settings.

Once set, if the visitor clicks the Accept button, the onclick function will call the tracking script and begin tracking the visit for the duration of the session. If the visitor clicks the Deny button, the onclick function will not call the tracking script and the visitor's session will not be tracked.

Questions?