Lee Willis

Autotrack for Google Analytics

| 0 comments

If you’re in the web industry, you’re pretty much guaranteed to have heard of Google Analytics. It’s the de-facto standard in analysing user behaviour on websites. On any site you put together – it’s likely that you’ll set it up.

When you set up a site in the Google Analytics web interface you get a copy and paste snippet of code which gets you going in no time. This snippet links your website to the account you’ve set up in Google Analytics, and tracks each page that’s viewed on your site.

For many people this is everything that’s needed.

screenshot-2016-10-12-21-16-31

However, Google Analytics can be used for so much more. You can use it to track anything you want using event tracking (user clicked on call-to-action button, user downloaded PDF etc.), or by providing richer context about page views (this was a logged in user etc.). Here’s some of the things I’ve used Google Analytics to track in past projects:

  • On a site with a multi-field search (E.g. country, market sector, and keyword) track which of the fields were provided for each search, e.g. “Country Search”, “Country & market search”, “Keyword only search” etc.
  • Track events according to which adverts users were shown
  • Track custom events when people follow certain on-page nav elements

Historically I’ve used custom javascript to do this. Google provide good API documentation and the amount of code required isn’t normally significant.

Being familiar with what you can do with Google Analytics, on my new hill-walk blogging service I had a list of things I wanted to track. One of the things I wanted to track was selected external links. This can always be a bit hit and miss as there’s no guarantee that the tracking will fire before the browser navigates on to the clicked page.

So off I went to do a bit of research on the best way to handle the issue.

Tip: Even if you *know* how to solve a problem, have a quick check. Technology moves fast and there might be a better / easier way today than there was yesterday…

In my travels I came across the “autotrack” library by the Google Analytics team.

The library describes its capabilities (my emphasis):

Provides default tracking for the interactions most people care about, and it provides several convenience features (e.g. declarative event tracking) to make it easier than ever to understand how people are using your site.

The interesting bit for me was the nod to “declarative event tracking”. This basically means that you can have Google Analytics track events without writing and javascript, just by marking up your HTML. Here’s some example markup:

<a href="#" ga-on="click" ga-event-category="AdClick"
   ga-event-action="Ad category 1" ga-event-label="Seller one">
    <img src="https://placehold.it/100x100">
</a>

With the autotrack library installed, this will automatically take care of tracking a click when the link is clicked. The library takes care of using the best API for the visitors browser to maximise the chances of outbound links getting tracked.

Simples…

The even better news is that everything we’ve talked about here is just one of the features available (via the eventTracker plugin for autotrack). The library also includes a variety of other plugins covering tasks such as cleaning up tracked URLS, visibility tracking, media query tracking, and page visibility tracking plus more.

Next time you need custom analytics – be sure to check out the Autotrack library.

  1. Stuff I’ve used
  2. Error tracking with Sentry
  3. Autotrack for Google Analytics
  4. WordPress performance tracking with Time-stack
  5. Enforce user password strength
  6. WYSIWYG with Summernote
  7. Backing up your Laravel app
  8. Adding Google Maps to your Laravel application
  9. Activity logging in Laravel
  10. Image handling in PHP with Intervention Image
  11. Testing Laravel emails with MailThief
  12. Assessing software health
  13. IP Geolocation with MaxMind’s GeoLite2
  14. Uptime monitoring with Uptime Robot
  15. Product tours with Hopscotch
  16. Background processing for WordPress
  17. Using oEmbed resources in Laravel

Leave a Reply

Required fields are marked *.