Having server-side GTM container enabled a number of new tracking capabilities. One of the key advantage is ability to load the GTM.js and gtag from a first party domain.

When enabled the GTM javascript is not loaded from the standard URL which will be easily identified as tracking script:

https://www.googletagmanager.com/gtm.js

But will be loaded from custom subdomain:

https://metrics.yourshop.com/gtm.js

This keeps all the traffic within first party realm and will address a notification that appear in server-side GTM workspace:

Configure GTM containers

The tricky part about this setup is that two GTM containers are involved:

• web GTM container that is essentially build and loaded as the gtm.js
• server GTM container which is the metrics.yourshop.com server

In order to make the server GTM container able to server gtm.js file a Google Tag Manager: Web Container client needs to be added to the GTM workspace and published.

You can learn more details in our dedicated guide:

How-to: Serve GTM Web container from Server container?

Pass gtmScriptUrl prop

Now that we have GTM server container running at desired URL (subdomain of the main website) and the web client deployed we need to use @next/third-parties/google and GoogleTagManager component passing not only the gtmId , but also gtmScriptUrl .

• gtmId - the ID of the web GTM container (not the server container), e.g. GTM-123123
• gtmScriptUrl - full url to gtm.js (excluding query parameters), see below

Example

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
      {children}
    
  )
}