Click Tracking with jQuery

Avatar

cihanb3353776

15-10-2015

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

cihanb3353776

15-10-2015

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>

Answers (1)

Answers (1)

Avatar

AllDayDev

Employee

15-10-2015

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.