Monitor clicks on different UI elements

Support & Bugs
1

Hi!

I would like to analyse the usage of different navigation possibilities on my site.

Say, I have a blog, that offers different ways to continue from the landing article or front page: 1) a “latest posts” widget, 2) a “similar posts” feature, offering links to three other posts, 3) a “next/previous post” navigation above the post, 4) a “next/previous post” navigation below the post.

In order to optimise navigation and encourage users to read more stuff, I need to know which navigation elements are used often and which aren’t.

As an example: YouTube seems to do this, by adding feature=topvideos or feature=related to the URL.

As I understand them, both campaigns and custom variables are meant to specify the source or type of a users visit. But I need to monitor the type of every action (a.k.a. click) of the user.

How would I do that with Piwik? Thanks for any hint.

2

I would do it this way:

  • add a hash tag with the block the user used to land on the page, eg. /post-xyz#relatedposts
  • on each page, look for the hashtag in javascript, and based on the hashtag (#relatedposts #samecategory etc.) you can trigger a Goal conversion for this hashtag.

pseudo code:


// Normal Piwik code
piwikTracker.trackPageView();
[...]

// Custom goal conversion
idGoal = 0;
if( hashtag == 'relatedpost' ) idGoal = 1
else if (hashtag == 'samecategory')  idGoal = 2

if(idGoal > 0) piwikTracker.trackGoal(idGoal)

please post the real JS code here if you end up doing this :slight_smile:

3

OK, thank you.

Goals look like a good idea. Maybe I don’t even need extra javascript code but can just use a regex on the URL in Piwik’s goal definition. So the only thing is to add the info to my URLs.

I’ll report how it went :wink:

4

Here’s what I’m testing now: I’ve added goals in Piwik, that simply check URLs for containing my hashes.

In order to keep the site markup clean, I inject the additional hashes with Javascript.

It’s easy with jQuery:


jQuery(".nav-related a").each(function(){
		jQuery(this).attr("href",
			jQuery(this).attr("href")+"#related"
		);
	});

There’s only one drawback I have in mind: If people share the URL of one of my pages now, they are likely to copy the hash, too, which will result in false goal conversions whenever a new visitor comes via the copied URL.

A possible solution is to empty the hash in window.location.hash after a few seconds, once Piwik has picked up the conversion. (See http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh)