Comments (2)
Implementing it was quite fast:
import { MatomoProvider, createInstance } from '@datapunt/matomo-tracker-react';
import { getRuntimeEnvVar } from 'helpers';
import { useEffect } from 'react';
import { useLocation } from 'react-router';
export const createClient = () => {
const host = getRuntimeEnvVar('REACT_APP_RUNTIME_MATOMO_HOST');
const siteId = parseInt(getRuntimeEnvVar('REACT_APP_RUNTIME_MATOMO_SITE_ID'));
return createInstance({
urlBase: host,
siteId: siteId,
// userId: 'UID76903202', // optional, default value: `undefined`. // TODO CDC-1389
trackerUrl: `${host}/piwik.php`, // optional, default value: `${urlBase}matomo.php`
srcUrl: `${host}/piwik.js`, // optional, default value: `${urlBase}matomo.js`
heartBeat: { // optional, enabled by default
active: true, // optional, default value: true
seconds: 30 // optional, default value: `15
},
linkTracking: true, // optional, default value: true
configurations: { // optional, default value: {}
// any valid matomo configuration, all below are optional
// disableCookies: true,
setSecureCookie: true,
setRequestMethod: 'POST'
// TODO POST is default, but we would need to setup CORS: https://developer.matomo.org/api-reference/tracking-javascript
}
})
}
/**
* MatomoRouterProvider provides Matomo hooks for children components
* and it tracks page views on location change.
*
* It should be embedded within <Router>
*/
export const MatomoRouterProvider = (
{children}: {children: JSX.Element}) => {
const isEnabled = getRuntimeEnvVar('REACT_APP_RUNTIME_MATOMO_ENABLED');
if (!isEnabled) {
return children;
}
const matomoClient = createClient();
let location = useLocation();
useEffect(() => {
// track page view on each location change
matomoClient.trackPageView()
}, [location]);
return (
<MatomoProvider value={matomoClient}>
{children}
</MatomoProvider>
)
}
/**
* withMatomo is an HOC to wrap other component in order to provide Matomo to children
*
* It does not integrate with react-router
*
* @param Child
*/
export const withMatomo = <T,>(Child: React.ComponentType<T>) => {
const isEnabled = getRuntimeEnvVar('REACT_APP_RUNTIME_MATOMO_ENABLED');
if (!isEnabled) {
return Child;
}
const matomoClient = createClient();
return (props: T) => (
<MatomoProvider value={matomoClient}>
<Child {...props}/>
</MatomoProvider>
);
}
from matomo-tracker.
We might be able to make this a separate package to connect the two together. At the moment we are busy with the new API design and migrating some internal applications, so this is on the back-burner for now.
As mentioned by @KrzysztofMadejski, it's pretty trivial to add this in the application code. So we are going to recommend doing so for now.
from matomo-tracker.
Related Issues (20)
- Multiple Matomo instances
- Multiple tracker objects HOT 1
- Missing ecommerce actions
- Why different param names? HOT 3
- Missing ecommerce getter
- Missing callback support
- Is there any way to globally set a custom dimension value? HOT 3
- Refresh or reset React context instance to track logged users HOT 2
- Module Warning & Failed to parse source map error when used with Create React App v5.0.0 with Typescript HOT 6
- pushInstriction type mismatch. Could reuse MatomoInstance interface
- Publish new package HOT 15
- matomo-react bad idea to call window._paq manually? HOT 1
- Update to support react v18 HOT 1
- Fingerprintjs and FormAnalytics
- can you create a new release version in github ? HOT 1
- Integration of Matomo Tag Manager HOT 1
- Unable to build React project with Matomo as dependency
- Multiple npm packages for matomo-tracker-react
- matomo.js script won't be loaded anymore HOT 2
- Pod is not working in m1 chip system
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matomo-tracker.