Ultimate Guide to Piwik PRO Event Tracking

Published: January 5, 2017 Updated: September 17, 2018 Author Category Product Best Practices, Use cases

Data analytics has so many layers, from pageviews and bounce rates to time spent on page. But aggregated data doesn’t capture the full picture of your visitors’ activity.

Whether you’re running just a medium-size ecommerce site or a multinational enterprise, you want to learn how your guests behave on your websites. Are they reading your blog? Do they like it? Are they clicking on social media buttons? Has anyone watched the tutorial you prepared especially for your prospective customers? Or maybe – what’s more important – what if they aren’t reading your blog posts, what if they put their name and email address into the contact form but didn’t click “send”? This is valuable information you really should have if you care about optimizing the website experience for your potential visitors.

Sadly, standard web analytic tools can’t track this type of data. A new pageview or a new URL has to be generated before most tools report it. But not every action does this. And that’s when event based analytics and Piwik PRO Event Tracking come in.

Table of content

  1. What is Piwik PRO Event Tracking?
  2. Event Tracking – When To Use It?
  3. Event Tracking – How To Use It?
  4. Example 1 – Clicking a Button
  5. Example 1.5 – Button vs. Button
  6. Example 2 – Scrolling Down
  7. Example 3 – Filling Out a Form
  8. Events – How to Analyze the Reports?
  9. Event Reports
  10. Visitor Log
  11. Comparison Dashboard
  12. Events as Segments
  13. Conclusion

What is Piwik PRO Event Tracking?

Event Tracking (or event based analytics) lets you record what a visitor is doing on your webpage, whether it’s clicks, scrolls or even movements of the cursor.

With Event Tracking you can record clicks on non-clickable elements of your website (as well as on clickable ones), the usage of video and audio players, scrolling down, leaving the page, filling out a form without submitting it, interacting with Flash elements, and downloads from your website. While those actions don’t generate changes in the website’s URL, they can be still recorded.

How to Leverage Web Analytics

When Your Company is Dealing with Tons of Sensitive Data

Download FREE Guide

Event Tracking – When To Use It?

It’s great that we know what Event Tracking can do, but what’s more important is understanding when we should use it.

Event based analytics is the perfect tool for capturing your visitors’ behavioral patterns and really understanding them. Knowing your visitors’ Click Path can only take you so far. Event Tracking is especially useful if you really want to learn about your visitors’ engagement level.

You should basically choose Event Tracking whenever you want to optimize your website’s performance and learn what elements on your page are the most (and least) engaging for your visitors. If you ask me, I’d be implementing events regularly to never lose track of what my visitors are most critical. Event Tracking can expose the most subtle form of critique from your viewers – they entered your page, but nothing on it excited them enough to do anything more.

Many analytics pros choose URL parameters (like UTM or PK) to track exactly this type of user activity. However, this might not be the best idea, especially if you’re tracking links that lead to other pages on your website. By doing so you will lose important data on referrers – the report will state that those users came from your website, and not the original source. If there is a better and more transparent way to do it, why risk losing information about where the traffic originally came from?

Remember: never get too comfortable with a high number of page views and low bounce rate. This still doesn’t mean that you’re engaging your visitors or that they’re passionately reading every word on your site.

Event Tracking – How To Use It?

It all starts from the Javascript function “trackEvent” inserted in the website’s code by your development team:

trackEvent(category, action, [name], [value])

As you can see, this function has four variables: event category, event action, event name and numeric value. Of those four variables the last two are optional, so you don’t have to specify them. Events are aggregated and separated by exactly those variables – category, action, and name (this will influence your reports).

Properly naming those variables is extremely important, because even the slightest change in name (yes, even one capitalized letter or space after the name) will result in creating a completely separate event, and will therefore generate a new event category/action/name. What’s the point of even creating an event if you lose all that precise information you’ve gathered from simple sloppiness and laziness?

That’s why it’s a good idea to create a naming convention for the whole process. It could be a standardized template, or just a set of rules and restrictions (e.g. an event name should always bear the name of the particular website). Both the marketing and development teams will benefit from this transparency – developers will have clear instructions, and marketers will easily decipher event tracking reports.

Remember: Naming conventions will help you a great deal to separate certain Events from each other (avoiding a lot of confusion) and aggregate them in a single report.

It’s important to also mention that you can add event tracking code using Piwik PRO Tag Manager, where the process of implementing event tags is simplified and you can handle it yourself without the help of a development team. Learn more about the advantages of Piwik PRO Tag Manager.

We can debate all day long when should we use Piwik PRO Event Tracking, but it’s best to learn from examples. Event based analytics has limitless applications, so let’s jump in.

Example 1 – Clicking a Button

This might be the most popular situation when applying Event Tracking can provide us with additional insight into your visitors’ engagement. Because it’s so common to have buttons on your websites, it is almost imperative to start with this example.

Let’s assume you want to learn how many people have clicked on the “CONTACT” button in your blog post. All you have to do is create a JavaScript onclick function (don’t forget to think first about a naming convention) and insert it into the button’s website code. It could look like this:

onclick=_paq.push(['trackEvent', 'Contact', 'ClickButton', 'BlogPostName']);

In our example:

  • Event Category = Contact
  • Event Action = ClickButton
  • Event Name = BlogPostName

You can also define the object in the code, which will change it slightly:

object.onclick=_paq.push(['trackEvent', 'Contact', 'ClickButton', 'BlogPostName']);

As you can see, it will be easy to find the right report and aggregate the data. The category is broad enough, so you can add tracking on other sites and still get precise insight.

Remember: When deciding on naming the “ACTION” it is good to choose something other than just “CLICK”. Think about reports organized by actions, where everything will be named click – how can you segment the report? Try customizing the name (like describing what is being clicked) and remember that everything could possibly be described as an “action”.

Example 1.5 – Button vs. Button

Let’s elaborate a bit on measuring visitors’ activity regarding button clicks. Oftentimes you’ll have two (or maybe even three) button clicks with the same link on your website. It could be your landing page with the same CTA at the top and bottom of the page. But it doesn’t have to be. You can have a few buttons arranged on your website and you just want to learn which one of them is most engaging (maybe the CTA is a bit different, or the design of the button?).

You can easily compare button clicks by creating two (or more) separate events:

_paq.push(['trackEvent', 'FreeSample', 'TopButtonClick', 'LandingPageName']);

_paq.push(['trackEvent', 'FreeSample', 'BottomButtonClick', 'LandingPageName']);

Now you’ll get two separate records regarding the “Top Button” and “Bottom Button”, and you’ll still be able see a report for the whole page by simply segmenting the report according to category.

As you can see, even such a basic and easily-implemented example of Event Tracking quickly becomes useful, giving you additional insight into your visitors’ engagement levels.

Example 2 – Scrolling Down

Scroll tracking lets you set breakpoints based on page height. You can create as many breakpoints as you like, but be careful not to overdo it. Typically, 3-4 breakpoints are enough to get the insight you’re looking for. You can also associate them with important elements on your website (e.g. you have a video at 60% of your webpage, or a pop-up button that appears after scrolling through 75% of a given page).

You (or your development team) should create a javascript snippet that looks like this:

_paq.push(['trackEvent', 'CategoryName', 'NumberOf% Scrolled', 'YourBlogPostName']);

In our example we’ll specify it to mean:
Event Category = Scrolling
Event Action = 50% Scrolled
Event Name = YourBlogPostName

After making sure you have all the variables right, your development team can now create a snippet of code to implement in the website:


 var wasFired = false;
  window.addEventListener('scroll', detectScrollEventPush);

  function detectScrollEventPush () {
      var posY_px = window.pageYOffset || 0,
          posY_percentage = getPageScrollPercentage(posY_px);
      if (!wasFired && posY_percentage >= 50) {
          wasFired = true;
          _paq.push(['trackEvent', 'Scrolling', '50% Scrolled', 'YourBlogPostName']);
      }

      function getPageScrollPercentage (scrollPx) {
          var screenHeight = (document.documentElement && document.documentElement.clientHeight) || 0,
              pageScrollHeight = Math.max(totalPageHeight() - screenHeight, 1),
              rawPercentage = scrollPx / pageScrollHeight * 100;
          return Math.round(rawPercentage);
      }

      function totalPageHeight () {
          return Math.max(
              1,
              document.body.scrollHeight || 0,
              document.body.offsetHeight || 0,
              document.documentElement.clientHeight || 0,
              document.documentElement.scrollHeight || 0,
              document.documentElement.offsetHeight || 0);
      }
  }

Remember about properly naming the category, action, and name.

Tracking scrolling down could not only be based on %, but on pixels as well. You could even first specify the top and bottom of your site and track only a preselected area. This could be especially useful for tracking how users scroll through articles and blog posts, where the comment sections can expand and change the amount of scrolling needed to finish reading the whole text.

Piwik PRO Scrolling Down Report

Tracking page scrolling shouldn’t be applied universally. It’s not the “one tracking tool” to fix all your problems and bring you complete information about user engagement. For example: why would you do it on short pages? What would it tell you? Maybe in those cases you should consider focusing on time spent on your page?

Example 3 – Filling Out a Form

Finally we’re getting to some more advanced examples. Here’s a situation where Event Tracking helps you find out if there might be an issue with one of the most common elements on your website – a form that needs to be filled out.

Think about it: how often do you encounter forms while browsing the Internet? They’re the most common things in the world: contact forms, free trial forms, download forms, and registration forms, just to name a few. People react to them differently depending on the wording, structure, number of fields in the form, etc.

That is why Event Tracking gives you a great opportunity to better understand your visitors’ behaviour patterns by learning how they react to your forms. Let’s take a look at one example:

Let’s assume you have a registration form on your website with 5 elements to complete: Name, Company, Phone Number, Address and Email. You know how many people have registered, that’s an easy one. But do you actually know how many of your visitors started filling out the form but never finished? How many entered their name and email, but none of the other data? This is valuable information – maybe you should consider altering the registration form and eliminating some fields? You’ll never know if you don’t have the data to back up your intuition.

Thankfully, Piwik PRO Event Tracking can dispel any doubts and provide you with the necessary data. Again, it all starts with preparing a JavaScript snippet:


var FORM = document.getElementById('myform'),
	FORM_ID = FORM.getAttribute('id'),
	INPUT = FORM.querySelectorAll('input, textarea'),
	SUBMIT_BUTTON = FORM.querySelectorAll('button')[0],
	SUBMITTED = false;

function sendInputs() {
	for (var i = 0, MAX = INPUT.length; i < MAX; i++) {
		var CHANGED_ITEM_ID = INPUT[i].getAttribute('id');

		if (!INPUT[i].getAttribute('ppsend') && INPUT[i].value.replace(/ /g, '').length > 0) {
			INPUT[i].setAttribute('ppsend', 'true');
			_paq.push(['trackEvent', 'Form Fillout', FORM_ID, CHANGED_ITEM_ID]);
		}
	}
}

FORM.addEventListener('focusout', sendInputs, false);
FORM.addEventListener('keydown', sendInputs, false);
FORM.addEventListener('keyup', sendInputs, false);

function sendingEvent() {
	if (!SUBMITTED) {
		SUBMITTED = true;
		_paq.push(['trackEvent', 'Form Fillout', FORM_ID, 'SUBMIT']);
	}
}

SUBMIT_BUTTON.addEventListener('click', sendingEvent, false);

Now you can track if the visitor has filled in any of the fields in your form. An event will be created every time any of the fields is filled in, or even if the user chooses the autofill option. But that is not all: as you can see from the second part of the snippet, a separate event will be generated when your visitor clicks the “submit” button. What is important, both events will be generated only once, so don’t worry about users potentially clicking the submit button more than once or filling out a form multiple times during the same session.

Thank to event based analytics you will be able to gather valuable insights which could help you improve submission rates. If you see that one particular element is consistently being left blank (e.g. Company Name, Phone Number etc.) you can eliminate it or make it optional for users to complete, then check the results. Maybe your visitors are discouraged by the large number of fields in the form, or by a particular piece of information you’re asking them to share.

This event report could also inform us of other issues, even technical ones. A high number of visitors filling out the entire form yet still not submitting it could point to a technical problem with recording the submission, or could suggest a wholesale rethinking of the whole submission process.

It’s good to remember that your development team can modify the conditions for the events you want to track in similar situations. For example, you can track only the activities of visitors which do not conclude with submitting the form. This could save you time and deliver even more accurate data. But everything starts with properly defining and specifying your event.

Fillout Form Report Piwik PRO

Events – How to Analyze the Reports?

    Event Reports

It’s one thing to implement event tracking, and another to analyze the reports. We’ve already discussed how important it is to have a naming convention for your events, and now we’ll see exactly why.

Piwik PRO Event Report

In Piwik PRO you can organize your reports by Event Categories, Event Actions and Event Names. You can also choose particular segments (click here to learn more about segmentation in Piwik PRO), decide on the period of time and website. This gives you many options to find the precise data you’re looking for.

There is also a way to measure growth in your visitors’ engagement levels by choosing the insights option in Event Reports. Simply choose a segment and time period, then select the Insights icon. You will be able to compare the chosen time period (week, month or even a year) to a previous one, or the same time period from a previous year. You could also filter the results and focus only on improving or declining metrics.

Insights

    Visitor Log

Another important feature of Piwik PRO events reports is the visitor log, which gives you a look inside the actions of every user on your website. Now you can see how much time they spend on your website, as well as how and when certain activities were performed. This is a great addition to the report page, as it gives you the ability to not only rely on statistics, but to take a closer look at each and every visitor.

The visitor log can also be customized and segmented to show you only those users you want to learn more about. Don’t forget about this option, as the more you segment and compare the more precise information you’ll get, and the more data-driven your decisions will be. It’s also worth noting that you won’t find this level of report customization in Google Analytics.

Piwik PRO Visitor Log

    Comparison Dashboard

It’s one thing to properly personalize, segment and analyze your event reports. But you can also easily compare them using the Piwik PRO Comparison Dashboard. This useful feature lets you choose segments and websites you want to compare for a specified time period. You can also display event reports categorized by category, action and name all at the same time.

This feature becomes increasingly useful the more data transparency you need.

Piwik PRO Comparison Dashboard

    Events as Segments

It’s one thing to analyze event reports. But Piwik PRO has another useful feature which lets you treat an event as a segment. All you need to do is add a new segment and specify it correctly. You can choose an event category, event action and event name, thereby creating a segment consisting only of visitors who performed one specified event (or visited a particular website).

Why might you want to create such a segment? Because now you can use it to learn about a range of different activities performed by those visitors. Most other Piwik PRO reports (e.g. Visitor, Actions, Referrers) let you choose the segment, so you’ll be able to learn such information as device type, entry pages, exit pages, search engines and campaigns that brought them to your website, to name but a few. Essentially you can combine reports without any complicated operations.

Segments as Events

You can customize, segment and export the reports in different file formats (including CSV, XML, Php or TSV), store them, compare them and share them with your team. You can also customize your Piwik PRO Dashboard to include event reports.

Remember: your reports log can uncover an error in your naming convention or a misimplementation of an event. Look for data discrepancies or obvious omissions of data recorded as a clue to go back to the event implementation stage.

Conclusion

When used correctly, Event Tracking can quickly become an indispensable tool in your analytics arsenal. Its biggest advantage is the ability to track almost every possible action undertaken by visitors to your website, and the capacity to segment a range of even extremely complex groups of users in order to obtain valuable insights from the reports. Still, no tool does wonders when used improperly, so try to stay on top of tips and tricks along with updates, and never forget about communicating with your development team to achieve the best possible results.

How to Leverage Web Analytics

When Your Company is Dealing with Tons of Sensitive Data

Download FREE Guide

Tagged under

Author:

Julian Jeliński, CRO Copywriting Expert

Writing sparkling words and dazzling headlines, creating intriguing content, specializing in issues of online privacy and security. LinkedIn Profile

See more posts of this author
Free Guide: How to Leverage Web Analytics When Your Company is Dealing with Tons of Sensitive Data

Share