I want to track image or button which one is clicked the most on the page.
I am choosing A/B..N Campaign
Creating one experience and HTML Offer; inside the html offer is like this:(getting ids of the image and the button )
<head>
<script>
jQuery("img#INGimgTest").onclick = function(){advMXClick("image_click");};
jQuery("img#INGbtnTest").onclick = function(){advMXClick("button_click");};
var advMXClick = function(tag) {
var sendMbox = function(name, value) {
var d = document.createElement('div');
d.style.display = "none";
document.body.appendChild(d);
mboxDefine(d, name, "clickPosition=" + value);
var mboxes = mboxFactoryDefault.getMboxes();
for(var i = 0; i < mboxes.length; i++) {
var Q = mboxes.F[i];
Q.setFetcher(new mboxAjaxFetcher());
Q.finalize(); }
});
mboxUpdate(name, "clickPosition=" + (value||"click"));
};
sendMbox(tag);
};
</script>
</head>
Then I am adding two success metrics 1-) click from ImgClick Test 2-) click from BtnClick Test
Choosing conversion as the mbox name(IngClickTest) on the page
HTML page code is like this:
<head>
<script src="http://www.elisimisatiyorum.com/tt/mbox.js" type="text/javascript"></script>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div onclick="document.location.href='anasayfa.htm'" style="cursor:pointer; color:fff;">
<img src="kus.jpg" alt="" id="INGimgTest">
</div>
<div onclick="document.location.href='anasayfa.htm'" style="cursor:pointer; color:fff;">
<img src="button.png" alt="" id="INGbtnTest" >
</div>
<script type="text/javascript">
mboxCreate('IngClickTest');
</script>
</body>
</html>
It should work but clicking the image doesn't trigger the html offer and i don't know what is wrong here.
Regards
Cihan
Solved! Go to Solution.
Views
Replies
Total Likes
Thank you for your reply. It is solved.
Working code is here:
<script type="text/javascript">// <![CDATA[
var advMXClick = function(tag) {
var sendMbox = function(name, value) {
var d = document.createElement('div');
d.style.display = "none";
document.body.appendChild(d);
mboxDefine(d,name, "clickPosition=" + value);
var mboxes = mboxFactoryDefault.getMboxes();
for(var i = 0; i < mboxes.length; i++) {
var Q = mboxes.F[i];
Q.setFetcher(new mboxAjaxFetcher());
Q.finalize();
}
mboxUpdate(name, "clickPosition=" + (value||"click"));
};
sendMbox(tag);
};
var clickbeforea = true;
$(document).ready(function() {
$("body").on("click",".imgClick",function(ev) {
if(clickbeforea) {
alert("clicked to image or the button we are separating which one here. :)");
if($(ev.target).hasClass("btnClick")) {
// mbox code for a click a click
advMXClick('button_click');
alert("a clicked");
} else {
//mbox code for image click
advMXClick('image_click');
alert("img clicked");
}
} else {
clickbeforea =true;//release clickbeforea
}
});
$("body").on("click",".btnClick",function(ev) {
if(clickbeforea) {
alert("buton clicked");
//mbox code for <a> click
advMXClick('button_click');
clickbeforea = false; //first <a>
} else {
clickbeforea = true;
}
});
});
// ]]></script>
Views
Replies
Total Likes
Looks like your JavaScript is placed wrong. It's in the <head>, which means any execution calls in that <script> tag will run immediately.
With your script, you are clearly trying to use jQuery to target a specific <div> and <img>. In the sequence of how this page would load in a browser, having the script in the <head> means the <body> hasn't even begun to load yet when you're trying to attach the event handlers.
You should move at least the two jQuery commands (if not all of the JS you currently have in the <head>) to the bottom of the page (before the </body> closing tag). e.g. where you are calling the mboxCreate() function
If you're still having issues with this, can you post a link to the web page where you're having issues?
If it's not public (e.g. intranet site), then please attach the full code of the page in question as a text attachment to your next reply.
It's far more effective to debug code in context.
Views
Replies
Total Likes
Thank you for your reply. It is solved.
Working code is here:
<script type="text/javascript">// <![CDATA[
var advMXClick = function(tag) {
var sendMbox = function(name, value) {
var d = document.createElement('div');
d.style.display = "none";
document.body.appendChild(d);
mboxDefine(d,name, "clickPosition=" + value);
var mboxes = mboxFactoryDefault.getMboxes();
for(var i = 0; i < mboxes.length; i++) {
var Q = mboxes.F[i];
Q.setFetcher(new mboxAjaxFetcher());
Q.finalize();
}
mboxUpdate(name, "clickPosition=" + (value||"click"));
};
sendMbox(tag);
};
var clickbeforea = true;
$(document).ready(function() {
$("body").on("click",".imgClick",function(ev) {
if(clickbeforea) {
alert("clicked to image or the button we are separating which one here. :)");
if($(ev.target).hasClass("btnClick")) {
// mbox code for a click a click
advMXClick('button_click');
alert("a clicked");
} else {
//mbox code for image click
advMXClick('image_click');
alert("img clicked");
}
} else {
clickbeforea =true;//release clickbeforea
}
});
$("body").on("click",".btnClick",function(ev) {
if(clickbeforea) {
alert("buton clicked");
//mbox code for <a> click
advMXClick('button_click');
clickbeforea = false; //first <a>
} else {
clickbeforea = true;
}
});
});
// ]]></script>
Views
Replies
Total Likes
Views
Likes
Replies