How to implement Piwik events with Piwik PRO Tag Manager?

Published: June 17, 2016 Updated: August 24, 2018 Author Category Tag Manager, Use cases

In the past attaching event tracking to button clicks, PDF downloads, outbound link clicks or form completions was the domain of IT developers and webmasters. Now, thanks to Piwik PRO Tag Manager, implementing Piwik and Google Analytics events is super easy and can be done by marketers who have only a basic knowledge of technology.

In this blog post we will show you how to implement various Piwik events within minutes using Piwik PRO Tag Manager. For this purposes we have created two sample case studies.

Implementing Piwik event to track button clicks with Piwik PRO Tag Manager

The most obvious use case for Piwik events is tracking button clicks that do not cause any page reloads. In order to capture this information we usually need to attach an additional javascript event to the clickable element we would like to track. In order to easily implement this using Piwik PRO Tag Manager, you first have to define what you would like to track.

In our example we will be tracking clicks on the Request a free demo button on the Piwik Pro home page.

Piwik Pro website
Piwik Pro website

The second thing we would like to do is log in to your instance of Piwik PRO Tag Manager and creating a new tag containing the proper Piwik event. This can be accomplished quickly and easily by simply hitting the + Add a tag button in Piwik PRO Tag Manager’s user interface (and you can learn more about tags from our Tag Manager User Guide).

Piwik PRO Tag Manager - adding a tag
Piwik PRO Tag Manager - adding a tag

From the many options available we choose Asynchronous tab and then Asynchronous custom HTML tag.

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Marketing Cloud, Ensighten & Piwik PRO:

Download FREE Ebook
Piwik PRO Tag Manager choosing tag type
Piwik PRO Tag Manager choosing tag type

Following this path we come to the custom HTML tag page with blank editor window. Now we copy and paste our Piwik event into the blank editor window. In order to create Piwik event tracking code we can use this simple template:

_paq.push(['trackEvent', 'Event Category', 'Event Action', 'Event Name’, Numeric Value]);

In our example we will be using only Event Category and Event Action parameters. Also one thing to remember is that a Piwik event needs to be wrapped up in the <script> tags in order to work properly. So our Piwik event will look like this:

<script>
_paq.push(['trackEvent', 'Click', 'CTA-Homepage']);
</script>

Piwik PRO Tag Manager code insertion
Piwik PRO Tag Manager code insertion

At this point you may already be asking yourself how Piwik PRO Tag Manager will know when to fire our event and how it will recognize that this particular button and not some other button on this page was clicked?

This is where we are going to set up triggers and conditions for our tag, one of the most powerful features of Piwik PRO Tag Manager. Below the editor window we find the button Add a new trigger. Hitting this button will open a trigger editor that will allow us to attach our event to the proper actions taking place on the website. First, we have to choose from some predefined options, depending on what kind of trigger should be launching our event? Obviously, if we want to track button clicks, we choose Click.

Choosing the Click trigger without adding any further conditions will cause our event to be fired whenever users click something on the page, even if it isn’t a button or a link. This means we have to specify which clicks should cause our event to be fired. And this is the moment where we attach our event to the specific button on the page.

Piwik PRO Tag Manager - trigger configuration
Piwik PRO Tag Manager - trigger configuration

First we name our trigger in a descriptive way so later on we can reuse it for other tags we want to fire on our page. In our example the trigger was named Home Video Button. Then we have to create two conditions that will define our trigger.

In the first condition we tell Piwik PRO Tag Manager that we want our tag to be fired only on a specific page – in our case it will be Piwik.pro home page. In the second condition we want to tell Piwik PRO Tag Manager that the event will only fired when the specific button on the page is clicked. In order to do this, we must use DOM elements (pieces of HTML and CSS source code describing the button) found in the source code of the page.

We can easily obtain this information by right clicking on the button, in Chrome, and choosing inspect element. This is what we should see:

Piwik Pro - code preview
Piwik Pro - code preview

As you can see in the source code of Piwik.pro page, the play video button can be recognized by the class element

class="btn _btn-video"

Now we use this information when defining our next condition by simply choosing Click Classes contains btn-video (which is the value of the class element that we have identified in the source code).

At this point we are almost done. We simply hit the Save button at the bottom of the page. The last thing we must do is to check if our event is working properly before publishing it on the site. This is where we can use Piwik PRO Tag Manager’s debug mode.

Piwik PRO Tag Manager - Debug settings
Piwik PRO Tag Manager - Debug settings

After providing the page URL that we would like to debug we hit Debug and are taken to the preview mode of the website which provides us with additional information about the tags being fired in the background.

Piwik PRO Tag Manager - Debug mode
Piwik PRO Tag Manager - Debug mode

As we see in debug mode, clicking the video play button triggered the Piwik event to be fired. Thanks to the debug mode, we can double check if our tag will be fired properly and which triggers cause it. Once we are sure everything works fine, we can publish our container and start gathering the desired data.

You might also like: Ultimate Guide to Piwik PRO Event Tracking

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Marketing Cloud, Ensighten & Piwik PRO:

Download FREE Ebook

Tagged under

Author:

Marek Juszczyński,

Marek Juszczynski is the Head of Marketing at Piwik PRO. His areas of expertise include Conversion Optimization and B2B marketing. Apart from his every day duties he publishes web analytics and conversion optimization related articles on Piwik PRO blog.

See more posts of this author
Free Comparison of 5 Enterprise-Ready Tag Management Systems

Share