Uncaught ReferenceError: piwikTracker is not defined

Question

Piwik tracker allows custom tracking as such:

jQuery('div.orange').click(function() {
    piwikTracker.trackGoal(3); // Track click on this hitarea
});

In my WordPress environment, I'm loading this jQuery in a script separate from the piwik.js script for obvious reasons.

In Chrome, I receive the error

Uncaught ReferenceError: piwikTracker is not defined

on the script that I'm using custom tracking.

Is there a way I can define the function before calling the event handler function? Why only Chrome?

EDIT

I checked out the piwik php script that loads the JavaScript and it's actually loading the script in the footer. The function that calls for the custom tracking is loaded in the header. Does this matter? Do scripts in the header always get loaded before the footer?

Answer 1

Asynchronous tracking solves this problem in an elegant way:

var _paq = _paq || [];
_paq.push(['trackGoal', 3]);

If piwik was loaded before, this automatically sends the Goal Request. If piwik is loaded after it, it is only an array that will be processed once piwik is loaded!

See documentation on how to set up asynchronous tracking, it will be the default method for Piwik 1.11.

Answer 2

Yes. Where you put the script in the page matters. Thinking that, when the browser interprets the page, it will read the head first, and then body. For your case, you better check the DOMReady and the object piwikTracker first.

jQuery(document).ready(function() {
    jQuery('div.orange').click(function() {
        if (piwikTracker) {
            piwikTracker.trackGoal(3); // Track click on this hitarea
        }
    });
});