Target Prehide Snippet Implementation via event listener to manage cookie consent

[Akash_Awasthi1]

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.

[Perrin_Ennen]

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.

[Akash_Awasthi1]

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 · Accepted solution]

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));

[Akash_Awasthi1]

Thank you @Gaureshk_Kodag .

I will get it implemented and share the my observations here. Thanks again