How to Add Matamo/Piwiki Tracking Code?

Hi, I wanted to add some tracking code to my WackoWiki instance. I successfully did this in the 5.4 version in the common _header.php. I just upgraded to the latest, 5.5.7 and it's changed to _header.tpl. I'm not familiar enough with the template being used and not able to add my tracking JS in there like I did before. An example of the JS is as follows:

<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//myTrackerUrl/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'mySiteId123']);
    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+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

If JS no longer works or is allowed, I can do it by a hidden image but I was curious how I can get the Name of the page so I can accurately track which pages a user visited by passing it as a query string parameter to my image src.

Thanks

Comments

Re: How to Add Matamo/Piwiki Tracking Code?

Both cases should be possible.

[A]
Just copy the JS or HTML code to theme/_common/_header.tpl

If you want pass a variable to the template use $tpl->h_variable = $value; in the corresponding file, e.g. _header.php.
Add the variable in the template as following [ ' name | e js ' ].

$tpl->h_* - h_ because it becomes part of the definition [''' h HtmlHead '''] in header.php of your theme
e js - escapes the provided data

Example 1 for Image Tracker:

<!-- Matomo Image Tracker -->
<img src="https://piwik.example.org/piwik.php?idsite={$IDSITE}&rec=1" style="border:0" alt="">
<!-- End Matomo -->

_header.php

// Matomo Tracker
$tpl->h_idsite = $value; 
$tpl->h_trackerurl = 'https://piwik.example.org/piwik.php?idsite=';

// you might want add the values in the the config table

_header.tpl

<!-- Matomo Image Tracker -->
<img src="[ ' trackerurl ' ][ ' idsite ' ]&rec=1" style="border:0" alt="">
<!-- End Matomo -->

Example 2 for JavaScript Tracker:

UPDATE: This example does not work, the JavaScript syntax interferes with template syntax, please see point B below for a working solution.

<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{$PIWIK_URL}/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', {$IDSITE}]);
    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 -->

_header.php

// Matomo Tracker
$tpl->h_idsite = $value; 
$tpl->h_trackerurl = 'https://piwik.example.org/piwik.php?idsite=';

// you might want add the values in the the config table

_header.tpl

<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//[ ' trackerurl | e js ' ]/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', [ ' idsite | e js ' ]]);
    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 -->

All examples untested.

Adding Conditions
You may want add conditions like tracking only pages (show handler) or guests.
_header.php

if ($condition)
{
	$tpl->h_c_idsite = $value; 
	$tpl->h_c_trackerurl = 'https://piwik.example.org/piwik.php?idsite=';
}

_header.tpl

// Inline definition
[= c _ =
	<img src="[ ' trackerurl ' ][ ' idsite ' ]&rec=1" style="border:0" alt="">
=]

[B]
Or set it for example in the _header.php with $this->add_html('header', '<script> ... </script>');.

Links:

If you're interested we can write and maintain a Matomo integration HowTo.

e.g. set variables via extension -> config
- [ ' db: idsite | e js ' ] - pull value from config
Admin panel module for Matamo

SOLVED

Hi, so I was able to test the code. So the only problem with the template is the javascript has in it [] so the template interpreter thinks ['setTrackerUrl', u+'piwik.php'] is some sort of variable information from the php file. Is there an escape character?

Anyways, I tried what was suggested in [B], using add_html and that worked! However, one more useful instruction is add_html should be called before $tpl->h_additions = $this->get_html_addition('header'); in the _header.php file.

Yeah, would be interested in helping with Matomo integration HowTo. However, would need some more reference about what is mentioned, extensions/config. I do agree the variable approach would be great. Also, same about the admin panel module and creating one for Matamo, would need some guidance about modules in admin panel.
- mying
- 01/30/2019 07:35
- 02/03/2019 22:59 edited