Expand my Community achievements bar.

Applications for the 2024 Adobe Target Community Mentorship Program are open! Click to the right to learn more about participating as either an Aspirant, to professionally level up with a new Certification, or as a Mentor, to share your Adobe Target expertise and inspire through your leadership! Submit your application today.
SOLVED

Click Tracking with jQuery

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 2

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>

View solution in original post

2 Replies

Avatar

Employee

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.

 

Avatar

Correct answer by
Level 2

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>