Delay cookie writing until visitor consent is provided

Overview

Because of upcoming ITP requirements, some customers have asked us, if it is possible, to delay the writing of convert cookies until the customer provides consent. This without having flashing or blinking, behind the consent modal. 

Solution for blocking all Cookies

The following script needs to be added to your Project Global Javascript section.

Please adapt the script in the second section to enable Convert's cookie writing after your consent JavaScript event happens. 

if (document.cookie.indexOf('_conv_') == -1 ) {


if(typeof disable_cookies === 'undefined') {
 disable_cookies = true;
}
 
// Store the set and get original functions 
var cookie_setter_orig = document.__lookupSetter__("cookie").bind(document);
var cookie_getter_orig = document.__lookupGetter__("cookie").bind(document);

// Redefine the function to only enable cookies when the switch disable_cookies is true.
Object.defineProperty(document, "cookie", {
 get: function () {
 return cookie_getter_orig();
 },
 set: function (val) {
 // When disable cookies is false then the writing is enabled
 if (!disable_cookies) {
 console.log('Cookies restablished')
 cookie_setter_orig(val);
 }
 },
 configurable: true
});

// Change the click event to any event that you want to enable the cookie writing
convert.$( "#button" ).click(function() {
 console.log('Resetting Cookies');

disable_cookies = false;
 
 // Reload Convert Load Sequence (polling)
 // So the convert cookies can be written

_conv_q = _conv_q || []; 
 _conv_q.push(["run","true"]);
 
});
};

Caveats:

1. The script will not write cookies, before the consent event happens, however it will still send the experiment visitors and conversions to the Convert servers. 
2. If the visitor does not consent, then there will not be cookies written, and if there is an experiment behind the modal a chosen variation will be shown to the visitor. However, if he comes back Convert might show a different variation than the original as there were no cookies written to remember this.

Solution for blocking only Convert Cookies:

console.log('Running Convert Cookie Disabling Code');
if (document.cookie.indexOf('_conv_') == -1 ) {


if(typeof disable_cookies === 'undefined') {
disable_cookies = true;
}

// Store the set and get original functions
var cookie_setter_orig = document.__lookupSetter__("cookie").bind(document);
var cookie_getter_orig = document.__lookupGetter__("cookie").bind(document);

// Redefine the function to only enable cookies when the switch disable_cookies is true.
Object.defineProperty(document, "cookie", {
get: function () {
return cookie_getter_orig();
},
set: function (val) {
// When disable cookies is false then the writing is enabled or when its not a Convert cookie
if (!disable_cookies || !val.includes('_conv')) {
cookie_setter_orig(val);
}
else {
console.log('Convert Cookie Blocked');
}
},
configurable: true
});

// Following example code is to disable the cookie blocking

convert.$( document ).ready(function() {

convert.$( "#button" ).click(function() {

console.log('Resetting Cookies');
disable_cookies = false;

// Reload Convert Load Sequence (polling)
// So the convert cookies can be written

window._conv_q = _conv_q || [];
_conv_q.push(["run","true"]);

});
})

Using a dataLayer Event as a Flag

You can use the following code to do the same using a dataLayer Event as a Flag to enable the cookie writing:

console.log('Running Convert Cookie Disabling Code');
if (document.cookie.indexOf('_conv_') == -1) {
if (typeof disable_cookies === 'undefined') {
disable_cookies = true;
}

// Store the set and get original functions
var cookie_setter_orig = document.__lookupSetter__("cookie").bind(document);
var cookie_getter_orig = document.__lookupGetter__("cookie").bind(document);

// Redefine the function to only enable cookies when the switch disable_cookies is true.
Object.defineProperty(document, "cookie", {
get: function () {
return cookie_getter_orig();
},
set: function (val) {
// When disable cookies is false then the writing is enabled or when its not a Convert cookie
if (!disable_cookies || !val.includes('_conv')) {
cookie_setter_orig(val);
}
else {
console.log('Convert Cookie Blocked');
}
},
configurable: true
});

// Following example code is to disable the cookie blocking
convert.$(document).ready(function () {
setTimeout(() => {
console.log(document.cookie.indexOf('convert_cookie_set'));

if (document.cookie.indexOf('_conv_') == -1 && document.cookie.indexOf('convert_cookie_set') == -1) {
console.log("innerrrr");
function checkForCookie() {
let found = false;
dataLayer.forEach(item => {
if (item.event && item.event === "cookie_consent_statistics") {
found = true;
}
});
return found;
}

(function pollOnload() {
if (checkForCookie()) {
console.log('Resetting Cookies and data-layer-push');
document.cookie = "convert_cookie_set=true";
disable_cookies = false;
window._conv_q = _conv_q || [];
_conv_q.push(["run", "true"]);

Object.entries(convert.currentData.experiments).forEach(([key, value], index) => {
dataLayer.push({
'event': 'convert_cookie_set',
'experiment_id': key,
'variation_name': value.variation_name
});
});
} else {
setTimeout(pollOnload, 200);
}
})();
}
}, 10)

})
}else if(document.cookie.indexOf('convert_cookie_set')){
console.log("else");
setTimeout(()=>{
let pushedDatalayerEvents = dataLayer.filter((e)=>e.event==="convert_cookie_set");
Object.entries(convert.currentData.experiments).forEach(([key, value], index) => {
let isMatched = pushedDatalayerEvents.find((experiments)=> experiments.experiment_id == key)
if(!isMatched){
dataLayer.push({
'event': 'convert_cookie_set',
'experiment_id': key,
'variation_name': value.variation_name
});
}
});
},100);
}