How to set up and track virtual pageviews in Google Tag Manager

Author:

Tracking virtual pageviews in Google Tag Manager (GTM) allows you to measure interactions on your site that don’t trigger a full page load, such as clicks on tabs, AJAX-based content changes, or interactions within single-page applications. This is crucial for understanding user behavior in dynamic web environments. Here’s a step-by-step guide to set up and track virtual pageviews in GTM.

 1. Define When to Trigger Virtual Pageviews

Identify the interactions or events on your site that should be tracked as virtual pageviews. Common scenarios include:

  • Clicking on tabs or navigation elements that load content without a page refresh.
  • AJAX-based content loading.
  • Single-page application route changes.

 2. Set Up Google Tag Manager

  1. Create a GTM Account and Container:
    • If you haven’t already, create a GTM account and set up a container for your website.
    • Add the GTM container code snippet to your website’s HTML.

 3. Implement dataLayer.push for Virtual Pageviews

  1. Add the dataLayer Object:
    • Ensure the dataLayer object is defined before the GTM container snippet. This can be done in the <head> of your HTML
  2. Push Virtual Pageview Data to the dataLayer:
    • When the specified interaction occurs, use dataLayer.push to send virtual pageview data.

 4. Create a Custom Event Trigger in GTM

  1. Create a New Trigger in GTM:
    • Go to “Triggers” > “New” > “Trigger Configuration”.
    • Select “Custom Event” as the trigger type.
  2. Configure the Trigger:
    • Enter the event name from your dataLayer.push (e.g., virtualPageview).
    • Name the trigger (e.g., “Virtual Pageview Trigger”) and save it.

 5. Create a Tag to Track the Virtual Pageview

  1. Create a New Tag in GTM:
    • Go to “Tags” > “New” > “Tag Configuration”.
    • Select “Google Analytics: Universal Analytics”.
  2. Configure the Pageview Tag:
    • Choose “Page View” as the track type.
    • Set the tag to use the following fields:
      • Page Path: {{virtualPagePath}}
      • Page Title: {{virtualPageTitle}}
  3. Set the Trigger for the Tag:
    • Under “Triggering”, select the custom event trigger created in Step 4.
    • Name the tag (e.g., “GA – Virtual Pageview”) and save it.

 6. Create Data Layer Variables in GTM

  1. Create Data Layer Variables:
    • Go to “Variables” > “User-Defined Variables” > “New”.
    • Select “Data Layer Variable”.
    • Enter the Data Layer Variable Name (e.g., virtualPagePath).
    • Name and save the variable.
    • Repeat this for virtualPageTitle.

 7. Test the Setup

  1. Use GTM Preview Mode:
    • Click on “Preview” in the GTM interface to enter preview mode.
    • Navigate to your website and perform the interaction that should trigger the virtual pageview (e.g., click the tab).
    • Check the GTM preview pane to ensure the dataLayer.push is working and the tag is firing correctly.
  2. Verify in Google Analytics:
    • Go to GA > “Real-Time” > “Behavior” to see if the virtual pageviews are being tracked.
    • Verify that the pageviews are being recorded with the correct page path and title.

8. Publish the Changes

  1. Publish the GTM Container:
    • Once you have tested and confirmed that the virtual pageview tracking is working correctly, publish the GTM container to make the changes live:
      • Click on “Submit” in GTM.
      • Add a version name and description for the changes.
      • Click “Publish”.

Example Scenario: Tracking Tab Clicks as Virtual Pageviews

Objective: Track clicks on tabs as virtual pageviews to understand user interaction with tabbed content.

  1. Set Up GTM:
    • Ensure GTM container code snippet is implemented on your website.
  2. Push Virtual Pageview Data to dataLayer
  3. Create Custom Event Trigger:
    • Create a trigger for the “virtualPageview” event.
  4. Create Tag:
    • Create a GA pageview tag with:
      • Page Path: {{virtualPagePath}}
      • Page Title: {{virtualPageTitle}}
    • Set the trigger to the “Virtual Pageview Trigger”.
  5. Create Data Layer Variables:
    • Create variables for virtualPagePath and virtualPageTitle.
  6. Test and Publish:
    • Use GTM preview mode to test by clicking the tabs.
    • Verify the events in GA real-time reports.
    • Publish the GTM container once confirmed.

Setting up and tracking virtual pageviews in Google Tag Manager involves using dataLayer.push to send custom data, creating custom event triggers, configuring pageview tags, and testing the setup thoroughly. This method provides insights into user interactions that don’t result in traditional page loads, helping you understand and optimize user engagement on your site. Follow these steps to effectively implement and track virtual pageviews, ensuring comprehensive analytics data collection.

Categories: Digital Marketing