This library is inspired by piwik-react-router for the react-router part and publish a public method to track custom events.
npm install --save react-piwik
or
yarn add react-piwik
To use it you might create an instance of React-Piwik with the piwik server url and siteID and connect it to your history:
import ReactPiwik from 'react-piwik';
const piwik = new ReactPiwik({
url: 'your-piwik-server-url.com',
siteId: 12,
});
const trackAtConnect = false;
ReactDOM.render(
<Provider store={store}>
<Router routes={routes} history={piwik.connectToHistory(history, trackAtConnect)} />
</Provider>,
document.getElementById('root'),
);
You can optionally pass custom filenames if you have renamed your tracker urls (to prevent browser/adblock from blocking piwik) :
const piwik = new ReactPiwik({
url: 'your-piwik-server-url.com',
siteId: 12,
jsFilename: 'obfuscated-name.js',
phpFilename: 'obfuscated-name.php'
});
If you want to add (push) more piwik options you can do using push after you've setup the initial tracker. Also, if you want to track the first page view be sure to do a push:
ReactPiwik.push(['enableHeartBeatTimer'])
ReactPiwik.push(['setUserId', 'userId'])
// track the initial pageview
ReactPiwik.push(['trackPageView'])
On any page of your app you can track an event using push:
import ReactPiwik from 'react-piwik';
ReactPiwik.push(['trackEvent', 'eventCategory', 'yourEvent']);
Link tracking to track outgoing and download links is enabled by default.
Updates the document title before adding a new page view as the title may changed during the route rendering.
Pushes the specified args to the Piwik tracker the same way as you're using the _paq.push(args); directly.
Adds a listener to the passed in history and optionally triggers track(location) based on trackAtConnect whenever the history changes.
Disconnects Piwik from a previous connected history. Returns whether it could successfully disconnect.
src/React-Piwik.js
npm i && npm run build