Target Prehide Snippet Implementation via event listener to manage cookie consent | Community
Skip to main content
A
Akash_Awasthi1
Level 2
July 8, 2022
Solved

Target Prehide Snippet Implementation via event listener to manage cookie consent

  • July 8, 2022
  • 1 reply
  • 2117 views

Dear All,

 

I want to understand whether it is a good practice to add prehide snippet on the page only when we have consent from the user.

 

In my case if we add event listener (for checking the cookie consent )for prehide snippet and load it when we have collected the response from the user, we face flicker issues and the original intent of placing prehide snippet is not achieved.

 

If we use prehide snippet without collecting consent from the user , we are able to fix flicker issue.

 

PS- We are taking consent for loading target and analytics calls , this question is specific to only prehide snippet.

 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Gaureshk_Kodag

    Hey @akash_awasthi1 

    You don't need to take consent for a pre-hiding snippet, however, you should add this snippet only after the user gives consent otherwise it'll hide your page for 3 seconds every time a user loads the page (if he hasn't given consent)

     

    we were having the same issue and the below code worked for us. Hope this helps you too

     

    (function(win, doc, style, timeout) {
    var STYLE_ID = 'at-body-style';

    function getParent() {
    return doc.getElementsByTagName('head')[0];
    }

    function addStyle(parent, id, def) {
    if (!parent) {
    return;
    }

    var style = doc.createElement('style');
    style.id = id;
    style.innerHTML = def;
    parent.appendChild(style);
    }

    function removeStyle(parent, id) {
    if (!parent) {
    return;
    }

    var style = doc.getElementById(id);

    if (!style) {
    return;
    }

    parent.removeChild(style);
    }

    function initFunc() {
    addStyle(getParent(), STYLE_ID, style);
    setTimeout(function() {
    removeStyle(getParent(), STYLE_ID);
    }, timeout);
    }
    window.addEventListener("oneTrustCookieAccepted", function(evt) {
    if(evt.detail.targeting){
    initFunc()
    }
    }, false);

    function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }

    var cookieCheck = getCookie("OptanonConsent");;
    if(cookieCheck){
    if(cookieCheck.indexOf("C0004%3A1") > 0 ){
    initFunc()
    }
    }

    }(window, document, "body {opacity: 0 !important}", 3000));

    1 reply

    Perrin_Ennen
    Community Advisor
    Perrin_EnnenCommunity Advisor
    Community Advisor
    July 8, 2022

    Basically you need a pre-hiding snippet if Target is loaded asynchronously. If this is the case then always use a pre-hiding snippet if the user has already agreed to the cookies.
    In case the user has not yet given consent - do not use a pre-hiding snippet. Wait for the event when consent is given. Then there are two options. Target will be loaded (here it depends on the page and how it is manipulated with Target - whether the user sees the "transition" or not - or you come up with something) or the page will be reloaded.

     

    I personally don't find a page reload that elegant. But of course it depends on the website how the components were build.

      A
      Akash_Awasthi1Author
      Level 2
      July 8, 2022

      There are two cases if I get into the details -

       

      1) We are definitely taking the consent from the user for dropping target cookies via launch . But if  additionally apply the same condition on the prehide snippet (which is placed on web page above launch script ) we see the flicker . May be because of the time the response is being captured and the time page is loaded.

       

      2) In the case where do not take consent for prehide snippet and only take consent for target cookies (via launch) , we don't see a flicker.

       

      So we wanted to understand from compliance perspective that is it mandatory to take cookie consent c for prehide snippet as well as it has nothing to do with data collection or personalization directly . It is just a pre requisite to solve flicker issue .

       

      Please correct me if I am wrong anywhere.

       

      Thank you for your help:)  

        Gaureshk_Kodag
        Adobe Employee
        Gaureshk_KodagAdobe EmployeeAccepted solution
        Adobe Employee
        July 11, 2022

        Hey @akash_awasthi1 

        You don't need to take consent for a pre-hiding snippet, however, you should add this snippet only after the user gives consent otherwise it'll hide your page for 3 seconds every time a user loads the page (if he hasn't given consent)

         

        we were having the same issue and the below code worked for us. Hope this helps you too

         

        (function(win, doc, style, timeout) {
        var STYLE_ID = 'at-body-style';

        function getParent() {
        return doc.getElementsByTagName('head')[0];
        }

        function addStyle(parent, id, def) {
        if (!parent) {
        return;
        }

        var style = doc.createElement('style');
        style.id = id;
        style.innerHTML = def;
        parent.appendChild(style);
        }

        function removeStyle(parent, id) {
        if (!parent) {
        return;
        }

        var style = doc.getElementById(id);

        if (!style) {
        return;
        }

        parent.removeChild(style);
        }

        function initFunc() {
        addStyle(getParent(), STYLE_ID, style);
        setTimeout(function() {
        removeStyle(getParent(), STYLE_ID);
        }, timeout);
        }
        window.addEventListener("oneTrustCookieAccepted", function(evt) {
        if(evt.detail.targeting){
        initFunc()
        }
        }, false);

        function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
        }

        var cookieCheck = getCookie("OptanonConsent");;
        if(cookieCheck){
        if(cookieCheck.indexOf("C0004%3A1") > 0 ){
        initFunc()
        }
        }

        }(window, document, "body {opacity: 0 !important}", 3000));

          Terms & ConditionsAccessibility statement

          Loading footer...