Awesome

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.

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, ...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

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:

  "addons": [
      "@eeacms/volto-matomo"
  ],
  
  "dependencies": {
      "@eeacms/volto-matomo": "*"
  }
  

• If not, create one:

  npm install -g yo @plone/generator-volto
  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-matomo
  cd my-volto-project
  

1. Install new add-ons and restart Volto:

   yarn
   yarn start
   

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)