Montag, 15. Januar 2018

Internal link click Tracking with Matomo (Piwik)

With Matomo (Piwik) you can track not only the visits, but also individual actions that are carried out by a visitor, such as a click on an internal link.

In this little tutorial we will briefly describe how to track internal linkage with Matomo (Piwik).

The term "link" refers to the HTML <a> tag, which may also include an image <img> or a div box <div> as well as much more.

In general, clicks on all possible HTML elements are possible with this method. So also the clicks on buttons and form input submit buttons can be tracked.

How to track the clicks on internal links with Matomo (Piwik).

On the first and only step, a Javascript onclick Event must be insert in your HTML <a> tag.
onclick="javascript:_paq.push(['trackEvent', 'Event Category', 'Event Action', 'Event Name']);"
Explanation:
'trackEvent' activate the Javascript trackEvent() function in the Matomo piwik.js file.
trackEvent(category, action, [name], [value])
'Event Category'
is the Name your find it in the Matomo statistic under "Actions → Events → Event Categories".
'Event Action'
is the Name your find it in the Matomo statistic under "Actions → Events → Event Actions".
'Event Name'
is the Name your find it in the Matomo statistic under "Actions → Events → Event Names".

So there are three levels that are built like a tree. For example, you can name a category "Clicks", a action "Links", and name the "Name" as the link text.
onclick="javascript:_paq.push(['trackEvent', 'Clicks', 'Links', 'Matomotest']);"
This onclick Event insert in a <a> tag.
<a href="/clicktest/" onclick="javascript:_paq.push(['trackEvent', 'Clicks', 'Links', 'Matomotest']);">
Matomo Link Click Tracking Test
</a>
When your <a> tag have already a onclick event, you can put it in a parent div box.
<div onclick="javascript:_paq.push(['trackEvent', 'Clicks', 'Links', 'Matomotest']);">
<a href="/clicktest/" onclick="myfunction()">
Matomo Link Click Tracking Test
</a>
</div>
Or put the code snippet in a function().
<script>
functionA() {
_paq.push(['trackEvent', 'Clicks', 'Links', 'Matomotest']);
}
</script>
<a href="/clicktest/" onclick="functionA();functionB();">
Matomo Link Click Tracking Test
</a>
 For example, you can categorize it:
  • Clicks
    • - Links
      • -- Alink
      • -- Blink
      • -- Clink
    • - Divs
      • -- Adiv
      • -- Bdiv
      • -- Cdiv
    • - Images
      • -- Aimg
      • -- Bimg
      • -- Cimg
You can then see the reported clicks on internal links in the Matomo (Piwik) statistics in the visitor log and under "Actions → Events".

Matomo internal link click tracking Piwik

Matomo internal link click tracking Piwik

Matomo internal link click tracking Piwik

Matomo internal link click tracking Piwik
Please notice: The statistics in "Actions → Events" are little bit time delayed.

Here is a complete webpage to test for yourself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MATOMO Link Click Tracking</title>
<!-- Matomo -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//www.example.com/piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '0']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
</head>
<body>
<div>
<a href="/clicktest/" onclick="javascript:_paq.push(['trackEvent', 'Clicks', 'Links', 'Matomotest']);">
MATOMO Link Click Tracking Test
</a>
</div>
</body>
</html>

No guarantee. No warranty. No support.
Use at your own risk.