Google Analytics Outbound Link Event Tracking

Question

I'm trying to set up event tracking so that I can track when someone goes to my 'about' page and clicks on a link to my LinkedIn profile. Below is the link that I want tracked. As you can see, i tried to add some code to get tracking working...i went through a few different techniques, but nothing works so far.

This is what I have now:

<a ga('send', 'event', 'outbound', 'click', 'linkedin'); href="http://www.linkedin.com/profile/view?id=110370894&amp;trk=nav_responsive_tab_profile_pic" target="_blank">LinkedIn Page</a>

I'm going to keep reading and plugging away, but any help is appreciated.

I have analytics.js in place. I also implemented code in the header section to give a delay so that the tracking will have time to load, as recommended by this support post:
https://support.google.com/analytics/answer/1136920?hl=en

Also, wondering how this works. Once I get the code right, it will automatically show up in my analytics? under events? or is there something else I have to do?

Sorry ahead of time if this is answered somewhere else, I read a bunch of previous posts but I feel like theres always some bit of info missing that's just keeping me from getting this right.

Answer 1

The problem is that the browser redirects to the new URL before the event has been properly recorded.

There are three common methods:

1. Bad: Insert a small delay before redirecting. This is an unreliable method because the delay required depends on the performance of the network. In a slow network, the event may not be recorded because the browser will switch to the new URL too soon.

2. Better: Add target="_blank" to your <a> element. This will open the link in a new window, and will allow the event to be logged because the old window will stay open.

3. Best: The ga() method allows a callback function to be run immediately after the event has been successfully recorded.

   <script>
   /**
   * Function that tracks a click on an outbound link in Google Analytics.
   * This function takes a valid URL string as an argument, and uses that
   * URL string as the event label.
   */
   var trackOutboundLink = function(url) {
      ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
        function () {
        document.location = url;
        }
      });
   }
   </script>
   

   Usage:

   <a href="http://www.example.com"
      onclick="trackOutboundLink('http://www.example.com'); return false;">
   Check out example.com
   </a>
   

   The code above was copied from this page.

Answer 2

What you have there is correct and your events should show up in Google Analytics under Events. There are two ways to track outbound links:

Quick Method target="_blank" A quick method to track outbound links is to append the target="_blank" attribute. That way, the new page will open in a new window and the current page will have time to track the event.

Alternate method - delay page load First, delay the outbound click by a fraction of a second.

<script type="text/javascript">
function trackOutboundLink(link, category, action, label) { 
try { 
    ga('send', 'event', category, action, label);
} catch(err){}

setTimeout(function() {
    document.location.href = link.href;
}, 100);
}
</script>

Next, revise outbound links to call the new function without first following the link.

<a href="http://www.example.com" onClick="trackOutboundLink(this, 'Outbound Links', 'click', 'example.com'); return false;">

Answer 3

First you need to add The JavaScript tracking snippet.

</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','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXX-Y', 'auto'); //you should definitely change your tracking ID
    ga('send', 'pageview');
</script>

then we write our event function

function handleOutboundLinkClicks(category, action, label) {
   ga('send', 'event', {
   eventCategory: category,
   eventAction: action,
   eventLabel: label
 });
}

Finally we call our function at the place we want

<a onclick="handleOutboundLinkClicks('EVENT CATEGORY' ,'EVENT ACTION' , 'EVENT LABEL' )">CLICK ME</a>