Using Google Analytics to track clicks

Question

Very simple scenario: I simply wish to track, using google analytics, every instance that a visitor of my site clicks on a link to an external website. I've done this using event tracking to the best of my understanding, but when I then click on the link, I don't see any tracking in the google analytics report.

I'm wondering if: (a) there is something wrong with my code; (b) I'm not looking in the right place in my google analytics account; (c) both

Below is my entire page in its entirety, subsitituting 111111111 for the actual account id:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <body>
        <script>
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-1111111111-1', 'mysite.com');
            ga('send', 'pageview');
        </script>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-1111111111-1']);
            _gaq.push(['_trackPageview']);

            (function () {
                var ga = document.createElement('script');
                ga.type = 'text/javascript';
                ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ga, s);
            })();
        </script> <a target="_blank" onClick="_gaq.push(['_trackEvent', 'Links', 'Click', 'CNN']);"
        href="http://www.cnn.com">CNN</a>
        <br/>
    </body>

</html>

The start of your problems would be that you mix two different versions of analytics code (look up the difference between ga.js and analytics.js). — Eike Pierstorff

Thomas Orozco Thomas Orozco · Accepted Answer · 2013-08-28T07:44:56

There are few things wrong with your code:

Analytics version

You're mixing up the old ga.js and the newer analytics.js

Just use only the newer analytics.js

Race condition

You're tracking the event onClick, but at this point, the browser's already leaving the page and the request may not go through.

Basically, opening cnn.com and submitting the event are competing in the browser window.

Use a hit callback, and set window.location.href, and you'll be fine:

ga('send', 'event', {
  'eventCategory': 'Links',
  'eventAction': 'Click',
  'hitCallback': function() {
    window.location.href = "http://www.cnn.com";
  }
});

This way, the browser will wait for the event to be submitted, and then access cnn.com.

Using Google Analytics to track clicks

1 Answers

Analytics version

Race condition