Adding GDPR Tracking Consent Banners to External Websites

The European Union's new data protection law, the General Data Protection Regulation (GDPR), is meant to protect the data and rights of individuals who are in the European Union and European Economic Area (EU/EEA). 

To remain compliant with the GDPR, you must not begin tracking until a lead accepts your site's cookie policy. While Lead Gen & CRM landing pages have this functionality built into their design, there may come a time when you require to manually refer to and place code that checks for consent.

This article will detail how to address consent tracking measures for websites created outside of Lead Gen & CRM.

---

Article Contents

• Regarding Consent Banners
• Obtaining Your Tracking ID
• Modifying the Callback Function
• Setting Onclick Event Code for Cookie Banners

Available With:

Trial	✓
Essential	✓
Advanced	✓
Ultimate	✓

Toolbar:

Settings

Users:

Administrators	✓
Company Managers
Marketing Managers
Sales Managers
Salespersons
Jr. Salespersons

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.
   
   

   Click to enlarge.

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

   Click to enlarge.

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

   Click to enlarge.

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.