Matomo Next

Matomo analytics for Next.js applications

• Basic SPA Matomo setup
• Will track next/router route changes routeChangeComplete event

Usage

Add the init call in your _app.js :

import React from "react";
import App from "next/app";

import { init } from "@socialgouv/matomo-next";

const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL;
const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID;

class MyApp extends App {
  componentDidMount() {
    init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
  }
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default MyApp;

Will track routes changes by default.

Exclude tracking some routes :

This wont track /login.php or any url containing ?token=.

init({
  url: MATOMO_URL,
  siteId: MATOMO_SITE_ID,
  excludeUrlsPatterns: [/^\/login.php/, /\?token=.+/],
});

Track additionnal events :

import { push } from "@socialgouv/matomo-next";

// track some events
push(["trackEvent", "contact", "click phone"]);

Tests

init
  ✓ should create a js tag and initialize (16 ms)
  ✓ should NOT create events when url is not provided (19 ms)
push
  ✓ should append data to window._paq (2 ms)
router.routeChangeComplete event
  ✓ should trackPageView with correct title on route change (5 ms)
  ✓ should use previousPath as referer on consecutive route change (10 ms)
  ✓ should track route as search in /recherche (1 ms)
  ✓ should track route as search in /search (2 ms)
excludeUrlsPatterns
  ✓ should excluded login.php and token variables (7 ms)
  ✓ should exclude initial page tracking (4 ms)
  ✓ should track initial page if not excluded (3 ms)