Setting up hitCallBack using Google Universal Analytics

Subscribe

You'll only get 1 email per month containing new posts (I hate spam as much as you!). You can opt out at anytime.

7 Comments

1. 

   https://www.domsammut.com/?p=501#comment-257 #

   Stuardo Rodríguez

   August 7, 2014 at 12:04 pm

   Hi! I’m looking for a solution on how to continue a form submit after the ga() call is being done. My code looks like this:

   $("form").on("submit", function (e), {
      e.preventDefault();
     ga('send', 'event', 'Checkout', 'Option', {
         hitCallback: function() {
         // here I should continue doing the form.submit();
     });
   });
   

   I have no idea how to do that.

   Reply ↓
   • 

     https://www.domsammut.com/?p=501#comment-258 #

     Dom Sammut

     August 7, 2014 at 1:17 pm

     Hey Stuardo,

     You can achieve this by doing the following:

     var formSubmittted = false;
     
     $("form").on("submit", function (e) {
         var form = $(this);
         if (formSubmittted === false) {
             e.preventDefault();
             ga('send', 'event', {
                 'eventCategory' : 'Checkout',
                 'eventAction'   : 'Option',
                 'hitCallback'   : function () {
                     formSubmittted = true;
                     form.submit();
                 }
             });
         }
     });
     

     Alternatively, if you’ve got multiple forms on the page you could have an attribute on the form element that is set to false and then changed inside the hitCallback statement:

     HTML

     <form id="test" method="get" action="http://www.google.com" data-submitted="false">
     <!-- form contents -->
     </form>
     

     JavaScript

     $("form").on("submit", function (e) {
         var form = $(this);
         if (form.attr('data-submitted') === 'false') {
             e.preventDefault();
             ga('send', 'event', {
                 'eventCategory' : 'Checkout',
                 'eventAction'   : 'Option',
                 'hitCallback'   : function () {
                     form.attr('data-submitted', 'true')
                     form.submit();
                 }
             });
         }
     });
     

     Let me know how you go.

     Cheers

     Reply ↓
2. 

   https://www.domsammut.com/?p=501#comment-52 #

   Matthias

   March 17, 2014 at 1:50 am

   Hi Dom, thanks for the great summary. I have a question too.

   For a client site we are trying to register a virtual pageview or event with a click to an outgoing link just like in your example. However, we can’t embed the actual document location in the hit callback function – the developers have told me that it’s not possible in our case because of the way their setup works. The URL isn’t actually read from the HTML.

   So what we’ve done is this:

   function GALoginButton() {
       ga('send', 'event', 'Login Page', 'Login', 'Login Button', { 'hitCallback': function () { } }); 
   }
   

   The events I can see in Google Analytics have remained exactly as before the hit callback had been implemented. My question now, do you think the hit callback function can work without an argument? Will the code wait for the hit callback anyway before redirecting to the new URL?

   Many thanks for giving it a think!
   Matthias

   Reply ↓
   • 

     https://www.domsammut.com/?p=501#comment-53 #

     Dom Sammut

     March 17, 2014 at 8:14 am

     Hi Matthias,

     Thanks for your question!

     Will the code wait for the hitCallback before redirecting to the new URL? Without putting any sort of variable or function to execute inside the hitCallback function, or more to the point, prevent your code / HTML that is directing the browser to go to the new URL, then the hitCallback function will have no effect.

     Ideally, depending on your setup, you first need to prevent the action of address change from firing.

     If it’s an anchor tag, something simple like:

     $("a").on("click", function (e), {
        e.preventDefault();
     });
     

     Since you have stipulated you can’t get the URL inside the hitCallback function, you could maybe have a variable that sits outside the function that is set to false, and inside the hitCallback function, set it to true. You could then have a function that checks this variable every 200ms.

     var linkReady = false;
     
     // The DOM element that triggers the event
     $("a").on("click", function (e) {
     
         var theurl = $(this).attr("href");
     
         e.preventDefault();
     
         setInterval(function () {
             if (linkReady === true) {
                 //Trigger the URL here.
                 document.location = theurl;
             }
         }, 200);
     
     });
     
     //The original GA script provided
     function GALoginButton() {
         ga('send', 'event', 'Login Page', 'Login', 'Login Button', {
             'hitCallback': function () {
                 linkReady = true;
             }
         });
     } 
     

     If you have a code example, I can give a better assessment of the best approach, as the one above is a shot in the dark at how your script is possibly setup :)

     Reply ↓
     • 

       https://www.domsammut.com/?p=501#comment-54 #

       Matthias

       March 21, 2014 at 12:02 am

       Hi Dom, thank you so much for your reply and the awesome suggested solution! We will test your approach and I will let you know how it goes. If need be I will check with the devs to explain their implementation a bit more. Many thanks!

       Reply ↓
3. 

   https://www.domsammut.com/?p=501#comment-9 #

   Harshil Adesara

   May 7, 2013 at 5:46 pm

   Hello Dom,
   I have a situation where there are multiple events being fired before the new URL loads.

   For example:

   ga('send', 'event', 'image1', 'some action', );
   ga('send', 'event', 'image2', 'some action', );
   
   var href = "http://www.domsammut.com/";       
   ga('send', 'event', 'image3', 'some action', {
       'hitCallback' : function () {
           document.location = url;
       }
   });
   

   For this snippet, we can ensure that the third event will be fired before the page changes, but how can we ensure that the first two events are fired for sure?

   Reply ↓
   • 

     https://www.domsammut.com/?p=501#comment-10 #

     Dom Sammut

     May 7, 2013 at 6:39 pm

     Hi Harshil,

     Thanks for your great question.

     In your situation you could do the following:

     var url = "http://www.domsammut.com/";
         
     ga("send", "event", "image1", "some action", {
         "hitCallback" : function () {
             //event 1 has successfully fired
             ga("send", "event", "image2", "some action", {
                 "hitCallback" : function () {
                    //event 2 has successfully fired 
                     ga("send", "event", "image3", "some action", {
                         "hitCallback" : function () {
                             //event 3 has successfully fired, now redirect the user
                             document.location = url;
                         }
                     });
                     
                 }
             });
             
         }
     });
     

     By nesting the events inside the “hitCallback” method, it ensures that we only redirect the user once the three events have been successfully sent to Google.

     Reply ↓