Server-side tagging in Google Tag Manager allows you to load Google scripts, such as gtm.js or gtag.js, directly from your tagging server instead of from Google's servers. This allows you to serve data within a first-party context.
Steps
This article describes how to configure your server container to load a Tag Manager web container from your tagging server. This article assumes that you have already created a server container.
Configure Google Tag Manager: Web Container client.
Use this option when you want to deploy a Tag Manager web container to send data to your tagging server.
- From your server container workspace, select Clients on the left side of the page.
- Click New
Select the Google Tag Manager: Web Container client type
In Client Configuration, click Add Container ID and enter the container ID of the Tag Manager web container that you will use on your website.
By default, Automatically serve all dependent Google scripts checkbox is enabled. This updates the behavior of the Tag Manager web container so its dependencies such as gtm.js, gtag.js, analytics.js, ec.js, etc. are also requested from the tagging server. If you wish to serve only the initial container from the tagging server, deselect this option.
Update the Tag Manager code
To load the scripts from your server container, update the Tag Manager code on your website.
- Locate the existing Tag Manager code on the page or get a new one from your Tag Manager web container.
- Replace the string
https://www.googletagmanager.comwith your tagging server URL.
For example, if your tagging server URL is https://tagging.example.com, and
your web container ID is GTM-ABCDEF, the final code will look like this:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://tagging.example.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEF');</script>
<!-- End Google Tag Manager -->
or alternatively, if you use noscript installation:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://tagging.example.com/ns.html?id=GTM-PZ6TRJB"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Configure a Google Analytics: GA4 client
Use this option when you want to deploy a Google Analytics 4 gtag on your page to send data to a tagging server.
From your server container workspace, select Clients on the left side of the page.
- Click New
In Choose client type, select Google Analytics: GA4
Under Activation Criteria, select the Default gtag.js paths for specific IDs checkbox
Enter the tag ID that you will use on your website
By default, Automatically serve all dependent Google scripts checkbox is enabled. This updates the behavior of the tag so its dependencies (e.g. gtag.js, analytics.js, ec.js, etc.) are also requested from the tagging server. If you wish to serve only the initial container from the tagging server, deselect this option.
Configure a Google Analytics 4 tag in JavaScript
If you configured your Google Analytics: GA4 tag through Tag Manager, follow the above guide to configure your Tag Manager web container to send data to your tagging server.
To load the scripts from your server container, update the Google Analytics 4 code on your website.
- Locate the existing code on the page or get a new one from Google Analytics.
- Replace the string
https://www.googletagmanager.comwith your tagging server URL.
For example, if your tagging server URL is https://tagging.example.com, and
your measurement ID is G-1234, the final snippet will look like the following:
<!-- Google tag (gtag.js) -->
<script async src="https://tagging.example.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID', {
transport_url: 'https://tagging.example.com',
first_party_collection: true
});
</script>
Configure Google Analytics: Universal Analytics.
Use this option when you want to deploy a Universal Analytics gtag on your page to send data to a tagging server.
From your server container workspace, select Clients on the left side of the page
- Click New
Select the Google Analytics: Universal Analytics tag type
Select the Default gtag.js paths for specific IDs checkbox
Enter the tag ID that you will use on your website
By default, Automatically serve all dependent Google scripts checkbox is enabled. This updates the behavior of the tag so its dependencies (e.g. gtag.js, analytics.js, ec.js, etc.) are also requested from the tagging server. If you wish to serve only the initial container from the tagging server, deselect this option.
Update the Universal Analytics tag in JavaScript
If you configured your Universal Analytics tag through Tag Manager, follow the above guide to configure the Tag Manager web container.
To load the scripts from your server container, update the Universal Analytics snippet on your website.
- Locate the existing snippet on the page or get a new one from your Google Analytics UI.
- In the snippet replace the string
https://www.googletagmanager.comwith your tagging server URL.
For example, if your tagging server URL is https://tagging.example.com, and
your tracking ID is UA-1234-1, then the final snippet look like the following:
<!-- Google tag (gtag.js) -->
<script async src="https://tagging.example.com/gtag/js?id=UA-1234-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-1234-1', {
transport_url: 'https://tagging.example.com',
first_party_collection: true
});
</script>