The recent redesign and launch of the Energy Online by Power NI website presented us with a challenge of how to track the user journey across forms that submit dynamically without updating URLs. We needed a way to view what stage of the forms, if any, were causing customer pain points so we could ensure the highest rate of conversions and provide a positive and easy journey for the user. From our initial research into the subject it was clear that using Virtual Page Views would be the easiest and most effective solution. The first form we focussed on was the registration form which had 4 stages but only 1 URL throughouthttps://energyonline.powerni.co.uk/register/.

Firstly, what is a Virtual Page View?

For the purposes of Google Analytics a pageview is a count of times the ga(“send”, “pageview”); JavaScript is evoked, and should your analytics code be configured properly, happens once per page load. This action gets registered into analytics as a pageview.

A Virtual Pageview therefore is when we evoke another piece of JavaScript on a page without actually reloading or moving on to another page, to send and register another pageview in our analytics. Analytics classes it as a pageview like any other, meaning we can use it for URL destination goals, funnels and for gaining a better understanding of onsite behaviour/the customer journey.

There is, however, always the question of: Do we need virtual page views or can we use event tracking?

In the most basic sense you would use virtual page views if you are trying to understand the visitor journey and event tracking if you want an idea of the total amount of interactions with a certain element of your website – a few examples of when you might use each are:

Virtual Page Views

Event Tracking

Stages of a contact form that submits dynamically to itself without reloading the page

Clicks on a phone number

Stages of a multi-step dynamic shopping cart page

Downloads of a PDF

Activity on modal popup windows

Submit on a newsletter sign up

An important thing to remember when using Virtual Page Views is that they can have an impact on your data, in that they inflate pageviews. A five stage form that submits itself dynamically would previously have resulted in 1 pageview regardless of how many steps were completed. If we add virtual pageviews to this form the same interaction will now result in 5 pageviews.

This is not necessarily a negative but it does need to be taken into account when reporting on website performance.

A way to avoid this is to make sure all virtual page views have a prefix of /virtual (more on this when we talk about naming convention). You can then create a new view in Analytics and add a filter to exclude hits to all URLs starting with /virtual.

Using Virtual Pageviews takes time, planning and the help of a developer but it is worth the effort for the insights into the customer journey they provide.

When setting up Virtual Pageviews the first thing you need to do is forget about Tag Manager, Google Analytics and writing/adding code for now and start at the beginning. What is it you are trying to measure? Review your site and establish your goals and KPIs, if you haven't already, and map out the user journey towards the completion of this goal. Some you will be able to track without any additional work but some, like a single page application, will need the additional work of adding virtual pageviews or event tracking.

I found it was extremely useful to map out my user journeys using an online diagramming app to get a clear visualisation of the stages of the journey along with possible errors, diversions and alternative paths.

Virtual Page Views User Journey

Differentiate your original pageviews (in this case blue), button clicks (in this case orange), actions i.e. enter user details (in this case green) and most importantly when the different stages of your form occur (in this case purple) - these will become your virtual page views.

For the purposes of this blog we are going to use the example of a single page application registration form. As we will be wanting to track the user's progress along this form and identifying pain points, and where we're losing users, we will use virtual page views.

We could add event tracking to each of the next/continue buttons on the form which would tell us how many interactions occurred but although this would tell us if there were 100 interactions on button 1 and 60 interactions on button 2 it wouldn't tell us where the 40 people we lost went to. Using virtual page views means we can build a funnel in Analytics and clearly see the full picture.

Once you have mapped out your visitor journey for each of your goals it is time to create a naming convention for any Virtual Pageviews you want to apply. As mentioned above, using virtual page views inflates your overall pageviews, so it is recommended to include a prefix of /virtual in all your VPVs. Within your naming convention identify the step of the journey, the actual URL where each element occurs, your suggested virtual page URL, your suggested virtual page title and where the Virtual Pageview should occur:

Virtual Page View

You're now ready to move on to writing the code that will be added to the elements of the form identified above. If you're familiar with adding event tracking through Tag Manager you'll know that you can use the preview tool to find a unique identifier of the element you want to track but in the case of virtual page views this isn't always necessary. I chose to take screen grabs of the different stages of the form and feedback from the developer was that this was really helpful way to do it, making it very easy to identify where the JavaScript needed to go (example of this below).

The basic template for a virtual page view code is:

datalayer.push ({

'event' : 'virtualPageView'

'virtualPageURL' : ''

'virtualPageTitle' : ''

});

where;

dataLayer.push - is the command recognised by Google Tag Manager (GTM) that will cause it to log the data passed to it

event – the name you assign here will be the name you give to your trigger in Tag Manager, this is how GTM will connect the script being evoked and the pageview being logged.

virtualPageURL – This is where you add the virtual page URL you came up with in your naming strategy

virtualPageTitle – This is where you add the virtual page title you came up with in your naming strategy

When I populated it as per the naming convention above, using step 3 as an example, the code looked like this:

datalayer.push ({

'event' : 'virtualPageView'

'virtualPageURL':'/register/virtual/activate-your-account/'

'virtualPageTitle' : 'Activate your Account'

});

A good point to note here is that when you are sending this code across to your developer make sure you use regular apostrophes as above and not the curly kind (which are standard in Word) as the curly kind aren't valid in JavaScript.

Create one piece of code for each element and send to your developer along with the page where the element appears, the message or element you want to track and a screen grab of the specific element OR a unique identifier from GTM preview mode.

Virtual Page Views Screen Grabs

Now it's finally time to begin the work in Tag Manager. There are three stages to be completed in GTM – Create variables, create a trigger & create a tag

The first step within GTM is to create two User-Defined Variables for your virtualPageURL and virtualPageTitle (make sure at the start of the process you decide exactly how these are going to be written within the code and in Tag Manager to ensure they trigger i.e. all one word, lower case v, upper case P, upper case T)

1 – Name your variable

2 – Choose type ‘Data Layer Variable’

3 – Name your Data Layer Variable

4 – Save variable

Do this first for virtualPageURL and repeat for virtualPageTitle so you are left with something similar to below:

Virtual Page Views Step 1

The next step within GTM is to set up your triggers.

One trigger is created for virtualPageViews to ensure that every time the ‘event’:‘virtualPageView’ in your code is executed your Tag, which we’ll create next, is triggered.

1 – Name your Trigger

2 – Choose ‘Custom Event’

3 – Name your Event

4 – Choose the Trigger to fire when ‘Event’ ‘equals’ ‘virtualPageView’

Virtual Page View

Now it’s time to set up your VPV tag in GTM

1 – Name your Tag

2 – Choose product Google Analytics

3 – Choose Tag Type Universal Analytics

4 – Configure your tag by:

                - Adding your analytics tracking code (e.g. UA-12345678-1)

                - Track type will be pageview

                - Click more settings

                - Click fields to set dropdown

- You want to set a value for page and for title based on your virtualPageURL and           virtualPageTitle                   

                - Click Continue

                - Set Tag to fire on your pre-created virtualPageView trigger

                - Save Tag

5 – Don’t forget to Publish your work in GTM

Virtual Page Views Step 3

Now all the hard work is done. Your code has been added and you've set up everything you need within Tag Manager. As always, it's imperative to test your work to make sure it's recording correctly and this can be done by looking at Analytics Real Time reporting and making sure your Virtual Pageviews are appearing.

Once you are sure that your page views are recording you can go ahead and create your goals and use the funnel to track each of the stages. Give this all one full day to embed and you're ready to test again to make sure your funnels and goals are recording correctly.

Being able to use Tag Manager to create the Variables, Triggers and Tags has meant a vast improvement in the ease and cleanliness of adding Virtual Page Views to sites. It requires more thought and work than setting up basic Event Tracking or other tags in GTM, and requires the use of a developer, but is essential for a lot of websites now as single page dynamic forms are getting more and more common.

Have your own tracking problem that needs solving? Get in touch with any of your tracking or analytics questions – digital@madetoengage.com

Related articles