Matomo integration in React App

General questions
1

Hi all,

I am quite new to matomo & react and currently having a problem with the integration. What I want is to track how often a specific Button is beeing clicked.
I am trying to follow the following guide:

What I did so far:

  • I have added @datapunt/matomo-tracker-react to package.json
  • I have added the adjustet data to my index.tsx:
const instance = createInstance({
  urlBase: 'https://LINK.TO.DOMAIN',
  siteId: 3,
  }
})

ReactDOM.render(
    <React.StrictMode>
        <SnackbarProvider>
            <App />
        </SnackbarProvider>
        <MatomoProvider value={instance}>
            <App />
        </MatomoProvider>,
    </React.StrictMode>,
    document.getElementById('root'),
);
  • I have added the adjusted data to my MyApp.tsx
import React from 'react'
import { useMatomo } from '@datapunt/matomo-tracker-react'

const { trackPageView, trackEvent } = useMatomo()

  const handleOnClick = () => {
    // Track click on button
    trackEvent({ category: 'sample-page', action: 'click-event' })
  }

However - there seems to be a problem with my index.tsx and the ReactDOM.render() part as I always get a error message

“TypeError: Cannot destructure property ‘enqueueSnackbar’ of ‘Object(…)(…)’ as it is undefined.”

Hope you can help me with this!

2

Hi,

Unfortunately I don’t know React at all, so I can’t really help much.

Maybe the people of the city of Amsterdam knows more as they maintain the package:

3

This is not an error with the matomo code. Somewhere in your code there is a enqueueSnackbar inside of curly braces {}. Probably near your imports.

import { enqueueSnackbar } from 'something'

It’s not able to destructure enqueueSnackbar from something because something is null.

1 Like
4

Hi all,

the problem was with the ReactDOM.render part.
It works with this code:

ReactDOM.render(
    <React.StrictMode>
        <SnackbarProvider>
            <MatomoProvider value={instance}>
                <App />
            </MatomoProvider>
        </SnackbarProvider>
    </React.StrictMode>,
    document.getElementById('root'),