Create & Track Virtual Page Views in Google Tag Manager

Colin Differ

13 May 2019

A Virtual Page View (VPV) is a PageView in Google Analytics that has been tracked even though no page actually exists.

There are many examples of where it is necessary to use Virtual Page Views for Google Analytics:

  • A single page checkout process
  • A form that does not result in a success page
  • A one-page site

We won’t talk all the reasons for why you would always need to use a VPV, but we will write a post in the future for that purpose.

In the past, creating a Virtual Page View always involved development to the site, where code would need to be inserted into the site similar to the below which would force Google Analytics to create a new Page View with the VPV URL:

ga('send', { 'hitType': 'pageview', 'page': '/contact-us/submitted/', 'title': 'Contact Us Submitted' });

Whilst this was widely used, if you can’t get direct access to the site code, or get it added to the site via a developer, it could be a wasted opportunity.

Along came Google Tag Manager, and with it, the ability to add Virtual Page Views without needing access to the code of the site.

In this post we will discuss setting up a Virtual Page View with a form that does not result in a success page.

6 Steps to creating a Virtual Page View with Google Tag Manager

  1. Create a DataLayer with the required Virtual Page View URL (Optional)
  2. Create new DataLayer Variables (Optional)
  3. Create the Trigger
  4. Create your Google Analytics Tag to record the VPV
  5. Test & Debug your Tags and Check in Google Analytics for data
  6. Publish

      1. Create a DataLayer with the required Virtual Page View URL

        We will be using Google to Tag Manager to push a DataLayer on to the site, and then grabbing the information back to pass through to the GA tag. This isn’t necessary if you only have one VPV to track, but can come in useful if you have a number across the site, with different triggers and different information, as it will create a DataLayer Event of VirtualPageView.

        Create a Custom HTML Tag and paste in the below code:

        <script>
dataLayer.push({
'event':'VirtualPageView',
'virtualPageURL':'/services/gtm-training/thank-you',
'virtualPageTitle' : 'GTM Training - Contact - Thank You'
});
</script>

        This will force a DataLayer into your site (once the trigger has been created).

         

        If you have multiple VPVs to create, you can of course use the Lookup or Regex variables to create numerous URLs/Titles.

      2. Create new DataLayer Variables (Optional)

        As you are pulling the information from a DataLayer, you will need to create a DataLayer Variable (DLV) to get this information back from the site, or in this case 2 DLVs.

      3. Create the Trigger

        Next, you will need to create the Trigger to either fire the DataLayer, or if you are not using a DataLayer, your Google Analytics tag.

        In our case, we are using an event visibility trigger to listen out for a message popping up telling us that a form has been submitted.

        If you are using the DataLayer add the Trigger to your custom HTML Tag.

        Once the Element Visibility is triggered, it will fire the Custom HTM tag containing the DataLayer, which will in effect create a DataLayer event called VirtualPageView, which will hold your DataLayer:

      4. Create your Google Analytics Tag to record the VPV

        As you are creating a new Page View in Google Analytics, you will need a new GA Page View Tag, and you will need this tag to ignore the Page URL and Title and use the one you have created instead.

          1. Create a Goggle Analytics Tag
          2. If you are using the Google Analytics Setting, enable overriding setting on the tag
          3. Enter your Google Analytics Tracking ID (UA Code)
          4. Under More Settings > Fields to Set:
            • Set Field Name to ‘page’ and Value to the value of your VPV URL
            • Set Field Name to ‘title’ and Value to the Page Title of your VPV
          5. Click Save

         

        Create a Trigger for the Event VirtualPageView and add the GA tag on to this, or attach the Google Analytics Tag to the previous trigger you created if you are not using the DataLayer approach

      5. Test & Debug your Tags and Check in Google Analytics for data

        In preview mode, check to see that your data is being pulled into Google Analytics

      6. Publish Google Tag Manager

        Once you’ve followed the steps above, publish your container and you can now create Virtual Page Views for your site in GTM

      Need some help?

      If you want to talk about this, or any other GA/GTM issues, then Propellernet offers Google Tag Manager Training and Google Analytics Training in Brighton and London. We also offer a wide range of Analytics Services or Google Tag Manager services. Please contact us for more information

       

Sign up to our Analytics Newsletter

Sign up to our Monthly Analytics newsletter with more tips & techniques on Google Analytics or Google Tag Manager, discover new tools and software to help you measure your traffic and hear about the latest news on Analytics and Tag Management