Problems tracking Ajax clicks with jQuery

Support & Bugs
1

Hi, I wonder if someone can tell me what I’m doing wrong. I have a one page site on which clicks on the nav simply animate content sections into view. I installed Piwik and it tracks page loads no problem, but I’m trying to track navigation clicks as pageviews and can’t seem to get it to work.

Here’s the click code (fired within a jQuery document ready function of course)

jQuery(’.page-item-15 a, #home_art’).click(function(e) {
e.preventDefault();
showArt();
_paq.push([‘trackPageView’, ‘art’]);
});

The click is registered as a pageview in Piwik, but not for “art,” it just registers it for whatever page is physically shown in the browser, so “/index” if I’m on the home page.

I really don’t want to add onclick to the link markup like the documentation suggests, isn’t this possible from within a jQuery click function? Is there something else that I need to do to make the _paq object fully available there?

Here’s the Piwik code loaded in my header too, (I just changed the URL since it’s not a live site yet):

var _paq = _paq || [];
_paq.push([‘trackPageView’]);
_paq.push([‘enableLinkTracking’]);
(function() {
var u=((“https:” == document.location.protocol) ? “https” : “http”) + “://MySite.com/piwik//”;
_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.defer=true; g.async=true; g.src=u+‘piwik.js’; s.parentNode.insertBefore(g,s);
})();

Thanks in advance for any help!

David

2

Please check http://piwik.org/docs/javascript-tracking/#toc-list-of-all-methods-available-in-the-tracking-api

You probably need to use setUrl or setDocumentTitle. trackPageView doesn’t take parameters.

3

Thanks for the quick reply. I just tried setUrl and setDocumentTitle and neither seems to work for me. Here’s the test code:

jQuery(’#artLink’).click(function(e) {
e.preventDefault();
_paq.push([‘setDocumentTitle’, ‘art’]);
});

and

jQuery(’#artLink’).click(function(e) {
e.preventDefault();
_paq.push([‘setUrl’, ‘http://myDomain.com/art’]);
});

Neither registers a click at all in Piwik, unless I also add the trackPageView line:

jQuery(’#artLink’).click(function(e) {
e.preventDefault();
_paq.push([‘trackPageView’]);
_paq.push([‘setDocumentTitle’, ‘art’]);
});

But then the click just registers as the current page, not “art”

I’m also confused because the documentation in the link you posted does list a parameter for trackPageView:

trackPageView([customTitle])- Log visit to this page

I must be missing some step in the process, maybe someone who has gotten this to work would be willing to post their code?

Thanks,
David

4

Hi David,

I was trying the same thing. You have to set the trackPageView after you have defined your custom page title. Here’s a sample code that worked for me. Try it out in Chrome Console.

_paq.push([‘setDocumentTitle’, document.title]);
_paq.push([‘trackPageView’]);

But this will not solve your problem. From what I have read, you want to capture click events which trigger ajax requests that load content for you. You can create a generic $(document).ajaxComplete(function() {}); and put in the above code in it. That way when each ajax request completes, it will log some stuff in piwik for you. The issue here is, what and how you will track the stuff. I was working on the same thing and have thought of using either the content tracking feature or setting goals. But am not 100% sure how to achieve this.

5

setUrl could not work it should be setCustomUrl
_paq.push([‘setCustomUrl’, ‘http://myDomain.com/art’]);

http://developer.piwik.org/guides/tracking-javascript