How to Track Key or Important Events on a Website

Correct use of a web analytics system can optimize and boost your website by many folds. It's not just about counting page views or visitors. On any busy website, there are several important actions and events that occur on a daily basis. And yet, we as a website owner are unaware of these happenings. Some of these events are interactive in nature while others are non-interactive. The following guide will help you learn to track these key events through Google Analytics. One can also integrate goals with event tracking to measure the performance of important conversion funnels present on a website. The key to successful event tracking is to first identify, assert, and shortlist these events which must be tracked. Apart from measuring successes and general performance, event tracking can also be used to improve website's design and layout. I'll give a few real-world examples of event tracking to help you better understand the implementation and its use. Let's get started and learn to track events on a site.

Laptop and a blackboard with analytics graphs

Throughout this tutorial, the event tracking code used in the examples apply to the newest and the latest Global Site Tag (gtag.js) tracking code.

If you're using an older tracking code system, simply replace it with the following tracking code snippet.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-XX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXX-XX');
</script>

Within this code snippet, replace UA-XXXXXXX-XX with your website's Google Analytics property ID.

Event Tracking Reports in Google Analytics

Before we move ahead and implement the actual event tracking code on a website, let's take a look at some of the basic reports to give you some idea about the same.

I'm going to use the event data associated with this very blog as a case study to understand the implementation process in a better way.

Within your Google Analytics dashboard, event reports can be accessed through BEHAVIOR → Events → Overview menu option.

Event categories report in Google Analytics

This basic overview report displays all the configured event categories on a blog. The report also displays the number of events (interactive click actions) occurred for each event category for a given time period.

Let me briefly explain each category to give you a good idea about how you can strategize and create primary event categories for your own website.

RelatedContent - This event category is self-explanatory. On a post page, if a related post (contextual or category/tag based) is shown outside the post content section, it'll fall under this category.
HeaderNav - Links, entries, or options present in the primary navigation menu which is a part of the header falls under this category.
PromotedContent - Posts highlighted on the page which may or may not be related with the current post may fall in this category.
Subscriptions - Again, understanding this one is quite simple! Options for feed subscriptions (RSS or Email), a newsletter subscription, or a podcast subscription are some examples that fall under this category. The first one is what I track on my blog.
FeaturedContent - Within my blog posts, I often feature contextually related posts right within the content text in the form of inline blurbs. These featured posts fall under this category.

Now that I've explained the categories, let me dig in a little deeper to know about different types of click actions being tracked under each category.

You can see some of the records (see image above) of these click actions. Let me give you a fair idea about these click events.

Matched Post: (Post Title) - The very first click action I'm tracking occurs within the related posts section (see image below) which appears at the end of each article.

This entire section falls under the RelatedContent event category. Remember, all the posts' appearing within this section share the same tags associated with the post a visitor is already reading.

Now, whenever a visitor clicks one of the entries of this related post section, it is registered within the Google Analytics account in the following format → Matched Post: Post Title

You can see an example of the same right below on the left side section.

On the left is the related post entry that was clicked and on the right is the post on which this entry appeared. In short, I'm tracking all the related posts' section clicks to assess its performance or shortcomings.
Sidebar Card: (Post Title) - The second group of common elements I'm tracking on the blog are posts listed in a card format (see image below) within the sidebar. These page elements fall under the PromotedContent category.

This promoted content is not contextually-related with the post a visitor is reading on the page at any given time. The entries for this section are pulled randomly and dynamically.

Quite similar to the matched content section click-tracking discussed above, here too we're tracking clicks within the promoted card entries section. Its click event record is registered as → Sidebar Card: Post Title

An example is shown below on the left.

Again, the graphic above is self-explanatory. Left entry denotes the promoted card that was clicked and the right one is the blog post, visitor was reading at that time.
Sidebar Excerpt: (Post Title) - Next comes the PromotedContent category section made of post entries in excerpt format as shown below.

This section too resides in the blog's sidebar and like the card section, this one too is populated dynamically on page load with random entries. None of these entries are contextually-related with the post on which the visitor has landed.

The click events for this section are recorded as Sidebar Excerpt: Post Title within the Google Analytics account.

Once again, an example of the recorded entry for a click in this section is shown below. The second column in this record is added as a secondary dimension.

The first column displays the post title that was clicked by the visitor. The second right-side column is the page where this promoted post appeared as an excerpt within the sidebar.
Inline Blurb - Now this one is quite different from the ones discussed above. As you can see in the image below, a post has been included in the form of a blurb right within the post content body.

These highlighted posts are contextually-related with the content which surround these blurbs. All these handpicked posts fall under the FeaturedContent category.

All the clicks on these featured post blurbs are recorded as Inline Blurb for the event label. You may note that in this case, we're not appending the post title within the event label.

The reason for the same is the unavailability of the capability to dynamically (automatically) fetch the post title of the featured post right within the article body. A manual approach may not be a good fit because these post titles may change in the future.
{Category} Post Archives - Let's see how clicks on the navigation menu are tracked on this blog. These menu entries are divided into two parts.

The first one is the collection of links pointing to the archive pages of the respective category. All these menu options fall under the HeaderNav event category.

The event label for these click events is constructed by prepending the category name to Post Archives. For example, if the posts' category is WordPress, the event label automatically becomes WordPress Post Archives.

An example record is shown below which recorded the click on one of the archive posts' links within the navigation menu.

This record shows (see image above) that the visitor clicked the archive posts' link for the WordPress category. It also shows (on the right side) the page on which the visitor was when he clicked that link.
{Title} Page The second group of links in the navigation menu points to common and essential pages associated with a typical website viz., About page and Contact page.

Once again, all the click event tracking for this group of links fall under the HeaderNav event category.

Event labels for this group of menu clicks are recorded as {Page Title} Page format. For example, if the visitor has clicked the contact web page, it'll be recorded as Contact Page.

Let's quickly see an example of the same explained below with a record of a registered click event.

We can clearly see that the About page was clicked by the visitor when he was on the post mentioned in the right column.
RSS Feed - And last but not the least are the events related to the Subscriptions category. These interactive events are captured on the feed subscription form (see image below) which is a part of the sidebar.

I'm tracking both the RSS feed link and the Feedburner email form. Here, the former element's tracking is explained below.

Event label for the feed link interaction is registered as RSS Feed in the account. Remember, visitor's interaction with the RSS feed link doesn't necessarily means that he has subscribed to the content.

All you can deduce is the visitor's intent. The accurate subscription data can only be analyzed within the respective email service account.

And here, you can see how a visitor clicked the RSS feed link when he was on a specific blog post shown in the right column.

So, this completes the general overview of event tracking system configured on this blog. It can be taken as a baseline or a guide to planning event tracking for your own blog.

The events tracked in the case study discussed above doesn't necessarily to be the same on your blog. Each blog has different page elements and different sections. Therefore, thoroughly audit your blog and make a list of important sections, page elements, and links you want to track.

Group them in the required event categories, their associated actions, and the necessary event labels. Feel free to experiment with your event tracking plan to get what you exactly want in the reports.

Configuration of the Event Tracking Code

And now, let's learn about the implementation of the event tracking code as per our requirements. Once again, I'll use the case study examples given above as a base to explain the tracking code.

But, before moving ahead, let's understand the anatomy and the structure of an event tracking code snippet. Following is the generic event tracking command.

gtag('event', [action], {
     'event_category': [category],
     'event_label': [label],
     'value': [value] // optional
});

Let's quickly go through this command and understand its options and parameters.

[action] - This is a mandatory parameter where you can define the action taken by the visitor while interacting with the page object being tracked. For example, in our case study discussed above, the action taken by the visitors in each scenario is a simple click.

So we can fill the action parameter as 'click' or 'Click'. Suppose you're tracking the play button of a video on the web page. A better action parameter will be 'play' instead of using 'click'.

[category] - Here, you provide the primary event category for a group of events. For example, if you're tracking interactions with embedded videos, simply put them under the 'Videos' category.

Some of the categories used in our case study are 'Subscriptions', 'HeaderNav', and 'RelatedContent'.

[label] - This parameter is extremely important and correct use of the same can give you insightful reports. This parameter is generally used to identify the page object with which the visitor has interacted.

For example, if a visitor is interacting with a video, this parameter can capture the video title, (for example, 'Jurassic World: Fallen Kingdom') to identify it in the Google Analytics reports.

[value] - This is an optional parameter and is generally used in conjunction with goal tracking. In our case study, we've not used this parameter at all. Therefore, we'll skip this parameter for now.

After getting familiar with all the command parameters, let's see how to use it in the web page. Going back to the case study, we can easily deduce that all the interactions we're tracking are basically clicks' on the hyperlinks.

It means that our event tracking code is surely going to work with HTML anchor <a> tag. Here's how to use the event tracking code with the anchor tag.

<a href="..." onclick="gtag('event', [action], { 'event_category': [category], 'event_label': [label], 'value': [value] });">

We'll use the onclick="" attribute of the <a> tag to insert our event tracking code. This attribute is self-explanatory i.e., whenever a visitor will click a link, our event tracking command will execute automatically.

And now, let's see some real-life examples picked from the case study already discussed above.

<!--- Related content section tracking (at the end of posts) --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'RelatedContent', 'event_label': 'Matched Post: <Related Post Title>' });">

<!--- Promoted content tracking (card format in the sidebar) --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'PromotedContent', 'event_label': 'Sidebar Card: <Promoted Post Title>' });">

<!--- Promoted content tracking (excerpt format in the sidebar) --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'PromotedContent', 'event_label': 'Sidebar Excerpt: <Promoted Post Title>' });">

<!--- Featured content tracking (inline blurbs within post content --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'FeaturedContent', 'event_label': 'Inline Blurb' });">

<!--- Posts' archive tracking (within header navigation menu) --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'HeaderNav', 'event_label': '<Category> Post Archives' });">

<!--- Key static pages tracking (within header navigation menu) --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'HeaderNav', 'event_label': '<Title> Page' });">

<!--- RSS feed link tracking (within the sidebar) --->
<a href="..." onclick="gtag('event', 'click', { 'event_category': 'Subscriptions', 'event_label': 'RSS Feed' });">

Let's quickly analyze the event tracking commands shown above and relate them with the case study examples already discussed in the previous section of this post.

Because all of the events are just the clicks on the hyperlinks, the [action] parameter is set to 'click' for every tracking code instance.

Next comes the event categories. We supply the category name after the 'event_category' predefined string which should be kept unchanged.

You can see all the same event category names we discussed in our case study viz., RelatedContent, PromotedContent, FeaturedContent, HeaderNav, and Subscriptions.

And last but not the least is the all-important event label parameter that describes the triggered event in a human-friendly format. Keep the 'event_label' predefined string intact.

Now, I'll ask you to pay attention to how the event labels are formatted in our examples.

Following are the event labels that need your attention.

'Matched Post: <Related Post Title>' : Here, the string Matched Post: is static in nature and is supplied at the time of configuring the event tracking code.

And, the string <Related Post Title> appended to the static text is in fact a code snippet (see image above) to fetch the post title of the object that was clicked by the visitor.

The code snippet used here depends on the CMS or a plugin you're using for your blog.
'Sidebar Card: <Promoted Post Title>' : In this case, Sidebar Card: is the static part of the event label and <Promoted Post Title> is the dynamic part which is a code snippet that fetches the post title on page load and appends it to the static part of the event description.
'Sidebar Excerpt: <Promoted Post Title>' : Here, Sidebar Excerpt: is the part that remains unchanged and once again <Promoted Post Title> is the dynamic part appended through a code snippet.

Essential Guidelines for Creating Event Labels

1. Make the event label descriptive such that each tracked page object can be distinctly identified in the Google Analytics reports.

2. While crafting event labels for your own site, you have to find or build the code snippet to populate the dynamic part of the description i.e., the title of the object being tracked.

3. If you struggle to add a code snippet (wherever required) for the event label, hire a developer for the same. It's not a huge task so you can get it done by a professional in a little budget.

4. Another option is to remove the dynamic part of the event label. In such case, you will only be able to get the count of visitors' interaction with the respective page object. In other words, you won't be able to find which specific objects were actually clicked.

Another page object I'm tracking on the blog is the email subscription form. So, let's see how to track a web form. It can be a contact form, a survey form, an email capturing form, or just about any web form on the web page.

There are two different ways event tracking code can be applied to a web form. The first approach is to track the submit button of the web form. Here's a skeleton code for the same.

<input type="submit" value="Submit" onclick="gtag(...);">

If you're doing extensive web form validation, this approach may not be a good choice because a click action on the submit button will register the event even if the data is not submitted due to invalid input in one or more fields.

The second approach is much better than the first one and rely on the onsubmit="" attribute of the <form> HTML tag. Here's a sample code for the same.

<!--- Event tracking via onsubmit="" attribute of the web form --->
<form action="..." method="post" onsubmit="gtag(...);">

<!--- Web form event tracking code implemented on this blog --->
<form action="..." method="post" onsubmit="gtag('event', 'click', { 'event_category': 'Subscriptions', 'event_label': 'Feedburner Email' });">

The second tracking code example mentioned above is the one implemented on this blog. Here, Subscriptions is the event category and Feedburner Email is the event label.

The advantage of this approach is that the event is registered on the activation of form data submission process. This essentially means that the input fields are already in a validated state.

So, this completes the basic event tracking guide for websites and blogs. Compile your own list of events you want to track and get started today.