How To: Piwik and NodeBB

rod

Piwik and NodeBB

Introduction

So you have your shiny NodeBB forum up and running. Hopefully it is spilling over with content and you have many glorious visitors. But do you? How do you know? Analytics of course! Huh, analytics you say?

Analytics
the method of logical analysis ^1

So what do you do? You load a big giant googly companies analytics plugin. And then you realize this:

All your analytics are belong to us.

And then you are scared. What can you do about that? The answer is simple, you run your own analytics program! Piwik to the rescue. Go ahead, go there, get it all setup ^2. I'll wait.

Great! Welcome back. I trust you have your Piwik installation running and ready to analyze data from your NodeBB. The hard part is over now. All that is left is making a few customization tweaks to NodeBB.

NodeBB

Tracking Code

The tracking code. These are the bits that make the magic work. We need to tell Piwik about our visitor's actions. What are they looking at, what are they posting and even what are they searching for. NodeBB's custom header function is a wonderful fit for all of this. All that needs to be done is pasting in the following code with only a couple of slight adjustments.

Add the following tracking code to your NodeBB forum's custom header.

ACP > Appearance > Custom HTML & CSS > Custom Header

Change your.piwikurlhere.com to your actual Piwik URL. It could be a subdomain on your NodeBB domain or it could be an entirely different domain but it is the one you used when you installed and configured Piwik. If this is your first and only site that Piwik is tracking then the default site ID of 1 will be sufficient. If it isn't than update the site ID (setSiteID and idsite) to the appropriate value. You will know this from your Piwik installation and configuration.

<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
(function () {
    var u = "//your.piwikurlhere.com/";

    function firePiwik (data) {
        if (app.user && app.user.uid > 0) {
            _paq.push(['setUserId', app.user.uid.toString()]);
            _paq.push(['setCustomVariable', 1, "appUserUsername", app.user.username, "visit"]);
        }
        _paq.push(['setDocumentTitle', document.title]);
        _paq.push(['setCustomUrl', location.href]);
        _paq.push(['enableHeartBeatTimer']);
        _paq.push(['appendToTrackingUrl', 'bots=1']);
		if (data.tpl === 'search') {
			_paq.push(['trackSiteSearch', ajaxify.data.search_query,, ajaxify.data.matchCount]);
		} else {
			_paq.push(['trackPageView']);
		}
        _paq.push(['enableLinkTracking']);
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        _paq.push(['setSiteId', 1]);
    }

    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);

    $(window).on('action:ajaxify.contentLoaded', function(ev, data) {
        firePiwik(data);
    });
})();
</script>
<noscript><p><img src="//your.piwikurlhere.com/piwik.php?idsite=1&rec=1&bots=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

Set Enable Custom Header to on, and press that floppy disk^3 icon^4 to save all of your hard work.

Reload or restart your NodeBB forum to be sure that the system is now injecting the tracking code with the pages that NodeBB generates. Visit your NodeBB forum and check your Piwik dashboard for activity.

Conclusion

And there you have it. Analytics! Implementing Piwik like this also allows that other googly analytics plugin to work simultaneously if you so desire to have the benefits of that all seeing eye. It is also possible to add additional tracking services^5 along with Piwik in the custom header.

Known Working Compatibility

N'BB		Piwik
`v1.1.0`		`2.16.1`
`v1.0.2`		`2.16.1, 2.16.0`
`v1.0.0`		`2.16.0, 2.15.0`
`v0.9.4`		`2.16.0, 2.15.0`
`v0.9.3`		`2.15.0`

Contact me https://community.nodebb.org/user/rod

Revision 1.4, 2016-JUL-13 @667.beats

psychobunny

Awesome. IIRC my idea for setting up a tutorials category came from your promise to deliver a Piwik tutorial. And you didn't disappoint, great job. Thanks!!

julian

Nice tutorial! No need for a plugin for Piwik I see

rod

If anyone would like to have Piwik analytics for their forum but do not have the resources to run the Piwik system let me know. If there is enough interest I may be able to make a NodeBB / Piwik analytics system available for you.

hukadan

@rod Thank you. You can add v1.0.0 <----> 2.15.0 to your compatibility list.

rod

Added v1.0.2 <-> 2.16.0 to known good versions.

rod

Added v1.0.2 <-> 2.16.1 to known working versions.

rod

Added v1.1.0 <-> 2.16.1 to known working versions.

AOKP

@rod every Piwik version will work.

hmj

Hi there,

Is there any other way to implement piwik other then adding it to the header. I've done it in my setup and it seems to be working but when I compare the internal dashboard with piwik the internal dashboard shows about approx three times more unique visits and page views.

Is there parts of nodebb where the header isn't loaded or other oddity that could explain this.

julian

@hmj That discrepancy can likely be explained by Piwik only tracking cold page loads, whereas NodeBB tracks page transitions as well (that is, going between pages).

@rod I see there is code to fire Piwik when a page transition finishes:

    $(window).on('action:ajaxify.contentLoaded', function(ev, data) {
        firePiwik(data);
    });

Any chance you could test this to ensure that it is actually working?

rod

@julian said in How To: Piwik and NodeBB:

@hmj That discrepancy can likely be explained by Piwik only tracking cold page loads, whereas NodeBB tracks page transitions as well (that is, going between pages).

What do you mean by that? In my Piwik I see visitors moving between topics

@rod I see there is code to fire Piwik when a page transition finishes:
    $(window).on('action:ajaxify.contentLoaded', function(ev, data) {
        firePiwik(data);
    });
Any chance you could test this to ensure that it is actually working?

Yes, I believe this is working. Suggestion on how to test this?

pichalite

@rod @hmj does piwik count search bots as visitors or ignore them? That might explain the difference.

hmj

@pichalite I am quite sure that Piwik ignores them, installed a plugin to count bots now and I cannot see that it accounts for around 4k unique visits and at least 40k pageviews per day that are not counted in Piwik. I added GA tracking yesterday as well to compare to the two and GA seems to be in line with Piwik.

So I'm a bit baffled by the amount of traffic Nodebb is showing in it's backend.

julian

@hmj What other plugins do you have installed? Could be one of them are hammering some routes

hmj

@julian Not sure here is a list of the plugins we are using.

Activated plugins:
nodebb-plugin-composer-default
nodebb-plugin-dbsearch
nodebb-plugin-emoji-extended
nodebb-plugin-emoji-one
nodebb-plugin-markdown
nodebb-plugin-mentions
nodebb-plugin-spam-be-gone
nodebb-plugin-sso-oauth
nodebb-widget-essentials

So I've added GA to the mix. I did that with adding it in the same custom header as to validate that my Piwik installation is not on the fritz. Comparing the two I see a little fewer unique visits between the two in piwik but almost exactly the same amount of pageviews.

Nodebb is still off by a factor of three in unique visits and around a factor of three to ten in pageviews.

hmj

Did this piwik code break for anyone else on the 1.6 upgrade?

0_1508334234807_0f84cd27-16b4-442e-b972-e769f9d14e01.png

Index 86: $(window).on('action:ajaxify.contentLoaded', function(ev, data) {
Index 89: })();

julian

@hmj v1.6.1? or v1.6.0... it may be that the piwik plugin needs updating.

Edit: Actually, doesn't seem like there is a piwik plugin... are you just putting it in the custom HTML page?

hmj

@julian Yeah that code at top is put into Appearance -> Custom HTML & CSS -> Custom Header. That had worked fine until the last upgrade.

julian

@hmj Are you on the develop branch? The code should still work fine in master.

Also can you please paste the code here?