First of all, if you’re not using Google Analytics, get on over here and setup a free account. Your Google Analytics code snippet should look like this:
What’s this onclick Tracking stuff?
Onclick Tracking is already built into your Google Analytics account, we just need to hook it up to your website. It’s got a lot of benefits, for tracking downloads, specific button clicks (such as how many people click your Logo instead of Home), and other data you may wish to track such as new launches and promotions. It works by placing a small specific piece of code on the links you’d like to track – when they’re (you guessed it) – clicked. To integrate your onclick tracking, make sure your Analytics snippet (above) has this piece of code:
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
- Observables and Async Pipe
- Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
That went smoothly, check your email.
The trackPageview function sets the account up for pushing event data to your Google Analytics account.
So where do we use it? And how? The easiest way to integrate your onclick functionality is inside a hyperlink. You’ll need to pay special attention to the wording you place inside your onclick functions though, as this feeds directly back into Google Analytics and starts churning out results.
onclick="_gaq.push(['_trackEvent', '', '', '']);"
<a href="/downloads/CVDownload.zip" class="download" onclick="_gaq.push(['_trackEvent', 'Click', 'CV Pack Download', 'CV Zip Downloads']);">Download</a>
You’ll notice I’ve populated the end fields (quotations) with the Events that will be pushed back to my Google Analytics account. The sequence is as follows:
Click, CV Pack Download, CV Zip Downloads.
Which really means:
Category, Action, and followed by an Optional Label.
Copy this snippet of code and use it on any of your hyperlinks:
<a href="" onclick="_gaq.push(['_trackEvent', 'Category', 'Action', 'Extra Label if you like!']);">Click here!</a>
To access the data inside your Analytics Dashboard, simply hit the sidebar tab ‘Content’ followed by ‘Events’ then ‘Overview’, and you can check out the data you’re collecting with your onclick events there, by Event Category, Action or Label. It’s good to put all Clicks inside one category, to stack them up against each other to see which is getting more attention and which isn’t. You’ll notice that Google Analytics automatically takes care of any outbound link-click tracking too.