Contributed by Tanya DaCosta
When we build websites, we want to be able to figure out whether or not people are actually viewing our hard work. Websites that are performing well are doing their jobs, and those that are not can be adjusted to perform better.
The best tool to achieve this is Google Analytics. Google Analytics is a great tool for collecting and displaying data related to how consumers use and navigate your website, and with just a bit of coding experience Analytics can quickly be extended and customized for your website. This tutorial will go through setting custom events with custom dimensions and metrics specific to how users can interact with your website.
To get started, we’re going to outline a scenario in which this tool set would be beneficial. Let’s say we have a video streaming website that users must signup for to watch content. Our homepage displays different video thumbnails that, when clicked, play a short teaser trailer for that video in the user’s browser.
Let’s start off by determining which video our users are most excited about. We can do this by tracking the play count of each video teaser.
Step 1 : Set up an Analytics account for your website
Once you’ve signed up for an account, go the the admin panel. In the admin panel, create an account for the website from the Account drop down. When you’re done, Google will create a property of the same name as the account and provide you with your tracking code.
Step 2 : Load the library necessary for the ‘ga’ command
First, let’s find our website’s unique tracking code. Navigate to the Admin settings (the gear icon), go to “Tracking Info” and find the tracking ID under “Tracking Code”.
Next, let’s add the information to our website so we can start tracking. In the head of our websites’ index, add the following code snippet. Make sure to replace with the unique tracking ID.
Step 3 : Send your first event and see it in action
Recall our scenario, a streaming website with video trailers. Since we’re interested in seeing which video trailers users play on our homepage, and since a trailer is played only after a user clicks on that video’s thumbnail, let’s place a tracker that tells Google Analytics every time one of the video thumbnails is clicked.
All we have to do is send out a custom Google event with the data we want to track. A custom event is sent with parameters eventCategory, eventAction, eventLabel and eventValue. These fields are broken down in the Analytics docs, if you’re interested in learning more.
Let’s focus on required fields eventCategory and eventAction, and use eventLabel and eventId to pass our event-specific data within the event (in this case, the name and id of the video clicked). We will name the event category “Homepage” to describe actions made on the homepage, and call the event action “trailer_play”.
Let’s give it a try by triggering our event. In this case, that would be clicking on a video.
To make sure the event is functioning properly, let’s go to the Google Analytics Portal, and select Real Time Events.
Our view should reflect the action we just triggered on our webpage.
Step 4 : Create a dashboard and some widgets
For this step, we’ll navigate to the Customization panel in the left hand menu. Click on Dashboards, and choose Create Blank Canvas.
Browse the Google dimensions and metrics and play around with the different combinations allowed by the widgets. Metrics are the quantitative values, while dimensions are qualitative values.
Let’s get started with our first widget. Make a table widget with dimension Event Label and metric Total Events, and in order to only show “trailer_play” events, add a filter to Only Show data of event action “trailer_play”.
Ensure that the date range on the top right corner is set to include today’s date. If we’re lucky, the events that we sent over earlier will have already populated your charts (but be patient, data can take a few hours to show up).
Google has some great custom dimensions at our disposal, like Country, Age and other demographic details [ensuring that demographics reporting is enabled for the account] that they collect from global cookies, but what if we want our own qualitative data associated with our events, without having to rely on generic “event Labels” ,“event Values” and “Total events”? That way, our charts would be more specific to the event, more readable and we would not have to worry about filtering our data by our specific event actions.
Let’s make our event action, “Trailer Play”, into its own quantitative metric, and make a dimension for Video Name. And while we are at it, let’s make a custom dimension that describes our users a little more.
Step 5 : Create custom dimensions and metrics
Let’s say that now, instead of just knowing which video trailers get the most action, we are also interested in knowing the types of videos that unregistered users are watching. Along with creating a custom metric that describes the type of action (Trailer Play) and a dimension that will reflect the name of the video played, we will also create a dimension that will let us pass data regarding our user, namely, whether they are registered or not.
In the Google Analytics portal, click on Settings (Gear Icon), Custom Definitions (under Property column), Custom Metrics , and then New Custom Metric.
Let’s name the metric “Trailer Plays”. Now let’s set the scope to “Hit” and the formatting type to “Integer”. Finally, make sure active is checked, and hit Create, then Done.
Now we’ll do the same thing for our custom dimension. First navigate to Settings (Gear Icon), Custom Definitions (under Property column), Custom Dimensions, and then go select New Custom Dimension.
Let’s name the new dimension “Video Name”. Once again, set the scope to “Hit”. Click Create. Create another dimension to describe our users. Let’s name the second dimension “User Status” and this time we’ll set the scope to “User”. Click Create.
Each custom definition is associated with an index number, which we will use when sending our events. View and note these indices for each of our custom metrics and dimensions by navigating to Settings (Gear Icon), Custom Definitions, Custom .
Step 6 : Send an Event with your custom dimensions and metrics
Now let’s go back to our code and rearrange how we are sending our event. We can keep all of our event properties, but lets add in our custom metric and dimensions as well.
Step 7 : Create a widget
Now that we are tracking our event a little more robustly, lets create a chart to display our data visually.
On returning to the Dashboard, notice that this time, when we create a widget, our custom dimensions and metrics will show up in the dimensions and metrics dropdown, which lets us to create a chart displaying exactly what we want.
That’s it! We’ve created customized event tracking in Google Analytics. Now that we’re tracking the actual events occurring on our website, we’ll be able to better manage our content and curate our offerings for our user base.
Finding these tips useful? Make sure to thank our developers and follow Hifyre on Medium to get Dev Tips biweekly. You can also find us on Twitter, Facebook, Instagram, and LinkedIn.
Oh and did we mention, we're hiring? We would love to hear from you.
Top comments (0)