- Basic SPA Matomo setup
- Will track
next/routerroute changesrouteChangeCompleteevent ⚠️ Notes for Next.js app router
Add the init call in your _app.js :
import React, { useEffect } 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;
function MyApp({ Component, pageProps }) {
useEffect(() => {
init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
}, []);
return <Component {...pageProps} />;
}
export default MyApp;Will track routes changes by default.
This wont track /login.php or any url containing ?token=.
init({
url: MATOMO_URL,
siteId: MATOMO_SITE_ID,
excludeUrlsPatterns: [/^\/login.php/, /\?token=.+/],
});To disable cookies (for better GDPR compliance) set the disableCookies flag to true.
init({
url: MATOMO_URL,
siteId: MATOMO_SITE_ID,
disableCookies: true,
});import { push } from "@socialgouv/matomo-next";
// track some events
push(["trackEvent", "contact", "click phone"]);If you use a Content-Security-Policy header with a nonce attribute, you can pass it to the init function to allow the script to be executed.
init({
url: MATOMO_URL,
siteId: MATOMO_SITE_ID,
nonce: "123456789",
})As the matomo-next injects a matomo script, if you use strict Trusted Types, you need to allow the script tag to be created by adding our policy name to your trusted types directive.
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types matomo-next;
You can set a custom policy name by passing it to the init function.
init({
url: MATOMO_URL,
siteId: MATOMO_SITE_ID,
trustedPolicyName: "your-custom-policy-name",
})The function has three optional callback properties that allow for custom behavior to be added:
-
onRouteChangeStart(path: string) => void: This callback is triggered when the route is about to change with Next Router eventrouteChangeStart. It receives the new path as a parameter. -
onRouteChangeComplete: This callback is triggered when the route change is complete with Next Router eventrouteChangeComplete. It receives the new path as a parameter. -
onInitialization: This callback is triggered when the function is first initialized. It does not receive any parameters. It could be useful to use it if you want to add parameter to Matomo when the page is render the first time. -
onScriptLoadingError: This callback is triggered when the script does not load. It does not receive any parameters. useful to detect ad-blockers.
init
✓ should create a js tag and initialize (7 ms)
✓ should NOT create events when url is not provided (9 ms)
push
✓ should append data to window._paq (1 ms)
✓ should append dimensions data to window._paq (1 ms)
onInitialization
✓ should work if the surcharge of the operator (1 ms)
router.routeChangeStart event
✓ should setReferrerUrl and setCustomUrl on route change start (1 ms)
✓ should use previousPath as referer on consecutive route change (1 ms)
✓ should work if the surcharge of the operator (3 ms)
router.routeChangeComplete event
✓ should trackPageView with correct title on route change (3 ms)
✓ should use previousPath as referer on consecutive route change (2 ms)
✓ should track route as search in /recherche (1 ms)
✓ should track route as search in /search (2 ms)
✓ should work if the surcharge of the operator (2 ms)
excludeUrlsPatterns
✓ should excluded login.php and token variables (2 ms)
✓ should exclude initial page tracking (3 ms)
✓ should track initial page if not excluded (2 ms)
disableCookies
✓ should NOT append disableCookies to window._paq by default (1 ms)
✓ should append disableCookies to window._paq (1 ms)
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent