Mobile heatmap landing page with Google Analytics

Few days ago I have been working on some new mobile landing pages. One of the most important part of a landing page is that has to be fast to load and create user interaction.

On the web there are many ways to track user’s mouse movements and create some nice heatmap.

On mobile there is no mouse but touch event. I turn on then a small test using Google Analytics.

First of all I embeded the Goggle Analytics code: note that this is a optimized mobile version

Then at the touchstart event, attached to the document, it trigger the track function:

track will send to Google Analytics the coordinates x and y of the point where the user touch the screen. The gaq.push trigger the track event method and will send a track event that I called finger and subcategory tap and a value that will be something like x:123;y:234

The next step is to export from Google Analytics those events (I exported some of them, not the whole set):

I then created a small page to draw the canvas on top of an image.

The final result is an image with all the points the users interact with.

You can try a working example here (work only on Chrome or Safari)

I’m quite happy of the results. A considerable number of users interact with the call to action button in the middle of the page.

I’m surprise about the touch that happen at the corner of the screen. An other consideration is the number of users that check the page in landscape mode. And the landing is not optimizzed for landscape mode. I have to take care of in in the next few days.