Server side GTM for single page applications

Sites built with React, Vue, Angular or Next.js often load once and then swap content without reloading. Tag Manager's default "page view" fires only on the first load. If nothing else is done, analytics sees one page view per visit and ad platforms miss most events. This page explains how to track a single-page app properly and what stays the same with a server container. See Meta Conversions API for a custom website and Google Tag Manager best practices.

Virtual page views

On every route change, push an event to the data layer with the new page path and title, and let a trigger on that event fire your page view tags. Do not rely on the History Change trigger alone; it can fire too often or too early.

// on every route change, after the new view has rendered
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "virtual_page_view",
  page_path: location.pathname + location.search,
  page_title: document.title
});

Works worldwide

Runs on your domain, anywhere

Your tracking runs on your own domain, so a visit from any country is handled the same way.

Events and timing

• Push events when the data is ready, not before. A purchase pushed before the order total is known will carry the wrong value.
• Clear the ecommerce object before each push.
• Fire once. A component that re-renders can fire a tag many times.
• Include an event_id so the browser and server copies deduplicate. See event deduplication.

First load and referrer

The first page view should carry the original referrer and UTMs. On later route changes, do not overwrite them. Read the UTMs and click IDs on first load and store them in a first-party cookie, so that a later conversion in the same visit carries them. See avoiding UTM removal.

Server-side differences: none, with two cautions

• The server container receives the same requests. Point the Google tag to your tagging subdomain as for any site.
• Server-side rendering (as in Next.js) can run code on the server and the browser. Make sure tracking code runs in the browser only, or send the event from the server deliberately and not twice.

Consent in an app

Set the consent default before any tags load, and update it when the visitor chooses, as on any site. Because the app does not reload, make sure the update takes effect for subsequent events without a refresh. Test accept and reject without reloading.

Common problems

Frequently asked questions

Fix your tracking at the source

Open Tracked hosts your server-side Tag Manager, keeps first-party cookies alive and shows what each ad is really worth.

Start freeMore in Guides →

Written by

The Open Tracked team

We build Open Tracked: server-side tracking hosting, analytics and the tools around them, for stores that spend on ads. Questions about this guide, or an idea for the next one?

Write to us Read the docs