While knowing information about different dimensions and demographics inside Google Analytics, there’s very little out-of-the-box data you can gather from specific elements that exist on a webpage. Elements like buttons, download links or anything else interactive have to be manually accounted for with events.
Note: in order to properly configure events, you will need the ability to edit the website elements which will trigger events.
Note: this process only works for Universal Analytic installs.
When creating an event, keep in mind what category, action, label and value you want to use in order to organize these events.
Only category and action are required in order for the event to function, but I find label just as important. Value can be assigned if, for example, you’re offering different pricing tiers on a product or service, and you need a way to distinguish between call outs that all say the same message.
An example of using the above would be to imagine that on a specific page on a website, there is a download button. This download button is a way for people to view a PDF of some content used in a marketing campaign. The button says “download marketing material”.
With that in mind, the category would be button, the action would be click and the label would be “download marketing material”.
Note: if you’re setting up events for a YouTube video, you’ll need a different guide. The best one I’ve found is from Lunametrics. It’ll require you to install a script instead of writing code yourself.
Here is the base structure for an event in Google’s Universal Analytics script:
ga(‘send’, ’event’, ‘eventCategory’, ‘eventAction’, ‘eventLabel’, ‘eventValue’);
Notice each attribute is contained in a single quote and separated by commas. Using this, you can plug in the category, action, label and value you’ve come up with. If you didn’t have a label or value, those can be omitted from the code. If I were to markup my above example, it would look like this:
ga(‘send’, ‘event’, ‘button’, ‘click’, ‘download marketing material’);
Now that we have that piece, we need to put that code snippet within an onclick event which looks like this:
onclick=”ga(‘send’, ‘event’, ‘button’, ‘click’, ‘download marketing material’);”
Whenever someone clicks on the element that contains this code snippet, the onclick event will fire off the code between the double quotes, which sends event data to the Google Analytics script. The final step is apply this code to our element.
If the element you want to markup already exists, you can edit it within your website code. If you don’t have an element, you’ll need to create one now using HTML. Keeping with the example I’ve been using, I’ll apply what I have to the button on a website.
Before code is applied:
<a href=”/pdfs/marketing-material.pdf” target=”_blank” class=”button”>download marketing material</a>
After code is applied:
<a href=”/pdfs/marketing-material.pdf” target=”_blank” class=”button” onclick=”ga(‘send’, ‘event’, ‘button’, ‘click’, ‘download marketing material’);”>download marketing material</a>
Once you have your code setup, it’s time to test if the code is working. While keeping one browser window open with the web page the event is on, open up a new browser window and go into Google Analytics and navigate to the Real-Time then Events section. Start activating your event with whatever action should trigger it. After a few seconds, in Google Analytics, there should be activity from the events graph.
If you don’t see any activity, make sure to check your Analytics code installation and make sure the view you’re looking at isn’t filtering your IP address. You’ll need to be viewing unfiltered data in order to see this activity. If you’re confused about how to check to see if your data is being filtered, here’s a setup guide for Google Analytics that contains instructions on filtered and unfiltered views.
Still can’t see any activity? The only other conflict I found with events had to do Click Dimensions. Both Click Dimensions and Google Analytics use the name “ga” in their scripts, which can cause conflicts. The solution is changing your Google Analytics script and the event code to match a new name. I picked “gua” as an example.
Your typical Google Universal Analytics tag looks like this, but with a few changes:
<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','gua');
gua('create', 'UA-XXXXXXXX-X', 'auto');
gua('send', 'pageview');
</script>
What once was “ga” is now “gua” to avoid the Click Dimensions conflict. And our new event code has to be changed to match: