PicNet - Guido Tapia

Comments (1) | RSS comment feed

Comment RSS

Automatic Google Page Position Report

March 10, 2010 06:38 by author

Overview

The position of your website in the Google organic search is quickly becomming one of the most critical marketting measures. This page/script will allow you to automate this process.

How To

Sign up for a google Ajax API Key (http://code.google.com/apis/ajaxsearch/signup.html)

- You will get a jsapi key from google, something like this

'ABQIAXFEakaXw3_Fd-
zqqMhjDLzqaRTTser7lsytcEDBoz0jKRWQmOpxexR7x409podV88a5eoPr2KIvw8Ub3B'

(Note this is not a valid key)

Download this html page/script and rename to .html (remove .txt extension)

Open this page in a text editor (note pad is just fine)

Replace <YOUR JSAPI KEY> (Line 53) with, you guessed it, your jsapi key.

On line 59 you will see the configuration for this file, you will need to change the following items

- lookfor (Line 66, 78, 87). These tell the script what to look for in the url and youtube title.

- On line 75, replace "Sydney, NSW" with a location that you think some of your clients would be searching from.

On line 228 the lookup table rows begin. You can add as many rows as you wish here. The rows must be in the format (replace <Search term or phrase>):

<tr><td><Search term or phrase></td></tr>

You can have headers by adding rows in this format:

<tr class='header'><th>This is a header row</th></tr>

Open the file in your browser and click 'Run Report'

Thats it, when the table is working you will get something that looks like this:

Let me know if you have any problems with this.

Thanks

Comments (0) | RSS comment feed

Comment RSS

How to prevent 'Stop running this script' message in browsers

March 4, 2010 07:23 by author

Avoiding the 'Script taking too long' (all browsers have some form or another of this) message in browsers is relatively simple. You just have to make sure the browser knows you have not created an endless loop or recursion. And the easiest way to do is is to just give the browser a breather in between long running tasks.

So how would we go about this. Well the simplest solution is to just break up your task into mutliple smaller tasks with a setTimeout in between these tasks. The utility class below does just this:

Utility Class

RepeatingOperation = function(op, yieldEveryIteration) {
var count = 0;
var instance = this;
this.step = function(args) {
if (++count >= yieldEveryIteration) {
count = 0;
setTimeout(function() { op(args); }, 1, [])
return;
}
op(args);
};
};

So how do we use this class, lets say we have the following code which is giving us a jerky browser and occasionally displaying those horrible 'Stop running this script' message:

// initdata is just an array of numbers (a very very large array)
var test1 = new Array(initdata.length);
for (var i = 0; i < initdata.length; i++) { test1[i] = initdata[i] * 2; } // Double each item in the initdata array
continueOperations();

To use the utility class above we would change the code to this:

That's it, a little bit more code, an extra closure, so not pretty but I think a relativelly stylish solution to a nasty problem. Note: Remember this will also give you a much more responsive browser during execution of this expensive code also.

Note: This solution is used in the Mouse Eye Tracking system. So it is production ready (at your own risk tho).

Thanks

Tags: javascript, performance
Categories: javascript | jquery
Actions: E-mail | Kick it! | Permalink | comment

Comments (0) | RSS comment feed

Comment RSS

Introducing Mouse Eye Tracking - Tunnel Vision

February 19, 2010 08:46 by author

One question that has been asked of me a few times since the release of the PicNet Mouse Eye Tracking Service is that of accuracy. How acurate can the Mouse Eye Tracking service correlate eye activity from mouse activity. We have done a lot of testing on this topic and we believe that the correlation is significant. In fact it was significant enough for us to invest a huge amount of time and effor in producing this product. We are also highly encouraged by the academic research in this field that supports our own tests (See product home page for links to this research).

However, we are aware that the accuracy is not 100% and it will never be. If you want 100% accurate data about activity on your site you need to use eye tracking. However this also has many downsides. One of the ways that we try to increase the correlation between mouse and eye is by using an as yet undocumented feature called Tunnel Vision.

Tunnel Vision tries to encourage the user to use the mouse to view the page whilst attempting not to alter the normal behavior of the user on the page. Lets have a look at tunnel vision in action:

Tunnel Vision Off

Tunnel Vision On

As you can see, tunnel vision creates a tunnel around the user's mouse giving you a clear area of vision around the cursor but more importantly tunnel vision still allows the user's peripheral vision to look around the page in preparation for the next area of focus.

I encourage you to try tunnel vision in your closed testing (Do not put this on your live site!!!) and see the results for your self.

Turning On/Off
To turn on tunnel vision simply add (use-tunnel-vision="true") to your PicNetEyeTracker span. i.e:

<span id='PicNetEyeTracker' usercode='picnetpilot' use-tunnel-vision="true">...

To turn off tunnel vision simply remove this tag or set use-tunnel-vision to "false".

I hope this feature helps you get that extra level of accuracy with your mouse/eye tracking.

Thanks

Comments (0) | RSS comment feed

Comment RSS

Html Web Worker Woes - Data Analysis not an Option

February 18, 2010 04:25 by author

During development of the PicNet Mouse Eye Tracking service I carefully investigated the possibility of using Html Web Workers.

After careful reading of the specs I thought this would be great but after some initial tinkering I found that communications between threads was done through the postMessage feature supported by modern browsers.

This instantly raised some suspicions as I know that this is a text only feature, I know FF will auto serialize/deserialize to/from JSON but this as expected performs pretty poorly for large data sets. But I gave it a benefit of the doubt thinking that there was no way that someone would go to the extreme pains of implementing a threading framework and cripple it by not allow memory references to be passed between threads.

WRONG!!! And now I can say that the new threading features in browsers is only usefull for making the UI more responsive. Now don't get me wrong thats great and a huge relief not to be having to use setTimeout hacks everywhere but seriously?? Why would you break my heart like that?

Threading is critical in calculation intensive or data analysis intensive applications. The PicNet Mouse Eye Tracking service is a great example of this. The javascript engine gets a whole bunch of mouse coordinates and from this data we render heat maps, curved mouse tracks, etc, etc. This is a huge amount of calculations that lock the browser JS thread but it is impossible for me to use web workers. Why is that?

The cost of postMessage
postMessage can transfer strings between threads. But it is very rare that data requiring analysis is solely string based, mostly we are working with other primative types as well such as numbers, booleans, DateTimes, etc. And the cost of converting (serializing) strings to/from these data types is huge. After some early prototypes I tossed the idea of using Web Workers aside. I know this is very early days in the life of Web Workers but I was quite taken aback by this crippling flaw in the specs.

Lets look at numbers
K, lets support my whinging with numbers. Below is a table that shows an expensive operation on an array of numbers. We process the array using the specified number of threads. Note: Refresh to see it running in real time:

Run Test

1 Threads	2 Threads	3 Threads	4 Threads	5 Threads
Idle	Idle	Idle	Idle	Idle

Comments (1) | RSS comment feed

Comment RSS

How to make money from your website or blog using adsense and intelligent add placement

February 15, 2010 10:11 by author

Overview
This article will try to show you how best to maximize the income generating potential of a blog or a website by focusing on placement and settings of your advertisements. We will be using a new free service called Mouse Eye Tracking. This service allows you to see exactly how users interact with your website so it's a great tool for analyzing the placement of your AdSense adds.

Background
Making money from a popular blog post or website used to be fairly straight forward, you concentrated on having great content and the high revenue per click of online advertisement used to do the rest. Now days making a few dollars from a blog or a hobbyist web site is much harder and we have to start considering such things as:

Add placement, size, location
Look and Feel of the adds
The way the adds interact with the site content
Etc

Add Placement
If you are serious about making a few dollars from your website you unfortunately will need to invest some time trying out different placements for your adds, there is unfortunately no way around this. I will try however to show you that this can be a pretty easy process and hopefully help some of you make a dollar or two.

Analyzing your current add strategy
The first thing you need to do is register for a free account for the PicNet Mouse Eye Tracking Service. This will give you a code that needs to be inserted somewhere inside the body tag of your page. Note: This code does display a small message 'Mouse Eye Tracking by PicNet...' so ensure you style this message in such a way that it does not intrude on your content. Now let's look at the analysis of my blog with this tool.

As we can see, I had my add placed at the bottom of my screen and I was just using the standard look and feel of the AdSense adds. We can also see that NO ONE paid the adds any attention at all this day (this heat map shows a 24 hours period). So looking at the heat maps we can see that most of the activity is at the top of the screen and the right column.

Now I think I will try placing the add on the right hand side of the screen. This will allow the main content of the blog to still be the main player in the page but also make the adds more effective.

I left this for another 24 hours and this is the results

We can clearly now see much more activity in the adds now.
Now, I think I am happy with the position of these adds however they are taking way too much room and they are actually making it harder for users to use my side bar (you can see that by the lower activity in the side bar). So lets make the adds smaller, better looking and lets wait another 24 hours.

We can now see a lot more activity around this area. It appears that the smaller advertisement has made the add blend in a bit better with its surrounds. This may be why there is much more activity around the add region. In fact doing a click only analysis shows us that we have indeed had a few clicks.

Well, thats it. Hopefully this article helps you make a few more dollars from your blog/website. Please let me know how it goes with the usage of the Mouse Eye Tracking service as any feedback is welcome at the moment.

Comments (0) | RSS comment feed

Comment RSS

GWT in a .Net environment

February 3, 2010 04:11 by author

Hi All,

As you know we have recently release the PicNet Mouse Eye Tracking service. This project is by far the largest Javascript centric application that PicNet has developed. This led us to do a lot of research on what technologies we would use for generating a maintainable javascript project.

We were restricted to having a .Net backend as that is what our existing infrastructure supports and its the technology where we live most comfortably. So the decision for the backend was simple, ASP.Net Mvc (w/ Spark View Engine) + NHibernate.

But now came the more complex decision of the client code (javascript). Do we stick to standard jquery code minified in our continous build? do we create our own bootstrapping js framework to easily allow OO in js? Do we leverage other such frameworks?

We ended up investigating a lot of different options but this article focuses on one of these which is GWT.

Javascript development is hard, anyone that tells you otherwise thinks javascript development is for creating roll over buttons. JS development is hard for various reasons.

The language is very flexible and it gives you all the rope in the world to ...
At the heart of the language is the function. This is a concept that is difficult for most OO devs to wrap their heads around
Performance is such a huge issue, compared to server languages
Code size (and design) is a big issue
Finally and most importantly is: The tools for javascript development are useless in comparison to other languages

The last item is huge. I mean with Java you use Eclipse or IntelliJ to manage your projects, builds, deployments, code analysis, error reporting, debugging, syntax highlighting, unit testing, code completion, refactoring, etc, etc, etc. For .Net you have Visual Studio giving the same support. Now try this as an experiment. Write a simple app in Java or .Net using notepad! That is what javascript development is like, regardless of language features, performance, etc. The tools issue is a killer.

GWT is a great framework and I would comfortably say, its the best framework for javascript development available. The reason it is the best framework is the fact that you can use good tools (Eclipse, IntelliJ, etc), it also removes alot of the Javascript hacky mentality required for writing fast javascript (but thats a secondary benefit in my opinion). Now for .Net developers learning to use Eclipse, etc is a bit of a pain but from a maintainability issue, if you were developing a solely javascript application it is definatelly worth the effort. HOWEVER!! Having a client (javascript) / server (.Net) application written in GWT / .Net has huge drawbacks. It is actually so painful that we finally decided to abandon the attempt.

How do you do it
Well our service is a very complex html page with a very large javascript component. The html file we generate using Spark View Engine. This lets us modularise the html into nice little controls that are easy to work with. This is where we encounter our first GWT hurdle. To use GWT you have to have the html in the hosted server, well that's not true you could compile the javascript and stick it in your ASP.Net application and not have html in Java however if you cannot use GWT in hosted mode it is not worth using (My own opinion).

What does this mean? Well, basically it means that you have to view the source of your html and copy into your GWT environment. Thats correct, change html you need to remember to copy paste into GWT env every time. We tried doing crazy things like having iframes pointing to the ASP.Net app from GWT environment with cross domain policies, etc but this always failed.

Ok, this is a huge maintenance issue, however if this were the only issue I think we still would have used GWT given its previously described benefits.

Second issue!! Talking to the server. This issue actually has a few parts, the first is serialisation. GWT offers a few optimised serialisation mechanisms such as XML and JSON (and a custom one). Since our application used plain strings for its communications, rolling up our own XmlHttpRequests from GWT was no problem (we do this for performance reasons). So this was no big issue at all. The second issue is authentication. To use our application you must be logged in so in development mode we had to add a hack that would recognise GWT development requests and simulate a user, Ughh!! Still not a huge issue but getting bigger. And finally the last issue is the fact that to use GWT with a .Net backlend in development you have to use a proxy server. No problem here is a great article describing how to set this up. Now it is difficult to describe the development process here but I will try.

Start the hosted mode server
Oh forgot to copy the new html
Copy the html
Restart hosted mode
Crash!!
Hughh?
Oh, a crash on the .net side
Done, try again
Hmmm yes it does look better with that border

So you get my pain?

So my conclusions. GWT is awesome!! Enough cannot be said about how good this toolkit is but it is still too painful to be a real alternative in a .net application.

Comments (3) | RSS comment feed

Comment RSS

Mouse Tracking vs. Eye Tracking

February 3, 2010 02:28 by author

Note: I tried to make this article as unbiased as possible but being the father of a newborn mouse tracking service I highly doubt I achieved this. So please read this with an open mind and feel free to research both solutions.

Since the limited release of our Mouse Eye Tracking service we have had great feedback and we are now more excited than ever in future of this product. However some criticism has been raised over the statistics quoted on our product page, this critisism however came from employees of Eye Tracking companies so I take their comments with a grain of salt. These comments however led met to investigate the differences and benefits of each technology, that is, eye tracking and mouse (virtual eye) tracking. This blog is the result of that research.

Note: I will not describe the ultimate goals of both these approaches which is improved usability and increased marketing value of your online presence.

Firstly let me try to illustrate what I believe to be the pros/cons of each technology (Please comment if you believe I have missed anything):

	Eye-Tracking	Mouse [Virtual Eye] Tracking (MET)
Cost	Prohibitive to SME	Free
Sample Group	Small sample group of people who may not be the regular users of your site. If you want targeted sample group the costs are significantly higher (and sample group smaller).	Real users to your site
Environment	Sample group in a research room, conscious of their actions being monitored. Some eye tracking companies still use tracking glasses which make the sample group even more conscious of their environment. Even when not using glasses current technology means that the head has to remain relatively still and within a reasonable location (Don't lean back!!).	Real users using the site normally with no knowledge their usage is being studied
Interpretation	These companies usually provide analysis of results which is another addition to cost but it does provide you with insight that you may miss.	Usually left to up to you. However PicNet does offer these services to customers that require it but since this is a technology comparison I will leave this red.
Used in mockups	Huge costs	Yes, for free and set up instantly.
Easy to set up	Needs to be done by third party, requires expertise	Can be up and running almost instantly
Accuracy	Close to 100% Accurate representation of what the sample group is viewing.	84%-88% According to the only independent - scientific research I have found (http://portal.acm.org/citation.cfm?id=634067.634234).

Now, I think this table is redundant as it illustrates the obvious. But what I really want to do is dig into is the sample group issue. I think research done on a small unrelated group of uni students or unemployed people (huge costs otherwise) is a huge drawback to traditional eye tracking methodologies. For example. Let's say you sell integrated controllers for onboard computers. Do you think that an untrained sample group will ever show you how your real customers (engineers) navigate through your web site? Offcourse not, all they will do is show you the standard usability glitches such as banner blindness, Inattentional blindness, etc. You do not need to use any system to show you this, just read a usability book or a free Google search.

In a week of usage we have had web sites that have upwards of 2000 recorded user interactions on some pages. This is 2000 real customers showing you how they use your website in a real day-to-day environment. Now whether this is 88% accurate or 60% accurate or whatever figure you can find in the statistical abyss that is Google it does not matter. This is highly valuable information. Information that will allow you to make marketing and usability decisions with a very high level of confidence.

Now, don't get me wrong I still think that eye tracking is a very valuable technique for some companies out there but to say that mouse tracking is a 'lesser' offering I think is wrong. I initially did not think they competed (I actually thought it was the lesser/poorer option) but after researching this article I am now sure they do compete and my biased view is that the free alternative is better due to the 'real users' issue discussed here.

References:

http://glinden.blogspot.com/2008/01/cheap-eyetracking-using-mouse-tracking.html
http://research.microsoft.com/en-us/um/people/ryenw/proceedings/WISI2007.pdf
http://googleblog.blogspot.com/2009/02/eye-tracking-studies-more-than-meets.html
http://www.seobythesea.com/?p=874
http://www.tobii.com/archive/files/20040/EyeWatch_Using+eye+tracking+to+optimize+the+attention+path+of+advertisements.pdf.aspx
http://www.iua.upf.es/~jblat/material/hci/students09/topic1/SusanEyeMouseTrack.pdf
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.95.5691&rep=rep1&type=pdf
http://www.gmi-mr.com/documents/bylines/Quirks_Click-Testing_0408.pdf

Comments (9) | RSS comment feed

Comment RSS

PicNet Mouse Eye Tracking Service Limited Release

January 27, 2010 06:43 by author

You may have noticed that I have been a bit quiet over the last few weeks, this is because we have been working very hard to release a new product and it gives me great pleasure to announce that today we have flicked on the switch.

The product is called the Mouse Eye Tracking service. It is basically a web analytics product that records your visitors mouse interactions with your web site. You then use our product to analyse these interations and get value from them. You can think of it as a more visual 'Google analytics' (however the products are very different and supplement each other nicely).

Features
Heat Maps
Check out where our visitors are viewing our home page:

Or where they are 'clicking'

User Trackings
You can also just replay the user interactions on your site. Either one at a time or all at once:

Page Navigation
You can also visualize how your visitors are navigating around on your site:

Technology
One of the reasons I'm so proud of this product is because of the number of technical hurdles that had to be overcome to get a successful solution. I will be blogging about these in detail over the next few weeks in the hope that someone can learn from our trials and tribulations. But some of the issues we had to address were:

Capacity of a high volume, highly data driven application
Speed of visualisation generation on javascript
Threading in javascript
Best tools for large development team in a javascript project
Large javascript application programming practices
Html 5
IE Issues (Which we have deferred for now)
Unit testing in javascript (and continous testing) + multiple browsers

Limited Release
As mentioned above, this is a limited release. So no media releases yet, we are taking it slowly just to make sure we have nailed down all the capacity issues. But this is too exciting not to at least blog about it so feel free to subscribe and give it a try.
Please send me any feedback you may have, either through comments below, email or just use the built in feedback submission form in the system.

Links

Thanks All

Guido Tapia

Comments (1) | RSS comment feed

Comment RSS

Promising Signs From the IE Team

January 7, 2010 02:56 by author

I was excited to read about IE joining the W3C SVG Working Group. This hopefully means that IE 9 will have SVG support.

There has been a lot of noise around IE 9 and graphics rendering but this is the first solid hint as to which direction that will take.

I am crossing my fingers that CANVAS is not ignored. Come on IE stop being humiliated by Google (excanvas, svgweb, gears and chrome frame) and implement these standards!!!!

Thats my rant done.

Guido Tapia