In which version did Custom Javascript show up?

[rod]

Between version 1.4.5 and 1.12.1 when did the Custom Javascript area show up in addition to the Custom CSS/LESS and Custom Header areas?

I ask because now with the Custom Javascript area I can no longer include the <script type="text/javascript"> and </script> tags which I believe is why my custom javascript no longer works.

When looking at my browser's console don't see my code snippet being parsed as javascript.

[baris]

It was added in 1.7.0, you can use the custom HTML section to add <script> tags to the head section.

[rod]

@baris I moved my javascript from Custom Javascript to Custom Header but now I get an error (in my browser javascript console) that a variable cannot be found. Do you have a suggestion on what I should look at to resolve this?

Can't find variable: $

And this is the code snippet:

    $(window).on('action:ajaxify.end', function(ev, data) {
        firePiwik(data);
        console.log('in ajaxify.end area')
    });

Thank you.

[baris]

Try

window.addEventListener('load', function () {
    $(window).on('action:ajaxify.end', function(ev, data) {
        firePiwik(data);
        console.log('in ajaxify.end area')
    });
    firePiwik(ajaxify.data);
});

[julian]

@rod you don't need the script tags in the custom JavaScript portion... It is already automatically wrapped in them

[rod]

@julian Thanks Julian, my code doesn’t work their either but I don’t get the “$” error that I previously posted. @baris posted a response, I’ll give that a try. If I get it working in Custom Header I’ll try to move it to Custom JavaScript

[rod]

@baris @julian That didn't help. My code snippet was just a piece of the javascript. Here is all of it, maybe that will help figuring out why the $(window)... bit no longer works since upgrading from 1.4.5

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.end', function(ev, data) {
        firePiwik(data);
    });
})();

The problem is that pesky $(window) area. I tried to replace it with the suggestion you made but that also didn't work and spewed number of other console errors.

I think you could just drop this whole code bit into your Custom Javascript area and see it in action. The URL won't be correct but that shouldn't matter.

I really want to get this working so I can stay current with my NodeBB versions. I really do.

Thanks!

[baris]

This should work in custom javascript area I think.

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);

    // added this line
    firePiwik(ajaxify.data);

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

Let me know if you are getting any errors with this.

[rod]

@baris said in In which version did Custom Javascript show up?:

firePiwik(ajaxify.data);

This has not solved the problem. Possibly closer, but not solved. I have my code back in Custom Javascript. I am not seeing errors for that in my browser console.

It now behaves like it just doesn't execute firePiwik(data); in the "$(window)" area. This is all so strange.

Thanks.

[baris]

Can you put a console.log(data) inside function firePiwik (data) { and check your browser console. Does it print anything when you refresh the page?

[rod]

@baris I added that to the function, I see data being displayed. Is there anything specific I should be looking for? I could give you access to the forum (it is a dev forum not prod) if you wanted to poke on it directly.

[baris]

If you see the data and if your <head> has the piwik.js file then I am not sure why it is not working.

[rod]

@baris The odd thing is that it works in 1.4.5. Should it work if I move it to Custom Header with the script tags around it? Because when I try that I do get an error in the console and do NOT get any of that data form the console.log output.

The error I get when it is in Custom Header is ReferenceError: Can't find variable: ajaxify

[baris]

If you put it in custom header you need to wrap it in

window.addEventListener('load', function () {
// rest of the code
});

so it waits for the scripts to load otherwise ajaxify will be undefined.

[rod]

@baris You lost me on that last post. What section do I wrap in window.addEventListener('load', function ()?

[baris]

Everything. If you put it in custom header it should look like this

<script>
window.addEventListener('load', function () {
    var _paq = _paq || [];
    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);

    // added this line
    firePiwik(ajaxify.data);

    $(window).on('action:ajaxify.end', function(ev, data) {
        firePiwik(data);
    });
});
</script>

[rod]

@baris I cannot get this to work. My new plan is to destroy my 1.12.1 version and install 1.6.x and test. If that works do the same going to version 1.7.x and test, and keep jumping forward until it doesn’t work and then report back.

Thank you for all of your help thus far.

[rod]

@baris. I reverted my dev site back to my production '1.4.5' version and it logged properly to Piwik (Matomo.). I upgraded to v1.6.1 and that version worked fine also, reporting to Piwik.

I upgrade to v1.7.5 and voila reporting to Piwik no longer works. The 1.7.x branch is the one in which the Custom Javascript was broken out from Custom Header. I truly believe this is the root of the problem.

Has anyone else reported oddities with custom javascript after the introduction of the 1.7 branch?

Thank you.

[baris]

We got a few reports of action:ajaxify.end not triggering since the scripts were moved to the footer but those are fixed by the code sample I showed.

Maybe it has to do with the way the piwik script is being loaded. Can you try this in custom header instead.

<script type="text/javascript" src="//your.piwikurlhere.com/piwik.js"></script>
<script>
window.addEventListener('load', function () {
    console.log(window.hasOwnProperty('_paq'))
    var _paq = _paq || [];

    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]);
    }

    // added this line
    firePiwik(ajaxify.data);

    $(window).on('action:ajaxify.end', function(ev, data) {
        firePiwik(data);
    });
});
</script>

Then check browser console to make sure piwik is properly loaded.

[rod]

@baris Still no success. I am watching the web server logs of the Piwik server and I see a hit for the loading of "/piwik.js" (as I should as you call the URL in your first script tag but I don't see any further web server entries after that.

I switch over to the my production NodeBB forum and while watching the Piwik web server log files I see all of the action I expect to see.

Is there any sort of special widget or plugin I could install in which I could put this javascript and have it run as it should. I wonder what in NodeBB is stomping on it?

I do see true in my browser console, from console.log(window.hasOwnProperty('_paq'))