Counting button clicks

[sujani_koya]

Hi,  I need to count the number of clicks on a button and store that value in a cookie.  Tried to use the jQuery ClickHandler extension but cannot manipulate cookies directly through that.  Should I write the code to increase the cookie's value by 1 in the custom js box of this extension or is there any other way? Thanks a lot

0 Kudos

[sujani_koya]

Hi,  I need to count the number of clicks on a button and store that value in a cookie.  Tried to use the jQuery ClickHandler extension but cannot manipulate cookies directly through that.  Should I write the code to increase the cookie's value by 1 in the custom js box of this extension or is there any other way? Thanks a lot

[simon_browning]

Hey @sujani_koya 

I would use the custom option in the jQuery handler to perform this action as you suggested.

Then run the code to read the cookie and increment it by one.

[sujani_koya]

Hi @simon_browning,

I'm using an ClickHandler extension.  You showed an OnHandler extension.  Would that make a difference?
I added the following code in the extension but I'm not able to see the cookie-

if(typeof b["cp.utag_main_no_of_clicks"]=="undefined"||b["cp.utag_main_no_of_clicks"]=="undefined"){
var newval = 1;
}
else{
var oldval = utag.loader.RC( "utag_main").no_of_clicks;
var newval = oldval +1;
}

utag.loader.SC("utag_main", {"no_of_clicks": newval+";exp-session"});

According to a post this does not create or change hte value of the cookie - it just changes the value of the variable.   Persist Data Values is the only extension that can create a cookie but it is fired on page load.  This code runs each time the button is clicked.   So either the PDV extension should run on page exit or there should be some means of making the variable newval retain its value in the next page.  

Will be grateful for any solutions

[dsavvy · Accepted solution]

So on click do a check if cookie exists.

If not create cookie with value 1.
If cookie exists, grab value and add 1 and then update cookie

Here is a simple code you can use, but you may need to adapt it to your own uses

jQuery("#mybuttonid").on("click", function(){
if (document.cookie.indexOf('button_click') == -1 ) {
let num = 1
document.cookie = "button_click="+num+"; expires=Thu, 18 Dec 2023 12:00:00 UTC";
}else{
let num = getCookie("button_click");
num++;
document.cookie = "button_click="+ num++ +"; expires=Thu, 18 Dec 2023 12:00:00 UTC";
}
});

I would also put some Cookie functions in the extension way up the top to load before anything else so you can call upon them when you need too.

There are many cookie functions out there, but for this one i was using this one

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

You will have issues with itp2 because cookies generated from client side will not live very long.

I would use audience stream to update the values so that it is stored in the datalayer, and you can just reference the datalayer variable when you need it, and take advantage of Tealiums stitcthing ability, you can also use localstorage, but this also has issues with itp2.

Hope this helps.