Tracking on click/mousover
I was asked to add tracking of downloads to the CMS I've written. The problem is that people can insert links to documents anywhere in the content. Also a landing page wasn't going to be acceptable, so the tracking would have to not interfere with the link still downloading the file. This tracking would also have to put in the user if signed in.
By doing a text replace on the content for an "A" link that referenced the document directory I could programmatically insert an onclick event for the A that I had replace the background image of the link with the output of a page that I created that could do the tracking. I later realized that I could just have javascript load the page and so didn't have to mess with the background image or have the page output anything. Since this could also be done on mouseover/mouseout I could track even how long they hovered over a link even if they didn't click it.
This actually works amazingly well. By passing "this.href" through I could also easily know which document they had clicked on. I was a little worried about the href and onclick interfering with each other, but it seems to work fine on all browsers.
The on the fly replace trick is one I use for a very simple (and not very secure) files that require registration option. I have the CMS allow for uploading files to a registration required directory and then search and replace on a links referencing files in those. Again not secure at all, but most of the time the only reason these files are set up this way is to harvest leads. This allows for files to be uploaded anywhere, and is easy to implement.
I used XMLHttpRequest to make the request for the page in javascript.
By doing a text replace on the content for an "A" link that referenced the document directory I could programmatically insert an onclick event for the A that I had replace the background image of the link with the output of a page that I created that could do the tracking. I later realized that I could just have javascript load the page and so didn't have to mess with the background image or have the page output anything. Since this could also be done on mouseover/mouseout I could track even how long they hovered over a link even if they didn't click it.
This actually works amazingly well. By passing "this.href" through I could also easily know which document they had clicked on. I was a little worried about the href and onclick interfering with each other, but it seems to work fine on all browsers.
The on the fly replace trick is one I use for a very simple (and not very secure) files that require registration option. I have the CMS allow for uploading files to a registration required directory and then search and replace on a links referencing files in those. Again not secure at all, but most of the time the only reason these files are set up this way is to harvest leads. This allows for files to be uploaded anywhere, and is easy to implement.
I used XMLHttpRequest to make the request for the page in javascript.
Labels: cms, document, download, registration, tracking
posted by Jiro Feingold at
10:29 AM
1 Comments:
If you are ever concerned that the onclick will fail and default to the href - you can just put return false in your onclick event and your href will be ignored in all cases, regardless of what action happens. you could also extract the href and delete it, then apply it to the onclick. Something like
function foo(el)
{
var tmp = el.href;
delete el.href;
el.onclick = function() { window.location = tmp }
}
This is what I usually do in this type of situation, if I need to run any logic at all on an link in xhtml that multiple people are updating.. Then I key it off an the element ID and build the logic/id association with a dynamic onclick event.
Its friday night and I cant stop thinking about javascript. Damn it!
Post a Comment
<< Home