Matomo Integration

• Source code: https://github.com/hashbite/consent-manager/tree/main/packages/integration-matomo

Matomo is a robust, open-source alternative to SAAS tracking solutions like Google Analytics. It offers full data control and can be configured for GDPR-friendly implementation.

The Consent Manager's Matomo integration is available in two variants: a standard version and a privacy-aware version that should be used only if your Matomo instance is privacy-aware.

Default Matomo Integration

Title	Matomo
ID	matomo
Icon
Brand color	#3152A0
Contrast color	#fff
Description	Matomo is the leading open-source web analytics platform, used on over 1 million websites in over 190 countries, and translated into over 50 languages. Matomo is the ethical choice for those who value privacy and 100% data ownership.
Privacy policy	https://matomo.org/privacy-policy/
WrapperComponent	✅
Enabled by default	⛔️

Privacy-Aware Matomo Integration

Ensure your Matomo instance is privacy-aware before using this variant.

Title	Matomo
ID	matomo
Icon
Brand color	#3152A0
Contrast color	#fff
Description	Our privacy-aware statistics tool will not track you across websites or multiple days. No personal data is collected, while all other data is strongly anonymized. You can opt-out at any time.
Privacy policy	https://matomo.org/privacy-policy/
WrapperComponent	✅
Enabled by default	✅

Configuration Options

• matomoURL: The URL of your Matomo installation
• siteID: ID of the page set up in Matomo

Tracking API

The Matomo integration exposes a tracking API with functions to simplify page view and event tracking. The getMatomoTracker function provides methods such as trackPageViewSPA for single-page applications and trackEvent for event tracking.

Example Usage with react-router

This example demonstrates using the Matomo tracking API with react-router for tracking page views and events:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { getMatomoTracker } from '@consent-manager/integration-matomo';

function App() {
  const location = useLocation();
  const { trackPageViewSPA, trackEvent } = getMatomoTracker();

  useEffect(() => {
    // Track page view for SPA
    if (trackPageViewSPA) {
      trackPageViewSPA({
        location,
        prevLocation: window.prevLocation,
      });
      window.prevLocation = location;
    }

    // Track a custom event
    if (trackEvent){
      trackEvent('Category', 'Action', 'Label');
    }
  }, [location, trackPageViewSPA, trackEvent]);

  // Your application content
  return (
    // ...
  );
}

export default App;