Digital Marketing Blog

Event Tracking for Dummies

Posted by Joana Inch on 9/26/13 3:34 PM

Here are some basic rules to making Event Tracking work for you. You don’t have to be a Developer or even know anything about JavaScript. You just need to follow below steps which require you to slightly amend the script and pass onto your web developer.

Please Note – I will just be covering how to track PDF Downloads here.

Step 1 = Make sure that the Google Analytics Code is correctly placed on your website.

Step 2 = Determine whether you are using the old or the new Analytics code. For example, here is how you can differentiate:

Old Looks like this:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

New looks like this:

<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-XXXXXXXX-X', 'MyDomain.com.au');
ga('send', 'pageview');
</script>

Steps for the Old Analytics code

In Google Chrome, roll your mouse over the PDF on your webpage, right click and then press “Inspect Element”. Your JavaScript for this should look something like this:

&lt;a target="_blank"  href="/ReallyLongFileName.pdf"&gt;My PDF&lt;/a&gt;

//just to describe this for you in short:

The _blank means that the PDF should open in a new tab/window. This actually makes tracking a lot more accurate so leave that as it is.

The rest of the code is quite self-explanatory. ReallyLongFileName.pdf is usually the link to your PDF and > My PDF < is the words that are featured on your website that people can see when they go to click on your PDF.

All you need to do is re-write this code as follows:

&lt;a target="_blank"  href="/ReallyLongFileName.pdf" onclick="_gaq.push(['_trackEvent', 'pdf', 'download', 'myPDF']);"&gt; My PDF &lt;/a&gt;

This means that upon a click of your PDF – there is a Google Analytic Push of Data which will Track Your Event.

You may want to leave everything as it is except change the wording of “MyPDF” to the name of your actual PDF so that when this information appears in Analytics > Content > Events – it makes a whole lot more sense.

Steps for the New Analytics code

Only 1 change to the above method and that is:

Rather than add this code:

<i>onclick="_gaq.push(['_trackEvent', 'pdf', 'download', 'myPDF']);"</i>

//…which is the old way of doing things – you need to change it to this:

<i>onclick="ga('send', 'event', 'pdf', 'download', 'myPDF')</i>

//…so the final code should look like this:

<i>&lt;a target="_blank"  href="/ReallyLongFileName.pdf" onclick="ga('send', 'event', 'pdf', 'download', 'myPDF')</i><i>"&gt; My PDF &lt;/a&gt;</i>

 

So you can either pass this onto your web developer if you’re feeling quite confident about it or if you’re unsure you could take the following extra steps:

Go back into Google Chrome and do the following:

  • Roll over your PDF, right click and choose “Inspect Element”
  • Roll over the highlighted JavaScript and choose “Edit as HTML”
  • Paste your code here
  • Test to make sure there are no broken links and that all looks good on your page
  • Relax! As only you can see this in your own browser and you’re not actually making changes to the website

Next!

  • Pass this code onto the web developer.
  • Once he has made the change – go and test it yourself.
  • You should see Immediate data in Real-Time > Events

Good Luck!

Adwords Qualified Icon 

Topics: Event Tracking, Google analytics, Hat Media, Online Marketing