AJAX Link Tracker, Interesting / Useful Options

[whitemark]

"One of the more interesting aspects of Ajax is the ability to track a user’s interaction within the browser. I wanted to investigate navigation patterns, so I have written an Ajax based link tracker. If you press the “Ctrl” and "X" keys you will be presented with an overlay which displays links usage by percentage. This functionality was created with JavaScript and a very simple API."

Check out - Ajax Link Tracker

Be sure to press the "Ctrl + X" keys after the page has loaded. Definitely useful for web designers / copywriters. (Yes, many analytics do offer this. It's the method used here to implment something similar that's really interesting.)

[eKstreme]

Interesting! I'm already on the case writing a PHP backend - I can already track links. I'll post back the downloads once done

[randfish]

Thanks whitemark - I just blogged on this and I appreciate the reference.

[whitemark]

Randfish, thanks for the credit in the blog post. eKstreme, a PHP backend would be great, and really increase the products userbase ... let us know how it goes.

[eKstreme]

Finally got it to work. Did I ever mention that JS and XML are a pain in the posterior?

Full details can be found here.

Hope you like it

Pierre

PS - For future reference: if anyone is sending XML for AJAX stuff like this, check your line endings. I noticed that if the PHP sends XML lines ending with \n, the AJAX breaks. Without any line breaks, it works a treat.

[dazzlindonna]

Ok, that's just too cool for words.

Question: does this work with js links (such as adsense for example)?

This post has been edited by dazzlindonna: Feb 28 2006, 04:25 PM

[eKstreme]

Ok, that's just too cool for words.

Question:  does this work with js links (such as adsense for example)?

Good question! I just tried it with a JS document.write standard link and it worked

Now imagine if this manages to track AdSense clicks? That would be cool!

[projectphp]

Aren't AdSense clicks in an iframe? Does this work with iframes? That is the question I guess!

[dazzlindonna]

>>Aren't AdSense clicks in an iframe?

Are they? I hadn't realized that.

>>Now imagine if this manages to track AdSense clicks? That would be cool!

Yep, that's why I was asking.

[whitemark]

Cool!

To track Adsense ads, I am guessing additional modification will need to be made. I am trying to make an adsense tracker too, and these are the javascript codes that I've so far discovered on the net to do it: (P.S: The JS code below isn't enough to track adsense clicks, you need a script on the sever too) :

adsense_clicklogger.js

HTML

<script type="text/javascript">
<!--
// THIS CODE MUST BE **AFTER** THE ADSENSE CODE
function adsense_log_click()
{
if(window.status.indexOf('go to') == 0)
{
adsense_log_url_image = new Image();
adsense_log_url_image.src = '/adsense_clicklogger.php?R=' +
escape(document.location) + '&U=' +
escape(window.status.substring(6));
}
}

var elements;
if(document.getElementsByTagName) {
elements = document.body.getElementsByTagName("IFRAME");
} else if (document.body.all) {
elements = document.body.all.tags("IFRAME");
} else {
elements = Array();
}
for(var i = 0; i < elements.length; i++) {
if(elements[i].src.indexOf('googlesyndication.com') > -1) {
elements[i].onfocus = adsense_log_click;
}
}

//-->
</script>

Corresponding server side PHP code for use with above JS script (adsense_clicklogger.php):

CODE

<?php
/*

ADSENSE CLICK LOGGER VIEWER AND RECORDER SCRIPT IN PHP
VERSION 1.0, March 20, 2004

To view your stats, open adsense_clicklogger.php in your browser.

SETUP:
1. create the table using the mysql create table command below.
2. enter the site database definitions
3. enter the clicklogger javascript code in your web pages
4. make sure that javascript code points to this script

*/

// These are the parameters for connecting to the database.
define ("SITE_DATABASE_HOSTNAME", "localhost");
define ("SITE_DATABASE_PASSWORD", "password");
define ("SITE_DATABASE_USERNAME", "username");
define ("SITE_DATABASE_DATABASE", "database");

/*

CREATE TABLE tblAdsenseClicks (
AdsenseClickID INT PRIMARY KEY AUTO_INCREMENT,
ClickDate DATETIME,
DestinationPage VARCHAR(255),
SourcePage VARCHAR(255),
RemoteAddress VARCHAR(255),
RemoteHost VARCHAR(255)
)

*/

if(isset($_GET['U'])) {
$DestinationPage = mysql_escape_string(substr(trim($_GET['U']),0,255));
} else {
$DestinationPage = "";
}
if(isset($_GET['R'])) {
$SourcePage = mysql_escape_string(substr(trim($_GET['R']),0,255));
} else {
$SourcePage = "";
}
if($DestinationPage != "" && $SourcePage != "")
{
$RemoteAddress = mysql_escape_string(substr(trim($_SERVER['REMOTE_ADDR']),0,255));
$RemoteHost = mysql_escape_string(substr(trim($_SERVER['REMOTE_HOST']),0,255));

$query = "INSERT INTO tblAdsenseClicks ".
" (ClickDate,DestinationPage,SourcePage,RemoteAddress,RemoteHost) ".
" VALUES (".
" '".date("Y-m-d H:i:s")."',".
" '".$DestinationPage."',".
" '".$SourcePage."',".
" '".$RemoteAddress."',".
" '".$RemoteHost."')";

run_query($query);
exit();
}

// Show the statistics page if the U and R variables are not given
?>
<html><head><title>Adsense click stats</title>
<style type="text/css">
table.clickstats {
border-collapse: collapse;
}
table.clickstats th {
color: white;
background-color: #000080;
border: 1px solid #999999;
padding: 3px;
}
table.clickstats td {
border: 1px solid #999999;
text-align: center;
}
</style>
</head>
<body><?php

$query = "SELECT ClickDate,DestinationPage,SourcePage,RemoteAddress,RemoteHost ".
" FROM tblAdsenseClicks ORDER BY ClickDate ";
print_query($query,"clickstats");
print "</body></html>";


// Connects to the site defined database and returns the connection handle.
// Uses a persistent connection and does error checking.
function connect_to_site_database()
{
       // Connect to the mysql server
       $link = mysql_pconnect(constant("SITE_DATABASE_HOSTNAME"),
               constant("SITE_DATABASE_USERNAME"),
               constant("SITE_DATABASE_PASSWORD")) or
        die("Unable to connect to site database!");

       // Select the database
       mysql_select_db(constant("SITE_DATABASE_DATABASE"))
        or die("Unable to select database: ".constant("SITE_DATABASE_DATABASE"));
 
       return $link;
}

// Standard function to run a query, with error checking.
// Returns the resultset.
function run_query($query)
{
       // Connect to the database
       connect_to_site_database();
 
       // Run the query
       $result = mysql_query ($query) or die ("Invalid query: $query");

       // Return the result set
       return $result;
}


// prints the query results in a table with the given table style class
function print_query($query, $table_class)
{
       connect_to_site_database();
               
       // Select all the records from the addressbook and store them in $result
       $result = mysql_query ($query) or die ("Invalid query: $query");

       // Get the number of columns (or fields) in the results
       $num_fields = mysql_num_fields ($result);

       // Get the number of rows in the results
       $num_rows = mysql_num_rows ($result);
       
       // Start printing the table to show all the records
       echo "<table class=\"$table_class\">\n";
       echo "<tr>";
                       
       //  Print out all the field names as the first row table header
       $i=0;
       while ($i < $num_fields) {
                       // Get the field name from the result
                       $fname = mysql_field_name ($result, $i);
                       echo "<th>".$fname."</th>";
                       $i=$i+1;
       }
       echo "</tr>\n";
       
       // Now print out all the data
       while ($row = mysql_fetch_row ($result)) {
               echo "<tr>";
               $k=0;
               while ($k < $num_fields) {
                       echo "<td>".$row[$k]."</td>\n";
                       $k=$k+1;
               }
               echo "</tr>\n";
       }
       echo "</table>\n";
       
       // Do a little clean up
       mysql_free_result($result);
       
}
?>

I didn't code this, but found it on the net. Sorry can't remember who wrote it ...
One problem I heard someone mention is that it doesn't track adsense clicks in Firefox. It doesn't look like it violates any Google Adsense TOS, but use it at your own risk.

This JS script coded by Jim Rutherford can track adsense clicks on Firefox too. (You CANNOT use this with the above PHP script without modifying it):

HTML

// incredibly funky onload add-event scripting, for all browsers

if(typeof window.addEventListener != 'undefined')
{
//.. gecko, safari, konqueror and standard
window.addEventListener('load', adsense_init, false);
}
else if(typeof document.addEventListener != 'undefined')
{
//.. opera 7
document.addEventListener('load', adsense_init, false);
}
else if(typeof window.attachEvent != 'undefined')
{
//.. win/ie
window.attachEvent('onload', adsense_init);
}

//** remove this condition to degrade older browsers
else
{
//.. mac/ie5 and anything else that gets this far

//if there's an existing onload function
if(typeof window.onload == 'function')
{
//store it
var existing = onload;

//add new onload handler
window.onload = function()
{
//call existing onload function
existing();

//call adsense_init onload function
adsense_init();
};
}
else
{
//setup onload function
window.onload = adsense_init;
}
}
function adsense_init () {

if (document.all) { //ie

var el = document.getElementsByTagName("iframe");

for(var i = 0; i < el.length; i++) {
if(el[i].src.indexOf('googlesyndication.com') > -1) {
adUnit = i+1;
browser = "IE";
adunitsize = el[i].width + "x" + el[i].height;
el[i].onfocus = trackAdsense;
}
}

} else { // firefox

window.addEventListener('beforeunload', doPageExit, false);
window.addEventListener('mousemove', getMouse, true);

}

}

//for firefox
var px;
var py;
var adUnit = "";
var browser = "";
var adunitsize = "";

function getMouse(e) {
px=e.pageX;
py=e.clientY;
}

function findY(obj) {
var y = 0;
while (obj) {
y += obj.offsetTop;
obj = obj.offsetParent;
}
return(y);
}

function findX(obj) {
var x = 0;
while (obj) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
return(x);
}

function doPageExit(e) {

ad = document.getElementsByTagName("iframe");
for (i=0; i<ad.length; i++) {
var adLeft = findX(ad[i]);
var adTop = findY(ad[i]);
var inFrameX = (px > (adLeft - 10) && px < (parseInt(adLeft) + parseInt(ad[i].width) + 15));
var inFrameY = (py > (adTop - 10) && py < (parseInt(adTop) + parseInt(ad[i].height) + 10));

if (inFrameY && inFrameX) {
adUnit = i+1;
browser = "Firefox";
adunitsize = ad[i].width + "x" + ad[i].height;
trackAdsense();

}
}

}

//end for firefox



function trackAdsense() {
var path = '<?php echo $Mint->cfg['install_dir'] . "pepper/" . $this->info['src'] . "data.php"; ?>';

// can't use encodeURIComponent everywhere. escape() should work for this scenario
path += "?from_title="+escape(document.title);
path += "&from="+escape(self.location);
path += "&unit="+escape(adUnit);
path += "&browser="+escape(browser);
path += "&adunitsize="+escape(adunitsize);

var data = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try { data = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { data = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { data = false; } }
@end @*/
if (!data && typeof XMLHttpRequest!='undefined') data = new XMLHttpRequest();
if (data) data.open("GET", path, false); data.send(null);

}

I am sure eKstreme won't have any probs in integrating this with his script ...

[eKstreme]

I am sure eKstreme won't have any probs in integrating this with his script ...

Haha! Very funny. I'll see what I can do, but JS is not my forte. Glenn Jones' tracker was easily ported to PHP because he had a simple and standard API.

I'll check those trackers out. Thanks for posting them.

[whitemark]

Take your time ekstreme ... we guys are all very patient here ...

Jokes apart, let me try to help ... In the first javascript (adsense_logger.js), this section of the code:

CODE

var elements;
if(document.getElementsByTagName) {
    elements = document.body.getElementsByTagName("IFRAME");
} else if (document.body.all) {
    elements = document.body.all.tags("IFRAME");
} else {
    elements = Array();
}

for(var i = 0; i < elements.length; i++) {
    if(elements[i].src.indexOf('googlesyndication.com') > -1) {
         elements[i].onfocus = adsense_log_click;
}

searches for all the iFrame in the page since Google serves ad within an iFrame. And then (to put it very roughly, since I am also no javascript expert) it tries to get all the tags within the iFrame.

If you've noticed, when you move your mouse over a google ad, the status bar of the browser displays go to <advertiser url here> instead of the actual Google adsense URL. (Opera displays the actual adsense URL ... another reason why you should use it ... but I digress ...). Using a For loop, the javascript goes through all the tags in the iFrame and identifies the tag containing the google adsense url (which is a url containing the domain name 'googlesyndication.com'). It then (again to put it roughly) monitors this hyperlink (?) tag.

When it detects a click on the url (well not just clicks ...), it calls a function called adsense_log_click.

CODE

function adsense_log_click() {
    if(window.status.indexOf('go to') == 0) {
         adsense_log_url_image = new Image();
         adsense_log_url_image.src = '/adsense_clicklogger.php?R=' +
         escape(document.location) + '&U=' +
         escape(window.status.substring(6));
     }
}

This function calls the PHP script and passes the parameters - the URL of the advertiser of the ad clicked (it extracts this from the google ad status bar text 'go to ...') and the address of the page on which the ad was displayed.

----------------------------------------

In the PHP-AJAX tracker, the following part of the JavaScript function, recordClick(e), calls and passes the parameters to the addclick.php script:

CODE

...
var pars = '';
apiurl = "http://ekstreme.com/tracker/addclick.php?id=" + id + "&label=" + label + "&target=" + target + "&url=" + url + "&rand="+Math.random();
ajaxRequest = new Ajax.Request(apiurl, {method: 'get', parameters: pars, onComplete: passThrough});
ajaxRequest = new Ajax.Request(apiurl, {method: 'get', parameters: pars, onComplete: passThrough});
...

The following parameters are passed:

id: Have my doubts about what this is.
label: The anchor text of the link clicked.
target: The url where the link takes you.
url: The page on which the link was clicked.

To incorporate adsense tracking into the your PHP tracker you could use the adsense_logger function with the following modification:

CODE

<script type="text/javascript">
<!--
// THIS CODE MUST BE **AFTER** THE ADSENSE CODE
// ~~~~~~~~~ NOTE eKstreme: This function (adsense_log_click) is where I think we should call your PHP script ~~~~~~~~~~~
function adsense_log_click() {
    if(window.status.indexOf('go to') == 0) {
     var pars = '';
 
  id = ''; // No real idea what should be here should be ... need to figure out this one
  label = 'adsense'; // Since we can't get the title of the ad, we just name it adsense
  target = escape(window.status.substring(6));
  url = escape(document.location);
 
  apiurl = "http://ekstreme.com/tracker/addclick.php?id=" + id + "&label=" + label + "&target=" + target + "&url=" + url + "&rand="+Math.random();
 
  var opt = {
            method: 'get',
         parameters: par
        }

     ajaxRequest = new Ajax.Request(apiurl, opt);
 }
}

var elements;

if(document.getElementsByTagName) {
    elements = document.body.getElementsByTagName("IFRAME");
} else if (document.body.all) {
    elements = document.body.all.tags("IFRAME");
} else {
    elements = Array();
}

for(var i = 0; i < elements.length; i++) {
    if(elements[i].src.indexOf('googlesyndication.com') > -1) {
        elements[i].onfocus = adsense_log_click;
    }
}

//-->
</script>

That should take care of passing the data to the script and storing it into the database. However, displaying it is another thing. Obviously, you won't be interested in sharing your adsense click data with everybody. So one needs to create another PHP script that asks for a password, accesses the database, and displays the data.

Obviously this is a very, very rough draft and may contain many errors ... but it's a start ...

[whitemark]

Forgot to add ...

Now imagine if this manages to track AdSense clicks? That would be cool!

Even if this does track adsense clicks (which I doubt), it will not display the result because of the way the JS / PHP (or ASP) script is written ...

[eKstreme]

Wow. This is quite cool stuff! I think I have an idea about just how to do this. I'll take my first crack at it this weekend if I get a chance.

By the way: would this contravene the AdSense ToS? I'm thinking it won't because:

1. We're not changing the code
2. We're not changing the behavior

However, I would like a healthy debate about this please. I would rather not create the ultimate webmasters tool that gets you banned.



Pierre

[dazzlindonna]

I haven't used an adsense tracker in over a year, but back when they first came out, AdsenseAdvisor over at WMW said they didn't have any problem with them, in general. I think she mentioned being cautious with using someone's else code, but that the general concept was fine with them. I haven't heard anything to contradict that since then, but then again, I haven't paid much attention either.

[meriweather]

However, I would like a healthy debate about this please. I would rather not create the ultimate webmasters tool that gets you banned.

Like Brendan Behan said, "There is no such thing as bad publicity..." I think it would be rather distinctive, Pierre. I can see the headline now.
Internet Genius Gets 1,000,000 Web Sites Banned By Google

Or something like that.

Just make sure they spell your name right. No one could buy that kind of publicity. Well, maybe Google.

Doc

[kensplace]

One of googles many problems is with google is its very difficult to get a sensible answer to a easy question. They just dont give clear answers. The answers they give are often vague, or at best, open to interpretation.

Adsense tracking has been around for quite some time now, but I personally wont do it, as I feel it is modifying the adsense code, which is a breach of t&c.

Course, it may be ok with google, but they wont come out and state that it is.. So I would not want to risk it myself.

[eKstreme]

Ah - the ultimate linkbait: A high-profile banning by Google. Maybe I should try that one

Seriously though, I've thought of another problem: who's going to test it? I guess I could install it on my sites and come back to it a few days later... Would others be willing to try it out?

[whitemark]

First, Adsense Advisor (a Google representative) has said that that Google doesn't have any problems with such trackers. (The tracker shouldn't employ redirects or change or meddle with the adsense URL in anyway).

Second, testing is a bit hard.

I guess I could install it on my sites and come back to it a few days later ...Would others be willing to try it out?

No mine. Please come and click on the ads on my blog to test it out. Hehe.
More than the tracker, that would surely get you kicked out of Adsense - for soliciting clicks.

There is an easy way to test this without violating the Adsense TOS you agreed to - create a User JavaScript for Opera with your tracker javascript. Attach it to 2 or 3 sites having adsense (not yours), and click on their ads ... (ah you are going to make some webmasters real happy

This post has been edited by whitemark: Mar 4 2006, 06:17 PM

[meriweather]

Take a day off and what are you guys cooking up now?

I've got G Analytics on a couple of sites with adsense. I'd try it out on those and compare results at intervals, without telling where they are. I'd be willing to give you access to the logs though Pierre, if that would help. These are more test sites than anything else, no great amount of money involved.

This is kind of a sticky deal, as far as testing it, huh? I'll chew on this one for awhile and see what I come up with.

Doc