Method

It’s quite simple in principle. When a user loads one of the pages we are using for this test several things happen:

1. A PHP script creates a session on the server and logs this in a mySQL database
2. If no session exists already then the PHP script writes a little bit of javascript into the HTML page to be served
3. If the client has javaScript enabled on their computer the script will run sending an asynchronous call (to avoid slowing down the pageload while waiting for a response from the server) to the server
4. Another PHP script on the server will find the mySQL record created in step one and update the javascript_enabled flag
5. If the client doesn’t have javaScript enabled then the script won’t run and the database will not be updated

Results

So far we have checked 581 sessions and 21 of them have had javaScript enabled, a rate of 3.6%.

We will give this trial a little time and a bit of analysis before we roll this out for some proper results (and publish the code so other people can do the same).

Edit: Well the first change was to exclude robots, Googlebot and Slurp from Yahoo! were very quick on the scene and of course they don’t use javaScript.

Further Edit: 31st Aug 2010 The second change was to remove the logging from this page, it seems like my little script was interfering with something in the header of the blog page, perhaps Google Analytics.
I am suspicious about the very low percentage of javaScript we are seeing, further investigation is required. It could be that people are reading this post through feed readers rather than directly and so not activating the script.

Further Edit: 6th Sep 2010 Something isn’t right here, the logging works for me but the numbers look far too low. I wonder if there is something wrong with my javaScript code (I am no javaScript expert) which is causing it not to make the ajax call for most people. This is the code that is included into the header of the testing page:

<script type="text/javascript">
// 
// This script is part of my javascript logging routine.
// If javascript is enabled it sends a request to the server which will log the fact that javascript is enabled.
// 
// The cunning bit which copes with the fact that IE6 doesn't know about XMLHttpRequest, thanks to
// http://ajax-prototype.blogspot.com/2007/02/workaround-to-make-ajax-calls-on.html
//
if (!window.XMLHttpRequest) {
  window.XMLHttpRequest = function() {
    return new ActiveXObject('Microsoft.XMLHTTP');
    } 
}
//
// Send the PHP session_id to the server script so it can update the log record for this session
//
request=new XMLHttpRequest();
request.open("GET","http://www.cotsweb.com/update_javascript_log.php?session_id=&lt;?php echo(session_id()); ?gt; ,true);
request.send(null);
</script>

Perhaps someone else can see what I have done wrong?

One of the pages displays the monthly menu for Sophie’s Baked Delights Club, a cake club where subscribers get a different home-baked cake delivered to them once per month.  Each month subscribers can choose from  two different cakes made with seasonal ingredients. Quite simple really but we wanted the page to display the menu in monthly order with the current month at the top.

The cake details are stored in a mySQL database so Sophie can go in and change them as she changes her menu.  But we only store the month rather than the full date so that the menu can just roll over from year to year without unneccesary maintenance being required.    This meant that we couldn’t just read through the file by date nor (except in January) could we just read the months in their normal (Jan, Feb, Mar…) order, if the current month is April we want to display the months as Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec, Jan, Feb, Mar (stored as 4,5,6,7,8,9,10,11,12,1,2,3).

Specifying a sort sequence in mySQL

Fortunately mySQL has a mechanism for doing this, you can use ORDER BY FIELD in your select statement to specify the order you require.  So the code we need is;

SELECT * FROM cake_club_menu ORDER BY FIELD(menu_month,4,5,6,7,8,9,10,11,12,1,2,3) , menu_sequence_nbr

Using PHP to Create the ORDER BY FIELD statement

Of course we can’t hard code the ORDER BY FIELD statement as the sequence will change every month, so I created a PHP function to create the  statement, hopefully the following code is pretty clear

<?php
//
// PHP functions for Sophies Baked Delights
//
function orderByFieldText()
{
//
// Dynamically create text for Order By Field mySQL statement
//   This allows us to list items in month order with the current month first and rolling in to next year
//
//  First get the current month
//
$thisMonth =(date("n"));
//
//  Now set the base text for the statement - menu_month is the database field we want to order by
//
$orderByField = "ORDER BY FIELD(menu_month,";
//
// Now loop through 12 times to create the list of month numbers for the statement
//
for ($i = 1; $i <= 12; $i +=1 )
 {
 $orderByField .= $thisMonth;   // Add this month to the statement
 if ($i <> 12) {                // If this isn't the last item in the list insert a comma
 $orderByField .= ',';
 }
 else {                         // Else insert a closing bracket
 $orderByField .= ')';
 }
 if ($thisMonth == 12)          // If we have got to December (12) next month is January (1)
 {
 $thisMonth = 1;
 }
 else {                         //  Else next month is this month +1
 $thisMonth += 1;
 }
 }
return $orderByField;
}
?>

Reading the database and displaying the menu

Then we just need to call the function in the main PHP module and loop through the returned menu records writing the data to the screen as we go.   As you can see from the following code I used a table with a row for each month.

<table id="cakeClubMenu">
 <tbody>
<?php
//
// Populate the order by field for the database lookup
//
$orderByField = orderByFieldText();
//
// Read the cake club menu file to populate the table
//
$sql = "SELECT * FROM cake_club_menu " . $orderByField ." , menu_sequence_nbr";
$menu_array = mysql_query($sql);
$i = 0;
//
// Now write each line of the table in turn
//
while($menu = mysql_fetch_array($menu_array)) {
 // convert month number to month name for display - thanks to <a title="An easy way to convert a month number to a month name in PHP" href="http://www.gilbertpellegrom.co.uk/php-month-number-to-month-name-the-easy-way/">www.gilbertpellegrom.co.uk</a>
 $monthNum = $menu['menu_month'];   
 $monthName = date("F", mktime(0, 0, 0, $monthNum, 10));
//
//
 switch ($menu['menu_sequence_nbr'])
 {
 case 1 :  // 1st cake for the month starts the row
 echo("&lt;tr&gt;\n");
 echo('&lt;td&gt;'.$monthName.'&lt;/td&gt;'."\n");
 echo('&lt;td&gt;&lt;strong&gt;'.$menu['menu_cake_name'].'&lt;/strong&gt; - '.$menu['menu_cake_description'].'&lt;/td&gt;'."\n");
 break;
 case 2 :  // 2nd cake finishes the row
 echo('&lt;td&gt;OR&lt;/td&gt;'."\n");
 echo('&lt;td&gt;&lt;strong&gt;'.$menu['menu_cake_name'].'&lt;/strong&gt; - '.$menu['menu_cake_description'].'&lt;/td&gt;'."\n");
 echo('&lt;/tr&gt;'."\n");
 break;
 default : // If a 3rd cake is required then this will need modification - currently not allowed
 break;
 }
 }
echo('&lt;/tbody&gt;'."\n");
echo('&lt;/table&gt;'."\n");
?&gt;

Hopefully someone will find this method useful.  As with most problems the answers are all on the internet, but sometimes you need to find the answer before you know what you should have been searching for.

It has always been difficult to track when someone clicks a link on your website which takes them to an external website (a click through or clickthru if you prefer). The problem is that the resulting request is made to the external website and is logged there, it doesn’t get logged on your own website at all.

For the web designer wanting to log clickthrus this is a problem, the traditional answer is to put the code which opens the new site in a file. When the user clicks on a link some code is executed locally (and logged locally) which then makes the call to the external site. This works fine but it makes it quite difficult for search engines to follow the link to the external site, sometimes impossible. If Google can’t follow the link to the external site then you may be giving them visitors but you are not helping their page rank in Google.

This is obviously a problem that many clever people have been thinking about for some time, one of the best solutions I have found is Search Engine Friendly Click Tracking which uses javascript to log any click on a link to a file or database.

The solution

But while checking some details in Google Analytics I found a section on using javascript events to track outbound pageviews. This is essentially the same technique as mentioned above but integrated with Google Analytics rather than standalone. It seems to me that this little feature using the new version of the Google Analytics tracking code is the holy grail of Search Engine Optimisation!

All you need to do is;

1. make sure that you are using the new version of the Google Analytics Tracking code.
2. That the code is inserted in your webpage above any links that you want to track (I put it just after the <body> tag in my test page).
3. Add a javascript event tag to each link you want to track.

The actual tag is quite simple, this is Google’s example;

<a href=”http://www.example.co.uk” onClick=”javascript: pageTracker._trackPageview (‘/outgoing/example.co.uk’);“>

When somebody clicks on the link Google Analytics will log the click as a call to /outgoing/example.co.uk in your analytics report.

And of course the href code is retained in its natural form so it is easy for search engines to follow the link, you can give the target site the link love it deserves.

I think this is a brilliant development, a big thank you to the wizards at Google for their continued good work!

Bonuses from Google Analytics

Using Goals to monetize outbound links

In Google Analytics you can assign goals to pages which make you money, say the checkout page on your shop. You can do the same thing with your new trackable outbound links, so if you carry advertising on your site you can see exactly how much you are earning. You could assign a value of say 10p to any pageview in the /outgoing/ directory and use Google Analytics to work out your bills.

Tracking calls to images and PDF files

Also, this technique can be applied to any sort of link. I discovered it while looking for a why of tracking views of a PDF file. If you have a file, like a PDF or an image, where you can’t insert the Google Analytics code inside the file then you can do something like;

<a href=”http://www.example.co.uk” onClick=”javascript: pageTracker._trackPageview (‘/my_document.pdf’);“>

And you can track views of the PDF or image file just like they were a regular web page.

Thank you Google

Thank you to Google for another great tool. Now that I know the answer I have no trouble finding the solution with a search in Google but I hope this article saves someone else some time.

All quite simple really, but I needed a way for the client to be able to edit the content online, a simple HTML editor would do but it needed to be WYSIWYG as, while the client is quite capable of updating a formatted document they don’t really want to get into HTML markup.  After a bit of research I decided that FCKeditor looked pretty good.

Looking at comments about FCKeditor it seemed that it should be pretty easy to set up and indeed it was.  Installation was easy as was getting a quick sample page working, but could I figure out how to load a file into the editor?  No I couldn’t!  I knew it must be fairly simple but I just couldn’t find any example of how to do it.  Putting a string into FCKeditor using the Value parameter was straightforward but getting an actual file in there just confounded me.

After spending most of a day hunting around the internet I just couldn’t get it working properly.  I think I must just be more stupid than the average FCKeditor developer.  But the next day ( problems often look easier the next day) after a little more searching I managed to figure out how to load a file into FCKeditor.  So I thought I’d put the solution on this blog to save anyone else as silly as me a lot of time.

It is of course quite simple.  The value parameter for FCKeditor must be a string, this is then the starting text in the editor window, the trick is to make your file into a string.

Using PHP I prepared the following test page;

<?php
include_once(“fckeditor/fckeditor.php”) ;
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Amend Pricelist</title>
</head>
<body>
<form action=”sampleposteddata.php” method=”post” target=”_blank”>
<?php

// Read the file into an array
$file_array = file(“pricelist.php”);

// Convert the array into a string
$file_contents = implode(‘ ‘,$file_array);

$oFCKeditor = new FCKeditor(‘FCKeditor1′) ;
$oFCKeditor->BasePath = ‘/fckeditor/’ ;

// Use the string as the initial value for FCKeditor

$oFCKeditor->Value = $file_contents ;

$oFCKeditor->Width  = ’700′ ;
$oFCKeditor->Height = ’750′ ;
$oFCKeditor->Create() ;
?>
<br />
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

And it worked!  I had managed to load a file into FCKeditor.  There may be a better way of doing this, and I would love to hear about it if someone knows better, but it does the job.

I hope this blog saves someone else a bit of headscratching.