2 Replies Latest reply on Oct 15, 2015 7:29 PM by cihanb3353776

    Click Tracking with jQuery

    cihanb3353776

      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

      • 0. Re: Click Tracking with jQuery
        cihanb3353776 Level 1

        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>

          • 1. Re: Click Tracking with jQuery
            AllDayDev Adobe 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.