Using Piwik with Requirejs

Knowledge base
1

Hi There,

Is anyone out there willing to share how they use piwik with requirejs? I’m happily loading piwik as a module using the paths config (‘piwik’:’//myurl/piwik’) but I can’t seem to get it going from there. I’ve got the module below setup to try and pass the _paq object to other modules but it just seems to be a plain old array and doesn’t trigger anything on a _paq.push().


define([], function () {
    "use strict";
    var _paq = _paq || [], u;
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    u=(("https:" == document.location.protocol) ? "https" : "http") + "://urltopiwiksite.com/";
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "2"]);
    require(['piwik']);
    return _paq;
});
2

After another crack I’ve got it going well with the following:
in requirejs config:


paths: {
    'piwik' : '//urltopiwikserver/piwik'
}

then a module that exports the _paq object:


define(['piwik'], function (piwik) {
    "use strict";
    var u;
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    u = (("https:" === document.location.protocol) ? "https" : "http") + "://urltopiwikserver/";
    _paq.push(["setTrackerUrl", u + "piwik.php"]);
    _paq.push(["setSiteId", "2"]);
    return _paq;
});

Hopefully someone else finds it useful

3

After trawling the internet for hours, your solution works perfectly - thank you!

Piwik needs to document use with RequireJS properly.

4

Hi guys,

personnally i’m not familiar with it. If you are using it, would you mind contributing a small simple user doc? I will gladly add as a FAQ so other users can find it easier! thanks in advance.

5

sure, how would I contribute a doc - is there a guideline somewhere?

6

How long would it be? There are two format 1) FAQs (1-4 paragraphs) and if longer, we could make a guide, but FAQ would be preferred :slight_smile:

For a guide see other examples of FAQs. I will add it if you post it here. Thanks so much for your help improving the collaborative docs!

7

It is possible to add piwik to your requirejs setup.

First add the the piwik server code in your paths config as you would a cdn:


paths: {
    'piwik' : '//urltopiwikserver/piwik'
}

Then create a tracking module that depends on ‘piwik’ like so (and save it as say utils/tracking.js). Make sure to change the ‘urltopiwikserver’ and “setSiteId” variables to match your piwik setup :


define(['piwik'], function (piwik) {
    "use strict";
    var u;
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    u = (("https:" === document.location.protocol) ? "https" : "http") + "://urltopiwikserver/";
    _paq.push(["setTrackerUrl", u + "piwik.php"]);
    _paq.push(["setSiteId", "2"]);
    return _paq;
});

Then require your tracking module. You can use the _paq object to trigger other events etc within your application eg goal tracking:


/* Start the main app logic. */
requirejs([ 'util/tracking'], function ( _paq) {
	_paq.push(['trackGoal', 1]);
});