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?

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?

• javascript
• jquery
• matomo

• Have you verified in the "Network" tab that the script is being loaded? – Pekka Commented Jun 28, 2012 at 17:37
• just did and it's not! It does in IE and Firefox. – AlxVallejo Commented Jun 28, 2012 at 17:44

3 Answers 3

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.

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

Try putting your code in ready handler:

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

Or onload event whichever works:

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