How to Integrate Virtual Page with GTM Element Visibility

In this blog post, you'll find answers to the question above and gain detailed insights into what a Virtual Page is, its advantages and disadvantages, and how to manage this process without developer support by integrating it with GTM Element Visibility.

In cases where the page URL does not change but the content does, you may sometimes need additional page tracking and more detailed analysis. To conduct in-depth funnel analysis in such scenarios, let's explore what these definitions mean and how you can implement them via GTM without developer assistance using Element Visibility.

What is a Virtual Page (Single Page Application)?

A Virtual Page, or SPA (Single Page Application), which helps your site perform faster, is a type of web application that interacts with the user by dynamically rewriting the current page instead of loading entire new pages from the server.

In a SPA, all the source code loads at once when the site opens, and new pages are displayed by running frontend scripts, using the preloaded code. The advantage here is that when users navigate to a different page, they don’t have to wait for the code to reload. In short, Virtual Pages improve site speed and enhance the user experience.

For example, imagine browsing an e-commerce website and opening various products. In a traditional structure, each product click sends a new request to the server, which reloads the entire page. While this may seem fine, during high traffic periods, it can significantly slow down your site.

In a SPA scenario, since all source code is preloaded, user actions are managed through existing code, and page speed isn’t affected. When a page is clicked, it changes—but isn’t reloaded.

However, alongside the speed advantages, SPAs can also negatively impact your site. One issue is broken source tracking, known as rogue referrer. The referrer data, which tells you where your users came from and how long they stayed, may be disrupted in SPAs.

Additionally, SPA applications can pose disadvantages for SEO. Since SPAs are seen as a single page, it can hinder proper indexing by search engines and lower your page rankings.

Advantages of SPA (Single Page Application):

• Speed / Performance: As mentioned, SPAs dynamically update the content without reloading the whole page, allowing users to take action quickly within the site.
• UX (User Experience): SPAs provide an experience similar to mobile apps by preventing interruptions during navigation, offering a smooth and practical experience.
• Caching: SPAs enable faster caching, allowing the use of local data and connection flow effectively—even during internet issues—ensuring continued usability.

Disadvantages of SPA (Single Page Application):

• Rogue Referrer: Tracking sources may be disrupted, making it difficult to detect where users came from, which hinders detailed funnel analysis.
• SEO: Since SPAs appear as a single page, they may prevent your site from being indexed properly, affecting search engine rankings.

The “All Pages” trigger in GTM is fired on full page loads, so it doesn't work on Virtual Pages. This becomes a limitation when detailed funnel analysis is required.

To solve this, first, identify where Virtual Pages are used on your site, then see how integration is done using GTM Element Visibility.

Areas Where Virtual Pages Are Used

• Virtual Cart Pages: These are side panels showing cart/summary without navigating to a new page.

• Lead Generation Pages: Often used in SMS or consent pop-ups.

Common Examples of Virtual Page Use:

• Gmail
• Facebook
• Twitter
• Google Drive
• Google Maps
• Netflix

How to Integrate a Virtual Page?

The first method is pushing events via developer support—either natively or through GTM. While this may seem easy, relying on developers can slow things down or prevent fast intervention in case of issues.

The second method—covered here—is using GTM Element Visibility. This allows fast implementation without developer involvement and supports detailed funnel tracking.

Virtual Page Integration with GTM Element Visibility

We'll use GTM for virtual cart and lead generation examples. Your website must have GTM installed. Then, you can configure the Element Visibility trigger. First, let’s understand how this trigger works.

When you select “New Trigger” in GTM, you'll see the screen below.

Clicking on “Trigger Configuration” asks you to select a trigger type.

When you choose “Element Visibility,” the following screen appears:

The Element Visibility trigger can be fired in 3 ways:

• Once per page: Trigger fires only once per page load—ideal for limiting duplicate hits.
• Once per element: Trigger fires for each instance—useful if a user reopens a pop-up multiple times.
• Every time an element appears on screen: Trigger fires each time the element appears according to the specified visibility threshold.

Percent visible defines how much of the element is visible, while minimum percent visible is the threshold to trigger. Default is 50%.

With minimum on screen duration, you can also set a minimum time (e.g., 1000 ms) before triggering.

If the element loads after page load, use observe DOM changes to detect it properly.

GTM Element Visibility for Virtual Cart Pages

Select your target element using browser inspector tools (Inspect > Elements).

Use the most minimal and stable selector—for example:

document.querySelector("box-flex. cart-summary")

...

Validate that the element exists only once on the page by running:

document.querySelector("box-flex. cart-summary")

Once the trigger is set, proceed to tag configuration. To push data as a pageview, configure it in GA and override the default page URL via More Settings > Field to Set, customizing the page name and title fields.

GTM Element Visibility for Lead Generation Pages

In some cases, SMS confirmation is shown via pop-ups, not new pages. Without tracking these, it's hard to know when users exit the SMS funnel.

By tracking SMS modals with Element Visibility, you can push virtual pageviews to GA and gain detailed insights.

With these examples, brands using virtual cart pages or lead generation pop-ups can perform Virtual Page Integration using GTM Element Visibility—without developer support—allowing more accurate performance measurement and analysis.

See you in the next post…