React Plausible Analytics

Plausible analytics as a React component.

Zlatko Fedor made the original react-g-analytics project.

A fork of react-ga-analytics, specifically designed for use with Plausible analytics.

Install

npm install react-plausible-analytics

This package is available on NPM, published by chenxsan Thanks to chenxsan for his kindness.

Features

• This script automatically loads the Plausible analytics script.

Plausible handles history popStates on its own, so we don't need to touch that :-)

Notice

Use version 0.3.x of the react-plausible-analytics if you want to use it with react-router 4.x Use version 0.2.x of the react-plausible-analytics if you want to use it with react-router 2.x or 3.x

Usage

Example react-router 4.x

User BrowserRouter from react-g-analytics instead of react-router.

import { BrowserRouter } from 'react-plausible-analytics';

export default function MyComponent() {
  return (
    <BrowserRouter id="[Plausible ID here]">
      ... your application
    <BrowserRouter>
  );
}

>

Example react-router 3.x and bellow

App.jsx

Application part (load google analytics script to your webpage on the client side). ReactGAnalytics has parameter ID (use your own ID)

var React = require('react');
var PlausibleAnalytics = require('react-plausible-analytics');

var App = module.exports = React.createClass({
  render: function() {
    return (
      <div id="application">
        <PlausibleAnalytics id="[Plausible ID here]" />
        <RouteHandler />
      </div>
    );
  }
});

Custom Event Goals

This module also supports Plausible's custom event goals API.

var React = require('react');
var PlausibleAnalytics = require('react-plausible-analytics');
var RouteHandler = require('react-router').RouteHandler;

export default React.createClass({
  render: function() {
    return (
      <div id="application">
        <PlausibleAnalytics id="[Plausible ID here]" queuedCustomEvents={["customEvent"]} />
        <RouteHandler />
      </div>
    );
  }
});

Credits

Zlatko Fedor made the original react-g-analytics project. resynth1943 created the fork that supports Plausible.

License

The MIT License (MIT)