How do I start tracking data with Matomo on websites that use React? FAQ - New to Matomo

If you use React in your website, you can start tracking data in Matomo seamlessly using the Matomo Tag Manager. Once a new site gets created in Matomo, the Matomo Tag Manager will automatically pre-configure a container with a Matomo tracking code tag which can be used to get started straight away.

If you are planning to use a single container for multiple websites, make sure to use the tracking code of that specific container when implementing the steps below.

Follow these steps to set it up:

In your Matomo Tag Manager container, navigate to Triggers and click “Create new Trigger”.
Select the “History Change” trigger under the “User Engagement” section.
Give your trigger a name, for example “History Change”.
Click “Create New Trigger”.
Create another trigger, this time selecting “Pageview” for the trigger type.
Select the “Pageview” trigger under the “Pageview” section.
Give your trigger a name, for example “Pageview”.
Click “Create New Trigger”.
Next, navigate to Tags and click “Create New Tag” and select “Matomo Analytics” as the Tag type.
Select your Matomo Configuration Variable and set the Tracking type to “Pageview”.
Set the Custom Title to {{PageTitle}}.
Set the Custom URL to {{PageOrigin}}/{{PageHash}} if your React app has a # in the URL to navigate to different pages. Otherwise, set it as {{PageUrl}}
Under the option “Execute this tag when any of these triggers are triggered”, select the “History Change” and “Pageview” triggers that we created.
Inject the Matomo Tag Manager JS code into your App.js (or other relevant files), we recommend doing this using the “React.useEffect” method. The example below shows how to add the Matomo Tag Manager JS code into a “Hello World” app in React.js.


    import React from 'react';

    export default function App () {
    React.useEffect(() => {
            var _mtm = window._mtm = window._mtm || [];
            _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src='{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}'; s.parentNode.insertBefore(g,s);
    }, [])

    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
   }

15. Replace “{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}” with the container code you want to use, the container code has the format “container_*.js“. Follow this guide to find your container code.
16. Use the Preview/Debug mode to test and ensure that your Triggers & Tag are working as expected.
17. Once you’ve confirmed that the Trigger and Tag are working as expected, publish the changes so that they’re deployed to your website.

Congratulations! You have successfully installed the Matomo Analytics tracking code via the Matomo Tag Manager. To verify that hits are being tracked, visit your website and check that this data is visible in your Matomo instance.

Feedback on this page