Archive for May, 2008

Using Google Analytics to track click throughs from your website

Friday, May 16th, 2008

The Problem

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!

King Arthur sees a vision of Google Analytics

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.

Reading a file with FCKeditor

Friday, May 9th, 2008

I am working on a website which contains sections which the client wants to be able to update themselves.  Not very difficult stuff, just updating their pricelist, special offers, that sort of thing.  Rather than a full blown CMS (Content Management System) I opted to have the content in HTML files which can be included into the webpage as required.

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.