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 |
Revision 1.4, 2016-JUL-13 @667.beats