Using Google Analytics Virtual Pageviews to Help Increase Conversions

 

I’m sure most of you know that Google Analytics (GA) Content reports display pageviews and unique pageviews, along with other metrics.

Did you know, however, that you can create and track virtual pageviews? You can create a virtual pageview anywhere that you can call a javascript method. This virtual pageview will show up everywhere in the Content reports section that a ‘real’ pageview will.

This means you can track clicks on Flash movies, different CSS layers, pdfs, images, docs…the list goes on.

I am going to give three examples of how you can use virtual pageviews to help increase and track conversions, but first I’ll demonstrate how to set them up.

How to Implement Virtual Pageviews

This example assumes you are using the new Google ga.js code and that your normal GA tracking code is on your page. Here’s an example of that tracking code for reference:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-youraccountcode-1");
pageTracker._trackPageview();
</script>

To create a virtual pageview, you have to call the following javascript method.

pageTracker._trackPageview('/The-Name-Of-Your-VIRTUAL-Page');

Note: The Urchin method is different: urchinTracker('The-Name-Of-Your-VIRTUAL-Page');

Ok, I realize that’s a bit cryptic. I will give you an example, and then explain further.

Let’s say you have an image of a red rose, and when you click on it, a larger version of the image opens in a CSS layer:

<a href="path-to-open-large-red-rose-css-layer" title="Red Rose"><img src="path-to-my-red-rose-thumbnail" /></a>

All you have to do to create a virtual pageview (which of course means you can then track how many people clicked on the red rose image) is to add in the above javascript method and make up a descriptive page name:

<a href="larger-red-rose-image-css-layer-path" title="Red Rose" onclick=”pageTracker._trackPageview(’/LargeRedRose’);”><img src=”path-to-my-red-rose-thumbnail” /></a>

Note: The page name is virtual. You can call it anything you want, and it will show up in GA as a normal pageview. You can also include virtual directories. I could have used:

onclick="pageTracker._trackPageview('/Flowers/LargeRedRose');"

It’s up to you how you name the virtual pageview, but plan it out well so you can easily find and group things in the GA reports.

You can create as many virtual pageviews on a single URI as needed. If you have 50 flowers on a single web page, you can create 50 different virtual pageviews.

(If you’re wondering if there are other ways to call the method, the answer is ‘yes.’ You can use any technique you want, including unobtrusive javascript, as long as the javascript method is called.)

Below are three examples of how you might use virtual pageviews.

1. Downloadable White Paper

Let’s say you are a software development company, and one of your web site conversion goals is for visitors to download your white paper on “Smart Ruby on Rails.”

The code on your web page to download the PDF white paper is:

<a href="whitepapers/smart-ruby-on-rails.pdf">Download White Paper Now</a>

To create a virtual pageview for the download, insert the javascript method I showed you previously so it is called when a visitor clicks on the download link:

<a href="whitepapers/smart-ruby-on-rails.pdf" onclick=”pageTracker._trackPageview(’/WhitePapers/SmartRubyOnRails’);”>Download White Paper Now</a>

Now every time a visitor clicks on that link, it will be recorded in GA as a pageview. It will show up next to all of your other pageviews in GA as /WhitePapers/SmartRubyOnRails. (Don’t worry. My next example will show screen shots from GA that demonstrate this.)

Now you can track how many people download your white paper (convert). To go even further, you could define this new virtual pageview as a conversion goal in GA to get even more information, but I’ll get to that.

2. Measure Content’s Effectiveness

On our Search Engine Marketing page, we have four small case study graphics. If a visitor clicks on any of them, a new CSS layer appears with more information about that particular case study.

We wanted to track which graphics visitors clicked on the most, or more specifically, if there were one or two that received a significant majority of the clicks. This would give us an idea of what content is more compelling to our visitors.

We achieved this by creating different virtual pageviews for each case study graphic. Here is code for two of the graphics:

<a href="javascript:appearNow('f50');" onmouseover="document.fort.src=fortover.src" onmouseout="document.fort.src='img/fort-50.gif'" onclick=”pageTracker._trackPageview-> (’/caseStudyViews/Fortune50′);”><img src=”img/fort-50.gif” name=”fort” /></a>

<a href="javascript:appearNow('tech');" onmouseover="document.technical.src=techover.src" onmouseout="document.technical.src='img/tech.gif'" onclick=”pageTracker._trackPageview-> (’/caseStudyViews/HighTech’);”><img src=”img/tech.gif” name=”technical” /></a>

You can see below that the virtual pageviews are included with the ‘actual’ pageviews in the reports:

Because our virtual pageviews all start with /caseStudyViews/ we can easily find them in the reports by performing a search on ‘casestudy’:

Over time we found that more visitors clicked on graphics that had larger numbers, like “1500%”.

Of course you might argue that you could use the Site Overlay feature in GA to see the same thing, but GA’s Site Overlay is pretty unreliable. You could use a tool like CrazyEgg or ClickTracks, but then you’re going to yet another solution, AND by using virtual pageviews you can actually test whether or not content helps drive conversions.

3. Measure Whether or Not Content Drives Conversions

Let’s look at techsmith.com, and specifically their SnagIt product offering for this next example. (Note: The following is a fictitious example.)

techsmith.com wants their web site visitors to download a free trial of SnagIt in the hopes that they will upgrade to the pay version. So, a download of the free trial is a conversion.

techsmith.com has various content pieces like movies, demos, and images in their assets arsenal, and they want to find out which content drives the most conversions.

In this specific example, they are testing a movie and want to track whether or not a site visitor watched the movie before downloading the free trial.

To accomplish this:

1. Create a virtual pageview when a visitor clicks the Play button:

<a href="javascript:playVideo();" onclick=”pageTracker._trackPageview(’/FreeDownloadTest/PlayVideo’);”><img src=”myPlayButton.jpg” /></a>

2. Create a Goal in GA. The Goal URL will be the Downloading page.

This is the URL the visitor is taken to after they have clicked to download the free trial. Remember, this is the end goal…conversion point.

3. Define a Required Funnel Step.

Now you have defined your conversion point for your new Goal, but you want to track if the visitor watched the video before converting. To track this you need to put the name of the virtual pageview (that is created when a visitor hits Play) into Step 1 of the Goal Funnel, and make it Required.

The Funnel Visualization report will only show a conversion if the visitor triggered the virtual pageview (clicked the Play button) and then downloaded the free trial at some point after that.

Every download of the free trial will count as a conversion. Now you can see how many of the visitors that converted watched the video before converting.

Of course, clicking the Play button does not ensure they watched the video, but if you could call the javascript method at some point from within the movie…this leads to an:

Idea: Another interesting use of this technique might be to have a Flash demo make a javascript call to create a virtual pageview somewhere within the demo. This way you could tell if a visitor actually went through the entire demo etc. You can probably think of other ways to incorporate this as well.

Other Ideas?

Well, I’ve suggested three uses of virtual pageviews to help you increase and track conversions. Feel free to share your suggestions.