Hotjar Virtual Page Tracking Actions

Hotjar offers and as mentioned in my previous article on Funnel configuration, it is generally created based on URL.

Of course, there are situations where we cannot distinguish pages by URL (for example, displaying a popup or executing a JavaScript function). For such cases, there is a method that allows us to indicate JavaScript-related actions and treat them as page views: Virtual Page Tracking (VPV).

Virtual Page Tracking

Hotjar can record user actions based on the pages defined when a new Funnel is created¹. For instance, we want visitors to progress from the homepage to the registration page or to a form in a structured flow. However, suppose visitors stop their progress at some point and we are curious about the reason. At this stage, we first identify the unique URL of each page within the flow. In summary, let’s create a flow based on the registration process:

1. Homepage: /
2. Registration page: /kayit-ol
3. Confirmation page: /tesekkurler

However, in rare cases, additional actions may be required. For example, your registration form might be displayed via a popup (overlay), or instead of a thank-you page, it might redirect to a notification, or a JavaScript function might be triggered. In such cases, it’s obviously unlikely to have a unique URL pointing to each step. That’s where Virtual Page Views (VPV) can be used. This feature can also be preferred in scenarios where URL parameters (query string: utm, fbclid, id, s, etc.) are used. Virtual Page Views essentially do not treat pages as uniquely distinct and do not change URLs, yet they allow for page view tracking (PageView) and can be used via a JavaScript snippet. After the relevant JavaScript line has been added, the definition can be included as a step in the Funnel creation process using the “Contain” option.

hj('vpv', '/slug/permalink');

For this line to function correctly, the Hotjar Tracking Code must be installed and actively working on the relevant page. If you want the Virtual Page View action to trigger immediately upon page load (on page load), the corresponding line must have already been triggered prior to the virtual pageview call². In short, the following sequence should be followed:

<!-- Hotjar Tracking Code -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:[hotjar-hesap-id],hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

    hj('vpv', '/slug/permalink');
</script>

Let’s take a look at an example of how the Virtual Page step can be included in a Funnel.

Let’s define our flow as follows:

1. Our visitors reach our content through organic traffic and/or social media account shares,
2. We have a clearly visible “Sign Up” button on each page, and we encourage visitors to click on it,
3. When the “Sign Up” button is clicked, a popup (lightbox, modal, etc.) appears, and we ask visitors to fill in the required information for registration,
4. After the information is correctly filled out and the registration process is successfully completed, a confirmation message is displayed,
5. Alongside the message, a verification link is sent to the email address provided by the visitor for email validation,
6. The visitor completes the process by clicking on the link sent to their email address and becomes officially registered.

I’ve tried to extend the funnel as much as possible, of course you don’t have to create a journey this long. Now let’s evaluate the funnel. In step 1, visitors reach our content from different sources. We can easily represent this step as a Page URL.

In steps 2 and 3, a click event occurs, followed by the display of a popup. Therefore, there is no change in our URL. At this point, we can define a Virtual Page.

hj('vpv', '/sign-up/');

In step 4, we can define the successful form submission and the subsequent confirmation message as a Virtual Page.

hj('vpv', '/form-success/');

Steps 5 and 6 involve the email verification process. The user might have closed the relevant page, but that’s not important. We can continue tracking the funnel and a URL definition is sufficient for this step.

Certainly, we can practically implement the Virtual Page (VPV) definition process through Google Tag Manager (GTM). For this, we simply need to add the relevant JavaScript line to the Custom HTML tag field ([virtual-page]) and select, under the Tag Triggers section, the Hotjar code’s triggering as a prerequisite condition.

The next step, naturally, is to verify our installations. By using Google Tag Manager > Preview, we can check which tags and their sequence are triggered, and by using Chrome > Developer Tools > Network, we can monitor Hotjar filters to track events and modules, thereby confirming that the code is being processed correctly.

Footnotes

1. Hotjar ↩
2. How to Track Funnel Steps if My URL Doesn’t Change? Hotjar Documentation ↩