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

  1. 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:
    1. Matomo JavaScript Tracking Code
    2. Matomo Tracking API
    3. Using the Template engine

    If you're interested we can write and maintain a Matomo integration HowTo.
    1. e.g. set variables via extension -> config
      • [ ' db: idsite | e js ' ] - pull value from config
    2. Admin panel module for Matamo
    • WikiAdmin
    • 17.06.2022 07:49 edited
  2. 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
    • 03.02.2019 22:59 edited
Log in or create an account to post a comment.