Can a specific route include specific js - Piwik tracking

[rod]

I am fine tuning my Piwik analytics system configuration for my NodeBB forum and realize that Piwik was not capturing site searches. By default Piwik is configured to look for the URL parameters most associated with web searching. Those being "q, query, s, search, searchword, k, keyword." NodeBB does not use any of those as it's search parameters. It uses "in" instead. As in ?in=titlesposts. I have adjusted my Piwik to look for "in" as the search parameter and now I am tracking the site searches.

Except, Piwik is recording the search as "titlesposts" and not the keyword that is mangled in the URL prior to the ?in= parameter. For example the URL result of a search is:
https://mydomainexample.com/search/somesearchstring?in=titlesposts

So, after researching Piwik more they offer the ability to track the search parameters via a unique javascript. My question is, does NodeBB offer the ability to insert custom js for a specific route? In this case the route being /search/. Or possibly you have an alternate solution suggestion for my quandary?

Thank you.

[pichalite]

@rod You can run custom JS for a specific route in NodeBB. What ever you add in the if statement will only run on the search route.

$(window).on('action:ajaxify.contentLoaded', function(ev, data) {
  if (data.tpl_url === 'search') {
    // things to do for this route
  }
});

[rod]

@pichalite @Community-Representatives

I NodeBB and you guys...

[rod]

@pichalite I'm getting an ReferenceError: data is not defined error when I try to use data.tpl_url

[psychobunny]

That's odd... data is always passed in this hook. Maybe there's a typo somewhere, post the whole code?

[rod]

@psychobunny This is in Custom Header :

<script type="text/javascript">
var _paq = _paq || [];
(function () {
    var u = "//my.piwikcollector.com/";

    function firePiwik () {
        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_url === 'search') {
			_paq.push(['trackSiteSearch', "test", "test", "false"]);
		} 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.end', function(ev, data) {
        firePiwik();
    });
})();
</script>

I have tried both action:ajaxify.contentLoaded as well as action:ajaxify.end with the same result.

[psychobunny]

Oh, looks like you're not passing data.

<script type="text/javascript">
var _paq = _paq || [];
(function () {
    var u = "//my.piwikcollector.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_url === 'search') {
            _paq.push(['trackSiteSearch', "test", "test", "false"]);
        } 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.end', function(ev, data) {
        firePiwik(data);
    });
})();
</script>

[rod]

@psychobunny Now with:

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

Same error.

[rod]

@psychobunny Problem found.
I need data in two places. Doh.

[psychobunny]

Haha, didn't I do that on the code I edited for you above?

[rod]

@psychobunny Yes, yes, but I wasn't pasting back the entire bit. I was just looking for the diff.

That console error is resolved but now I get an "undefined" for data.tpl_url

[rod]

This is what it looks like now, I added a couple of console.log commands to see what is going on:

<script type="text/javascript">
var _paq = _paq || [];
(function () {
    var u = "//my.piwikcollector.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_url === 'search') {
			_paq.push(['trackSiteSearch', "test", "test", "false"]);
			console.log('in search ' + data.tpl_url);
		} else {
			_paq.push(['trackPageView']);
			console.log('not in search ' + data.tpl_url);
		}
        _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.end', function(ev, data) {
        firePiwik(data);
    });
})();
</script>

[pichalite]

@rod apparently there is no tpl_url in data

use if (data.tpl === 'search')

[rod]

@pichalite and @psychobunny Yes, yes. Now it is working better. Thank you.

How do I see what other variables are available specifically related to the search. Really my code bit needs to report to Piwik the search term and hopefully the result count.

_paq.push(['trackSiteSearch', searchTerm,, resultCount]);

Are those two variables available to me?

Thank you.

[pichalite]

@rod add a console.log(data); to your code and you can see what's in the data object in your browser console

the data object has url and tpl

if there is a search query, then the url will look like this
search/welcome?in=titlesposts&sortBy=timestamp&sortDirection=desc&showAs=posts

so the part between search/ and the ? is the search term. welcome in this case.

[rod]

@pichalite Are there any other objects that would report back the number of results? The actual search page does return the number. Is that available to my js code bit?

[rod]

Looking at the source for NodeBB on github in search.js I see this:

if (data.searchIn === 'posts' || data.searchIn === 'titlesposts') {
					search.searchQuery('post', data.query, results.searchCids, results.searchUids, next);

Is the data.query object available to me?

[pichalite]

@rod yup, should be available in ajaxify.data.matchCount

[rod]

@pichalite that worked like a champ. I was hoping that ajaxify.data.query would also work but it did not.

[pichalite]

@rod it is available in ajaxify.data, use ajaxify.data.search_query