CODEWITHSUNDEEP
javascriptjquerygoogle-analytics
NGix
NGix

Reputation: 2662

Google Analytics click event doesn't work

I have the following button on a page:

<a id="DownloadPlatform" href="/some-page-1.html">Download</a>

I want to tight an GA event on button click and redirect to some page. Currently no click events are used for button click. I opened console, pasted code to test events, but I'm getting surprising results I cannot explain. But let's begin with the code first:

_gaq.push(['_trackEvent', 'Downloaded', 'Platform [Web]', window.location.pathname]);

Worked like a charm, I'm getting an event in GA ( in real tracking ). 

$('#DownloadPlatform').click(function(){ 
    _gaq.push(['_trackEvent', 'Downloaded', 'Platform [Web]', window.location.pathname]);   
});

Didn't work! But I was redirected to /some-page-1.html. No errors.

$('#DownloadPlatform').click(function(e){ 
    e.preventDefault(); 
    _gaq.push(['_trackEvent', 'Downloaded', 'Platform [Web]', window.location.pathname]);   
});

It did work! But as expected I wasn't redirected to a page.

$('#DownloadPlatform').click(function(e){ 
    e.preventDefault(); 
    _gaq.push(['_trackEvent', 'Downloaded', 'Platform [Web]', window.location.pathname]); 
    window.location.href='/some-page-2.html';   
});

And finally I was redirected to a page, but GA event wasn't recorded. Could anyone explain such weird behavior, what reasons could be behind?

Upvotes: 2

Views: 2062

Answers (2)

Ryan
Ryan

Reputation: 3926

The problem you're facing is that when you track events with Google Analytics, it needs to send the event to its servers. Because you are also redirecting your page as you track the event, Google Analytics is sometimes getting cut off before it has successfully sent the event.

So it all depends on the network and which happens first; you're server serving the new page or Google receiving the track event.

So how can we fix this?

You might be inclined to send the track event and redirect the page inside a setTimeout but this is a bad idea as first of all you can't be certain that Google has yet received the event. You may then be inclined to set the timeout to be longer but in the end you're just giving your users a bad experience by artificially increasing the page load time.

A viable solution may be to include a special parameter in the URL you're redirecting to and then have the new page look for that parameter and then send the track event.

/some-page-2.html?track=myEventToTrack

Another way would be to use Google Analytics' PHP library and track the events server side, this is obviously creating a lot more work so it's a case of choosing the right solution for your project.

Update (Better solution)

Google now provides a callback for events, the following code provides a more robust and elegant solution.

ga('send', 'event', {
    'eventCategory': 'a',
    'eventAction': 'b',
    'eventLabel': 'c',
    'eventValue': 1,
    'hitCallback': function () {
        document.location = '/foo';
    }
});

Upvotes: 4

AnkDasCo
AnkDasCo

Reputation: 1599

<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}
</script> 
<a href="http://www.somepage.com" onclick=”trackOutboundLink(‘http://www.somepage.com’); return false;">Check out somepage.com</a>

The hitCallback field, which tells Google Analytics when the user interaction is complete. This makes sure that GA collect the interaction data before the user leaves your site. you can also use this one:

ga('send', 'pageview', {
  'page': '/some-page',
  'hitCallback': function() {
    window.location.replace = "[new url]";
  }
});

Hope this helps!!

Ankit

Upvotes: 1

Related Questions