• Stars
    star
    133
  • Rank 271,797 (Top 6 %)
  • Language Vue
  • License
    MIT License
  • Created almost 6 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Matomo integration for Kirby, in both your panel and templates. Kirby 3 only.

Kirby Matomo

This plugin helps you generate a tracking code for Matomo, and displays some useful metrics directly within the panel.

screenshot-dashboard-faded


Overview

This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.

TLDR – Just get me started 👀

  1. Install Matomo on your server.
  2. Download and copy this repository to /site/plugins/matomo
  3. Set the following values in site/config/config.php :
return array(
    'sylvainjule.matomo.url'        => 'http://your-matomo.url',
    'sylvainjule.matomo.id'         => 'mywebsite',
    'sylvainjule.matomo.token'      => 'token_auth',
);
  1. Add this code to your footer snippet: <?php echo snippet('matomo') ?>
  2. Copy this blueprint under a dedicated tab / page in the panel.

You're all set.


1. Why Matomo?

  • It's open-source (who doesn't like open-source?)
  • It's free (like, really free. You don't pay with your data)
  • It's self-hosted (which means more control for you over your data)
  • It respects your visitors privacy (IP Anonymization, automated logs deletion, data ownership)
  • It now integrates smoothly with Kirby 3 ✌️

2. Installation

Download and copy this repository to /site/plugins/matomo

Alternatively, you can install it with composer: composer require sylvainjule/matomo


3. Options

Here is an overview of the available options with their default values:

return array(
    'sylvainjule.matomo.url'            => false, #required
    'sylvainjule.matomo.id'             => false, #required
    'sylvainjule.matomo.token'          => false, #required for the panel integration
    'sylvainjule.matomo.active'         => true,
    'sylvainjule.matomo.debug'          => false,
    'sylvainjule.matomo.trackUsers'     => false,
    'sylvainjule.matomo.disableCookies' => false,
    'sylvainjule.matomo.blacklist'      => ['127.0.0.1', '::1'],
);

3.1. url (required)

Where your matomo install is:

'sylvainjule.matomo.url' => 'https://analytics.yourdomain.com'

3.2. id (required)

A single Matomo install can host multiple websites. The plugin needs to know the id of the one to look for:

'sylvainjule.matomo.id' => 'mywebsite'

3.3. token (required for the panel integration)

The panel sections will need to make calls to your Matomo API. A token_auth is required, you will find it in Settings > API in the control panel. Copy-paste the string without the &token_auth= prefix.

Below is an example token. Please note that this token is private and shouldn't be made public. Once added, if you need to publish your code please create something like a duplicated config.github.php which will contain the non-sensitive informations, and add your real config.php to your .gitignore.

'sylvainjule.matomo.token' => 'gQ7TQgg8EFe3h29F9t4aJqC33VQdPfFP4M'

3.4. active

You can deactivate the snippet by setting this value to false.

'sylvainjule.matomo.active' => true

3.5. blacklist

Localhost is in the blacklist as default. You can change it.

'sylvainjule.matomo.blacklist' => ['127.0.0.1', '::1']

3.6. trackUsers

The script is only active for not logged in users by default. If you want to change it, set this option to true.

'sylvainjule.matomo.trackUsers' => false

3.7. debug

If you want to always run the script (even on localhost or if you are logged in), set this option to true.

'sylvainjule.matomo.debug' => false

3.8. disableCookies

If you want to use Matomo without any tracking cookies on the user side, set this option to true. You can read more about this setting in the Matomo FAQ.

'sylvainjule.matomo.disableCookies' => false

4. Template usage

You only need to include the snippet in your code somewhere:

<?php snippet('matomo'); ?>

5. Panel dashboard

The panel dashboard (screenshot on top of this readme) displays metrics for the whole website.

5.1. Basic blueprint example

Please make sure that you have included your token_auth in your config.

Place this snippet in a dedicated tab / blueprint:

columns:
  - width: 3/4
    sections:
      main:
        type: matomo-main
  - width: 1/4
    sections:
      sidebar:
        type: matomo-sidebar

5.2. Options

Hiding components

There are a bunch of options to help you adjust this default panel view. Both sections have three components :

  • The mainview (matomo-main) includes chart, overview and widgets
  • The sidebar (matomo-sidebar) includes link, realtime and summary

You can chose to hide them like this:

columns:
  - width: 3/4
    sections:
      main:
        type: matomo-main
        chart: false
        overview: false
        widgets: false
  - width: 1/4
    sections:
      sidebar:
        type: matomo-sidebar
        link: false
        realtime: false
        summary: false

(Ok, there would be nothing left to work with here, but you get the idea).

Hiding and sorting widgets

Widgets can be sorted to your taste. You can also choose to display only some of them. Here's a glimpse of the option with all widgets explicitely set, change the order of its list or remove entries to filter widgets.

columns:
  - width: 3/4
    sections:
      main:
        type: matomo-main
        widgets:
          - referrerType
          - websites
          - socials
          - devicesType
          - keywords
          - popularPages
Hiding period ranges

By default, all 4 ranges are displayed (This year, This month, Last 7 days, Today). You can choose to hide some of them by explicitely excluding them from the periods list:

columns:
  - width: 3/4
    sections:
      main:
        type: matomo-main
        periods:
          - year
          - month
          - week
          - day
Changing defaults

You have acces to two default options, the period and the widgets limit.

  • period is the default active period on first load of the section. It is a string to chose from one of the periods above. Default is month.
  • limit is the number of entries displayed within the widgets. Default is 5.
columns:
  - width: 3/4
    sections:
      main:
        type: matomo-main
        defaults:
          period: month
          limit: 5

5.3. Complete blueprint example

Here's a glimpse of how the blueprint might look with all options explicitely set:

columns:
  - width: 3/4
    sections:
      main:
        type: matomo-main
        chart: true
        overview: true
        defaults:
          period: month
          limit: 5
        periods:
          - year
          - month
          - week
          - day
        widgets:
          - referrerType
          - websites
          - socials
          - devicesType
          - keywords
          - popularPages
  - width: 1/4
    sections:
      sidebar:
        type: matomo-sidebar
        link: true
        realtime: true
        summary: true

6. Panel page widget

The panel page widget displays metrics for a given page, both in single-language or multi-language websites.

Any feedback regarding this widget's behaviour is welcome. It might still need to be refined, inputs from a larger variety of live websites would be a great help. Check the potential pitfalls below.

screenshot-page

6.1. Basic blueprint example

Please make sure that you have included your token_auth in your config.

Place this snippet in your page blueprint:

columns:
  - width: 1/3
    sections:
      matomo:
        type: matomo-page

The section will automatically detect the page uri, and fetch its metrics for the given period.

6.2. Options

Period

You can choose the period displayed, which can either be year, month, week or day. Default is month.

matomo:
  type: matomo-page
  period: month
Multi-language overview

The plugin will automatically detect if multi-language is switched on, and fetch the metrics of the current language.

Optionally, you can also display the metrics of all languages combined with the overview option. Default is false.

matomo:
  type: matomo-page
  overview: false

6.3. Potential pitfalls

  • Matomo receives public urls, which means that its URIs are fetched once routes have been applied. Therefore, the plugin filters Matomo's responses with a uri created from the public url of the page. If you have set up custom routes, to skip subfolders for example, please make sure to overwrite the url method for the template with a page model, otherwise the uri won't be correct.
  • The metrics shown might not be accurate / complete if you have changed the default language after Matomo started its data collection.

7. License

MIT


8. Credits

Kirby 2 had some Piwik integration plugins:

The snippet integration has been shamelessly adapted from @jenstornell's kirby-ga. 👏

More Repositories

1

kirby-pagetable

Display subpages in a flexible table section. Kirby 3 only.
PHP
113
star
2

kirby-annotator

Kirby field for adding notes to images by pinning them to specific coordinates. Kirby 2 and 3.
Vue
106
star
3

kirby-locator

A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 and 4.
Vue
97
star
4

kirby-embed

Embed field for Kirby 3 and 4.
PHP
74
star
5

kirby-bouncer

Restrict access of a user role to a specific page (and its children) in the panel.
PHP
60
star
6

kirby-imageradio

Add illustrations to Kirby's radio buttons. Kirby 3 and 4.
PHP
59
star
7

kirby-color-palette

A color palette to pick colors from in the panel. Kirby 3 only.
Vue
57
star
8

ethicsfordesign-website

Under the hood of ethicsfordesign.com
PHP
54
star
9

kirby-previews

Add some missing structure previews. Kirby 3 only.
SCSS
52
star
10

kirby-footnotes

Footnotes plugin for Kirby 3 and 4
PHP
47
star
11

kirby-multilist

Quickly manage lists with multiple fields in Kirby 3
Vue
45
star
12

kirby-autofocus

Content aware image cropping for Kirby. Kirby 2 and 3.
JavaScript
41
star
13

kirby-subtitler

Kirby field for synchronizing content with audio/video files. Kirby 2 and 3.
SCSS
38
star
14

kirby-backups

Manage backups from the Kirby panel
PHP
37
star
15

kirby-colorextractor

Extract dominant / average color from any image. Kirby 3 only.
PHP
37
star
16

kirby-code-editor

Code editor field for Kirby 3 and 4
SCSS
36
star
17

kirby-imageboxes

Add illustrations to Kirby's checkboxes. Kirby 3 and 4.
PHP
35
star
18

kirby-mapnotator

Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes.
Vue
31
star
19

kirby-categories

Create and manage multi-language categories in Kirby
Vue
20
star
20

kirby-quickpages

JavaScript
6
star
21

ethicsfordesign-subtitles

Subtitles of ethicsfordesign.com
4
star
22

typelighter.js

A small jQuery plugin for a looped highlighting and typing effect.
JavaScript
4
star