Found this useful? Love this post
6

Setting up hitCallBack using Google Universal Analytics

Google has recently released Universal Analytics. as a closed developer preview public beta. You can create a new web property in Google Analytics to try it out or upgrade your existing Google Analytics account. The tracking code should be calling google-analytics.com/analytics.js as opposed to google-analytics.com/ga.js.

One of the best features for a developer I’ve found so far in my hour of playing around is the ability to have a callback method executed after you’ve sent some data.

The prime case would be when you would track a link as an event. You would use a setTimeout to trigger the clicked link after you’d hoped the event had been sent to Google. No more! You can now use the following piece of javascript utilising the hitCallback function:

var href = "http://www.domsammut.com/";        

ga('send', 'event', {
    'eventCategory' : 'Star Trek',
    'eventAction'   : 'Fire',
    'eventLabel'    : 'Phasers',
    'eventValue'    : 100,
    'hitCallback'   : function () {
        document.location = href;
    }
});

Reference

Additional Reading

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.

Categories

Leave a Reply

Your email address will not be published. Required fields are marked *

Preview Comment

7 Comments

  1. Stuardo Rodríguez
    http://bit.ly/WQJUtY#comment-257

    Stuardo Rodríguez

    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.

    • Dom Sammut
      http://bit.ly/WQJUtY#comment-258

      Dom Sammut

      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

  2. Matthias
    http://bit.ly/WQJUtY#comment-52

    Matthias

    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

    • Dom Sammut
      http://bit.ly/WQJUtY#comment-53

      Dom Sammut

      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 :)

      • Matthias
        http://bit.ly/WQJUtY#comment-54

        Matthias

        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!

  3. Harshil Adesara
    http://bit.ly/WQJUtY#comment-9

    Harshil Adesara

    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?

    • Dom Sammut
      http://bit.ly/WQJUtY#comment-10

      Dom Sammut

      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.

css.php