Gatsby

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

Installation

To install JS library for Gatsby, follow these steps:

In your project folder, run the following command:

npm install @piwikpro/react-piwik-pro

Add the PiwikPro module in your highest level app module. Call the PiwikPro.initialize() method by passing your account address (example: https://example.piwik.pro/) and the site ID (Where to find it?). This function must be called before any other tracking functions can record data.

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

PiwikPro.initialize('container-id', 'container-url');

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

Setup with a nonce

The nonce attribute allows you to allow-list specific elements, like an inline script or style element. This helps you avoid using the CSP unsafe-inline directive, which would allow all inline scripts or styles.

To pass a nonce to a script, include it as the third argument when calling the script initialization method.

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

PiwikPro.initialize('container-id', 'container-url', { nonce: 'nonce-string' });

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

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 with 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 Gatsby project. Descriptions and other information are available after clicking on links.

addDownloadExtensions()
addEcommerceItem() (deprecated)

hasCookies()

isCrossDomainLinkingEnabled()

logAllContentBlocksOnPage()