piwik-wrap

A Promise-based wrapper for the Piwik JavaScript Tracking Client providing an enjoyable API

piwik-wrap wraps the Piwik JavaScript Tracking Client and provides an easy to use API for non- and Single Page Applications without polluting global namespace. All JavaScript Tracking Client methods are directly accessible through piwik-wrap.

usage

.init()

Before any other call Piwik must be initialized.

// client bootstrapping 

import Piwik from "piwik-wrap";

// ... some other imports and declarations

Piwik.init("https://my.piwik-instance.com", siteId);

.loadScript()

.loadScript() returns a Promise and initializes the Promise-chain.

Piwik
    .init("https://my.piwik-instance.com", siteId)
    .loadScript()
    .catch((err) => console.error(err));

.then()

// e.g. in a Controller

var Piwik = require("piwik-wrap");

// ...

Piwik
    .init("https://my.piwik-instance.com", siteId)
    .loadScript()
    .then(() => Piwik.setDocumentTitle(document.title)
    .then(() => Piwik.setCustumUrl(document.location.href)) 
    .then(() => Piwik.trackPageView());

.queue()

It is also possible to use .queue() if you are unfamiliar with Promises.

// client bootstrapping

import Piwik from "piwik-wrap";

// ...

Piwik.init("https://my.piwik-instance.com", siteId).loadScript();

// app.js

class App {

    // ...
    
    changePage() {
        Piwik
            .queue("Piwik.setDocumentTitle", document.title)
            .queue("setCustumUrl", "document.location.href")
            .queue("trackPageView");
    }
    
    // ...

}

.p

// client bootstrapping

import Piwik from "piwik-wrap";

// ...

Piwik.init("https://my.piwik-instance.com", siteId).loadScript();

// PageA.js

class Page {

    // ...

    initTracking() {
        const link = document.querySelector("#trackThisLink");
    
        link.addEventListener("click", (e) => {
            Piwik.p.then(() => Piwik.trackLink(e.target.getAttribute("href") "linkType");
        }, false)
    }
    
    // ...

}

// PageComponent.js

import React from "react";
import Piwik frtom "piwik-wrap";

const PageComponent = React.createClass({
    // ...
    
    componentDidMount() {
        Piwik.p
            .then(() => Piwik.setDocumentTitle(document.title))
            .then(() => Piwik.setCustumUrl(document.location.href))
            .then(() => Piwik.trackPageView());
    }
    
    // ...

});

Piwik-API-Reference

Check: JavaScript Tracking Client.