Neurologically Paralyzing Mouseovers
    Have ideas to improve npm?Join in the discussion! »

    react-router-piwik
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    React-Piwik library

    This library is inspired by piwik-react-router for the react-router part and publish a public method to track custom events.

    Installation

    npm install --save react-router-piwik

    or

    yarn add react-router-piwik

    Usage

    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-router-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-router-piwik';
    
    ReactPiwik.push(['trackEvent', 'eventCategory', 'yourEvent']);

    Options

    enableLinkTracking: true

    Link tracking to track outgoing and download links is enabled by default.

    trackDocumentTitle: true

    Updates the document title before adding a new page view as the title may changed during the route rendering.

    API

    push(args)

    Pushes the specified args to the Piwik tracker the same way as you're using the _paq.push(args); directly.

    connectToHistory(history,trackAtConnect,callBack)

    Adds a listener to the passed in history and optionally triggers track(location) based on trackAtConnect whenever the history changes.

    //callBack 为 promise对象函数 可以根据路由地址获取title
    function getEvent(){
      return new Promise(
        function (resolve, reject) {
           resolve('成功')
          // reject('失败') // 数据处理出错
        }
      )
    }
    
    ReactDOM.render(
      <Provider store={store}>
        <Router routes={routes} history={piwik.connectToHistory(history, trackAtConnect, getEvent)} />
      </Provider>,
      document.getElementById('root'),
    );

    disconnectFromHistory()

    Disconnects Piwik from a previous connected history. Returns whether it could successfully disconnect.

    Contributing

    1. Fork the repo
    2. Make changes to src/React-Piwik.js
    3. run npm i && npm run build
    4. Commit changes and make pull request

    Install

    npm i react-router-piwik

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    158 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar