React

This library lets you start collecting data from your web app. It also helps you control which data you collect –– like screen views, custom events, goals, and more. The library contains modules with methods.

To call methods in React, you’ll use CustomEventsService or PageViewsService.

Installation

To install JS library for React, follow these steps:

In your project folder, run the following command:

npm install @piwikpro/react-piwik-pro

yarn add @piwikpro/react-piwik-pro

Add the PiwikPro module to your project files. Call the initialize() method by passing your account address (example: https://example.piwik.pro/) and the site ID (Where to find it?):

import PiwikPro from '@piwikpro/react-piwik-pro';

PiwikPro.initialize('site-id', 'account-address',{
  nonce: 'nonce-string',
  dataLayerName: 'my-data-layer'
});

ReactDOM.render(<App />, document.getElementById('root'))

Note: This method makes sure that collected data is sent to the your account in Piwik PRO and is reported as a corresponding site or app.

Add tracking methods like screen views or custom events to your application.
Data will appear in reports in about an hour. Data in the tracker debugger will appear instantly.

Custom data layer name

import PiwikPro from '@piwikpro/react-piwik-pro';

PiwikPro.initialize('container-id', 'container-url', { dataLayerName: 'my-data-layer' });

ReactDOM.render(<App />, document.getElementById('root'))

Piwik PRO services

Send custom events

import { CustomEvent } from '@piwikpro/react-piwik-pro'

export class TestFormComponent {

  onUserInputName() {
    ...
    CustomEvent.trackEvent('user_register_form', 'enter_name', 'Name', 'Value');
  }

  onUserInputEmail() {
    ...
    CustomEvent.trackEvent('user_register_form', 'enter_email', 'Email', 'Value');
  }

  onSubmit() {
    ...
    CustomEvent.trackEvent('user_register_form', 'submit', 'Sent');
  }
}

Send page views and virtual page views

import { PageViews } from '@piwikpro/react-piwik-pro';
...

const App = () => {

  PageViews.trackPageView('optional title');

  return ...;
}

export default App

Send an event using the data layer

import { DataLayer } from '@piwikpro/react-piwik-pro';
...

const App = () => {

  DataLayer.push({ event: 'test-event' });

  return ...;
}

export default App

Methods

Here’s a list of all JS methods you can use in your React project. Descriptions and other information are available after clicking on links.

addDownloadExtensions()
addEcommerceItem() (deprecated)

hasCookies()

isCrossDomainLinkingEnabled()

logAllContentBlocksOnPage()