When Björn and I put up our landing page for www.miljoparkering.se we had Google Analytics (GA) in place from the very start.
Our landing page contained two points of user interaction, the sign-up and the contact form, so creating goals based on these actions was obvious to us.
Soon, however, we started getting curious about how much of the information on our landing page the users were seeing and at what point they would start loosing interest and leave. But as our landing page didn’t have sub-pages, we didn’t really have any any obvious data to tell us what the users were doing other than visit the first page. From a GA perspective we were a bit in the blind …
We started thinking about what we could do about this. What we’d really like was a solution based on GA goals which would mean that we could use funnel visualization, a great way to display the users progress and their exit points. However, GA goals and funnels are based on page views and cannot be based on events, so we needed to somehow hack it a bit.
Our solution ended up like this:
We imported the
jquery appear plug-in. This plug-in makes it easy to add event listeners to elements on a page, however firing the event only once when the element enters the users viewport.
We chose the images on the page to be the measure points which we would use to track the users progress. We gave the images recognizable identifiers: picfine, piclady, picgreyfine, picconfusion, picui and picmap.
We then added appear event handlers on the images. Each event handler would use the GA client side tracker object to send information to GA. Asynchronously, of course, so that the user experience wouldn’t get crippled.
The information sent to GA would be “fake” page views including the names of the pictures in the URL: /scroll/[image name]
With this setup we could then create a GA goal called “See all page”, in which the users had to browse through all the fake pages and to end up at /scroll/picmap to complete the goal. Of course, the users weren’t really browsing around, they were scrolling.
This is the funnel we now see in GA.
The funnel shows 73 visits to the page and the first image (picfine). After that, 63 (86%) visits are made to the second image, piclady. Hereafter, 61 (97%) proceed to picgreyfine. And from there on 58 (95%) to picconfusion. And so on…
After some time we could see three behaviors: people either (1) visited the page and exited right after, (2) exited the page after seeing the first sign-on form or (3) continued to the very end.
This solution gave us much more detailed insight on the users interest in our page. Fortunately, as of writing this, a whole 72.6% continue to the very end, which we, with regards to keeping the users interest, consider a success! :-)