Overall, extremely happy with the functional implementation of this, and also credit to Active Webdezign for pulling off a great design.

In terms of my university work, I'm working with Flash AS3 this term, attempting to make a portfolio for my sister who is a cracking photography, so expect to see that posted here soon. We're also working with Maya to make a 3d model by the end of term, not to mention shooting a documentary over the Christmas break. So as you can see I've been fairly busy with work and sports, hence the long silence.

There is something of substance to report however. Back2 was finally launched, a project which I worked on with the boys at Active Webdezign just before I came back to university. We basically used a heavily modified version of our standard e-commerce package to allow such options as customizable colours, searching by price, size or availability, as well as having a 'fast chair' option where the user could select all the default options at once to get the quickest delivery possible. I'm very proud of the technical implemenation, and I've heard the clients were very happy with it.

Anyway, watch this space.

Setting 'selected' for dropdowns with jQuery

$('select[name=dropdown]').val('11');

At first what I tried to do was access the child option tags in the select, use attr() to add a selected attribute to the specified option, but I had no luck. Upon further research, it turned out I could use the val() method to achieve this. What I'm actually passing the value of the value attribute of the option I want to be selected. In the case below, this would be the third option:

<select name="dropdown">
<option value="123">Option One</option>
<option value="apple">Option Two</option>
<option value="11>Option Three</option>
</select>

Setting checked for radio buttons

Radio buttons were a little different. At first I tried to use the same val() and selector structure, but of course with radio buttons, they all have the same name attribute. So what I did was this:

$('input[name=radio]:checked').removeAttr('checked');
$('input[name=radio]:eq(1)').attr('checked','checked');

First, search for all checked radio buttons with that name and uncheck them. Second, give the the nth radio button (using the :eq selector) a checked="checked" attribute with the attr() method. The difference here is that you need to know the position/index of the radio button you want to check out of all the radio buttons of that name, rather than just the value of the radio button.

Sitenote: Square brackets in the name attribute

As a note on the side, on the shopping cart site I'm building, the options fields for each product are created dynamically, such as name="options[3]". I tried to access the element with this code:

$('select[name=options[3]]');

The jQuery selector throws an error, since the square brackets are already being used to house the name attribute. To change the field name would have involved immense editing of the shopping cart software I was using, so had to work around the selector. Turns out I could use quotes around the name value, and voila! Sorted!

$('select[name="options[3]"]');

Hope some of this helps!

You can see the finished result over here in the portfolio, but what I'm going to detail in this post is a little about how it works, using examples from the work I completes. Since the existing system was built in PHP, I was a tad cheeky and immediately searched for a PHP class to take care of all the curl functions and XML responses, and luckily I found this beauty by Electric Toolbox. Effectively this is a tutorial covers the API using PHP and this class, but to be honest if you've used an API before, Google's Developer's section for this API provides ample alternative documentation. The basic platform remains the same, regardless of the medium.

Logging In And Profile ID

First things first, in order to access the analytics data for the intended profile you need to login using an API request. This basically involves using your Google Account login e-mail and password. Using the PHP class, this was a simple function called login() which took those parameters. Here is an adaption of the code used in this function from the class:

$ch = curl_init("https://www.google.com/accounts/ClientLogin");
curl_setopt($ch, CURLOPT_POST, true);

$data = array(
'accountType' => 'GOOGLE',
'Email' => $email,
'Passwd' => $password,
'service' => 'analytics',
'source' => ''
);

curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$output = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);

$auth = '';
if($info['http_code'] == 200) {
preg_match('/Auth=(.*)/', $output, $matches);
if(isset($matches[1])) {
$auth = $matches[1];
}
}

curl_setopt($ch, CURLOPT_HTTPHEADER, array("Authorization: GoogleLogin auth=$this->auth"));

Once the login request is processed, we are given an authorization key to use when requesting data ($auth), which gets set as an cURL option for later requests, such as the requests for data, for session security purposes.

Once you get a successful login, you can start requesting data. First you need to find your profile ID for the website you want the data for, which can be found as the id parameter in the URL when you click View Report (a more complete walkthrough can be found here). From here, you're ready to start requesting the data.

Dimension and Metrics

There a few options that can be set out when making a request:

• Dimensions: Dimensions are the areas you wish to request data (i.e. metrics) from, such as city, country, browser, and traffic source. Here is a full list of Dimensions, and there really are some ridiclous ones.
• Metrics: Metrics are the actual items of data you can request, such as visits, pageviews, bounce rate, time on the site. A full list is available here.

These are the two most vital statistics which dictate exactly what data you are going to get e.g. Visits for the last 30 days per browser. There are a number of illegal combinations however, but to be honest there are enough valid combinations to get around this. Other options include sort, start and end date, number of results, offset, but the best way would be to show an example from the dashboard I made.

An Example: Statistics and Visits Graph for June

What was needed here was 5 key pieces of information for the month of June, i.e. June 1st 2009 to July 1st 2009, and then the number of visits for each date of these 30 days. The five different pieces of information I needed were:

• Total Page Views
• Total Visits
• # of Unique Visitors
• Page Views per Visit
• Time spent on site per Visit

Lets take a look at the URL the class executed in order to get the data:

https://www.google.com/analytics/feeds/data?ids=ga:012345&dimensions=&metrics=ga:pageviews,ga:visitors,ga:visits,ga:timeOnSite&sort=-ga:pageviews,ga:visitors,ga:visits,ga:timeOnSite&start-date=2009-06-01&end-date=2009-07-01&max-results=10&start-index=1

As you can see there are plenty of parameters here, mostly default values set by the class, so I've highlighted the key ones to look through:

• ids=ga:012345: I've changed the value here for obvious reason, but this is the ID retrieved earlier from the View Report page. Technically, if you have a valid login, you can put whatever ID you want in here, but you will only get data pack if the ID belongs to a profile on your account.
• dimensions=: Since we want data for the entire site over the full 30 days, we don't need a dimension.
• metrics=ga:pageviews,ga:visitors,ga:visits,ga:timeOnSite: I've requested four metrics here, separated by a comma. You can see how these correlate with the 5 pieces of information. The first three are straight values, for example, ga:visits matches Total Visits. As for the last two, these are simple calculations, such as ga:pageviews / ga:visits for Page View per Visit.
• start-date=2009-06-24&end-date=2009-07-23: And here we designate the two dates we want the data for.

That's the statistics done, but what about the graph? Well it's visits plotted against date, so the metric is sorted: ga:visits. As for the date, since we want metric data for a specific category, we have to use a dimension. Lets take a look at the URL executed:

https://www.google.com/analytics/feeds/data?ids=ga:379365&dimensions=ga:date&metrics=ga:visits&sort=-ga:visits&start-date=2009-06-01&end-date=2009-07-01&max-results=31&start-index=1

• dimensions=ga:date: The dimension is set to ga:date, so this means that for each date between the start-date and end-date parameters, the feed will contain the metric chosen, in this case ga:visits. There is caveat though, which I will discuss after.
• max-results=31: This is also important. Since we want 30 days worth of data, we need to set the max-results parameter to by this or higher. I tend to set it to 31 so any month can applied. This is also important as there are limits to how much data you can request with a certain time frame (documentation covers this)

These requests, using cURL functions e.g. curl_init and curl_exec, would return an XML response, which in turn got converted into a multidimensonal PHP array. So for this graph, the array might be in the format:

$visits_1 = $results["200906012"]["ga:visits"];
// $visits_1 contains the number of visits for the 1st of June 2009

Note that the dates returned are always in the format yyyymmdd.

Once I had this array, it was simply a matter of setting up a loop in order to generate the string I need to make a line graph using the graph framework.

Conclusions

As you can probably tell by the haphazardness of this post, there's a fair few tasks involved with this API, and this post has just covered the basics. If you're interested in using the API, I'd honestly say it's best just to try it yourself, perhaps using a class like I did. Google provides plenty of documentation, so this should be your first source of reference, but simply put allow room for trial and error.

One thing I should mention which I came across (the caveat I mentioned earlier) is that there is ever a 0 result for a metric with the ga:date dimension, the API will simply skip that date. The problem I had was in a 30 day stretch, there were three days with no visits, so I ended up getting 27 results, and since I was using a foreach loop, only 27 points. So I'd advise to use a while or for loop with a conditional to for a date to exist with 0 visits.

Hope this article has provided clarification or knowledge in some way, feel free to leave any questions and I'll be sure answer them!

Each client can log into the system and find multiple charts under and 'Analytics Report' tab. The is also the ability for the admin to view any client via the same interface, and optional E-Commerce and Goal Conversion charts.

I'm just a small-time developer who is hoping to make a living out of his one-time hobby, so I am always appreciative of whatever support I get. This site is a labour of love: always has been, always will be. I don't do advertisements, I don't do AdWords or any sort of traffic hunting, the site is for me to enjoy and waste nights working on when I really should be catching some shut-eye. So it won't surprise you to hear that I was ecstatic to not only be part of a post in the infamous Smashing Magazine, but also to be featured as Student of the Month on CreativeFamily.co.uk. I did not apply for either of these, nor expect them, but it makes a nice bonus.

So a big thank you to the following sites for kindly featuring me:

• Smashing Magazine
• Student of the Month
• Design Shack
• Unmatched Style
• Creamy CSS
• Creattica
• CSS Vote

As well as the numerous Plugin sites that have featured me for my plugins rather than my designs!

The lack of web-related articles can be explained by the fact I haven't done too much with the web recently. The last few articles were a helpful means of avoiding revision, and after exams finished I didn't really an excuse to be a hermit all day. But I have done a few exciting web-related activites recently. I had some training for my new job with the Kent Uni Web Team come September, including looking at the bug ticketing system Remedy, and their templating system for the university's many, many websites. Turns out there is no content managment either, so I'll probably be doing all the little changes.

The other tool I've been messing around with is the beta of the Google Analytics API for a little job a friend's company has me working on. The sheer robustness of the system and the amount of things you can look at frankly ridiculous, but I'm having fun with it at the moment. Expect an article on this in the future when I learn some of the more interesting queries you can run.