volto-matomo

Volto add-on that integrates Matomo with Volto sites. At this moment there is a very basic integration that just pings Matomo on each router location change.

How to

To configure it, either set the following variables:

• settings.matomoSiteId (if not available it uses: 1)
• settings.matomoUrlBase (if not available it uses: https://matomo.eea.europa.eu/)

or RAZZLE_MATOMO_SITE_ID and RAZZLE_MATOMO_URL environment variables.

With version 4.0.0+, you have the possibility to use a second matomo in parallel:

• settings.matomoSecondSiteId (if not available it uses: 1)
• settings.matomoSecondUrlBase (if not available it uses: https://matomo.eea.europa.eu/)

or RAZZLE_MATOMO_SECOND_SITE_ID and RAZZLE_MATOMO_SECOND_URL environment variables.

With version 6.0.0 it is possible to have custom matomo settings based on the pathname.

• settings.matomoTrackerIdFn is function with signature (pathname) => trackerId:string
• settings.matomoTrackers is a mapping of trackerIds to matomo setting objects (all the keys for config.settings can be added to this object).

API

There are four exports in utils.js (which can be imported from volto-matomo/utils, including from other Volto addons):

1. trackPageView({ href, ...options }) : void - takes an object with href and other options and sends to Matomo a page view track;
2. trackEvent(options) : void - takes an options object parameter and sends to Matomo an event track.
3. trackSiteSearch(options) : void - takes an options object parameter and sends to Matomo an site search track.
4. pushInstruction(name, null, ...args): void - takes a name and an arbitrary number of parameters, and pushes them to Matomo.

Note that the Matomo instance is behind the scenes lazy-loaded and cached.

The default behavior of volto-matomo is a call to trackPageView in utils.js, with the href and documentTitle options, on every URL change as recorded by the AppExtras component in Volto. The href is taken from props.content['@id'] received by the MatomoAppExtra.jsx component. The utils.js file exposes just a part of the Matomo React API. If you wish to extend it or to understand it better, this link might be helpful.

Getting started

Try volto-matomo with Docker

  git clone https://github.com/eea/volto-matomo.git
  cd volto-matomo
  make
  make start

Go to http://localhost:3000

make start now defaults to Volto 18. To run the same setup against Volto 17, use:

  VOLTO_VERSION=17 make
  VOLTO_VERSION=17 make start

Add volto-matomo to your Volto project

1. Make sure you have a Plone backend up-and-running at http://localhost:8080/Plone

   docker compose up backend
   

2. Start Volto frontend

• If you already have a volto project, just update package.json:

  "dependencies": {
      "@eeacms/volto-matomo": "*"
  }
  

and volto.config.js:

const addons = ['@eeacms/volto-matomo'];

• If not, create one with Cookieplone, as recommended by the official Plone documentation for Volto 18+:

  uvx cookieplone project
  cd project-title
  

1. Install or update dependencies, then start the project:

   make install
   

   For a Cookieplone project, start the backend and frontend in separate terminals:

   make backend-start
   make frontend-start
   

   For a legacy Volto 17 project, install the package with yarn and restart the frontend as usual.

2. Go to http://localhost:3000

3. Happy editing!

Release

See RELEASE.md.

How to contribute

See DEVELOP.md.

Copyright and license

The Initial Owner of the Original Code is European Environment Agency (EEA). All Rights Reserved.

See LICENSE.md for details.

Funding

European Environment Agency (EU)