Sending Data From the Google Tag Manager Web Container to the Server Container

In this article, I want to show you how to use Data Tag. This custom tag sends parameters from the Google Tag Manager Web Container to the Server Container. Using this tag, you can send dataLayer variables, custom parameters, or any other data from the web to the server container. You should use it together with the Data Client for the Google Tag Manager server container. Data Client will retrieve information from the Data Tag into the Google Tag Manager server container events.

How to send data from the Google Tag Manager web to the server container?

Companies started to actively utilize Google Tag Manager server-side containers during the last couple of years. Some of them are implementing the combination of web and server containers. Others want to move their tracking from the client-side and track user behaviour only from the server. The Data Tag that we create is designed for those who wish to combine web and server tracking. This tag will deliver data from the web to the server container. 

The server-side tracking moves the essential purpose of Google Tag Manager to the server environment. It means that you can move the tracking you have inside the browser to the server. Our Data Tag and Data Client solve the problem of transporting data from the Google Tag Manager web to the server container. You might have all data you need configured on the web container, but the server environment cannot use the same dataLayer variables, DOM elements, etc. 

With the help of the Data Tag, you can configure what events, event parameters, and user data you want to send to the server container and when it should be sent. On the other side, our Data Client should be placed inside the server container to listen to the Data Tag information and process it into the events data. 

All the information will be stored on your server. Data tag and Data Client will allow storing, mold, and retrieve the data from the web container and utilize it to set up server-side tags. Data Tag and Data Client inside the server container will shape and guide the data to the proper destinations using tagss

Data Tag descriptions:

I will start by describing all fields and options this tag has. It will help to understand better what information you want/can send from web to server. 

Event Name. You have two options: select a standard event from the dropdown menu or send a custom event. Using the custom event, you can add variable {{event}}, and in this case, the Data Tag will send all events you see inside the preview mode.

GTM Server Side domain is a required field. You can find it inside your Google Tag Manager Server container settings under Tagging server URL. Data Tag will use this domain to send requests. 

To see events in the Google Tag Manager server container’s preview mode, you need to add the GTM Server Preview HTTP header. You can find it by clicking the three dots in the top right corner of Google Tag Manager Server container preview mode -> click “Send requests manually” -> copy “X-Gtm-Server-Preview HTTP header.” Note that this header is not static. It may change when you start the next debugging session. If you don’t see Data Tag events in the server container, check that your Preview header is correct.

send manually requests gtm server

You can choose to send all DataLayer Values to the server container by enabling Send all from DataLayer. 

If you enable Send common data Data Tag will send page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.

Inside the event data, you can add the custom event parameter you want to send to the server container. You may choose any web tag manager variable or type static value or text inside the Name and Value fields. There is also an option to modify value with functions Trim or To lower case. In the example on the screenshot, I sent click text from the web to the server container altered with lowercase function.

click text to lowercese

With the help of User Data, you can send user parameters. You should select the parameter name from the dropdown menu and add a static value or use the variable. There is also an option to transform value with trim or to lowercase functions. You can use these fields to send user data to the server Facebook tag to increase event matching for your Facebook CAPI. If you are using our Data Tag, Data Client, and Facebook CAPI tag for the server container, then the Facebook tag will automatically take user data from the Data Tag. 

Inside the Settings, you can change request type (by default, request type is POST, you can change it to GET), path and protocol versions. 

Please note that if you use the POST method, which is the default and preferred choice, your GTM SS container will receive two requests. One with data and one preflight request for CORS check. 

Advanced Settings are standard settings you have inside all Google Tag Manager Web tags.

Data Tag benefits

For now, there are two ways of sending data from web to server container: using GA4 tag and Data Tag/Data Client. Data Tag/Data Client has several benefits over GA4:

    1. Data Tag can send arrays of data. In comparison, the GA4 tag can send only variables and returns an error if you try to send the array. 
    2. With the help of the Data Tag/Data Client, you can send all information from the Web data layer to event data inside the Server container. While with GA4, you’ll have to send each variable manually. 
    3. If you want to store user data in the GTM variables, then use a Data Tag. It can be used for example when form submits have available user data on button clicks but not at thank-you pages. I’ll demonstrate how this function works later in this post’s Data Tag Use Cases section! 
    4. Data Tag/Data Client allows transforming data. For example, hash data, lowercase, trim. 

How to send data from Web to Server container using Data Tag/Data Client.

I will show how to use Data Tag/Data Client for the purchase event. Use the same logic to send any other event. 

    1. Download Data Tag from the GitHub -> Open Template tab inside the Web container -> Click New -> Click three dots on the top right corner -> Import -> Click Save. 
download data tag

2. Download Data Client from the GitHub -> Open Template tab inside the Server container -> Click New under the Clients section -> Click three dots on the top right corner -> Import -> Click Save. 

3. Open Web container -> Create New tag -> Tag Type Data to GTM Server Side -> Select event name -> Add GTM Server Side URL -> GTM Server Preview HTTP header. You need to add a preview header to see Data Tag requests inside the server container. You can find Preview Header by clicking the three dots in the top right corner of Google Tag Manager Server container preview mode and choose the “Send requests manually” -> Add event data (such as product name, sku, id, etc.) -> Add  User Data.

4. Select trigger for the event and click save. 

5. Open Server container -> Open Client -> Add new client -> Client type Request Data to Event Data -> Click Save. Publish Server container.

6. Open the preview mode of the Web and Server container and check that the server container sees Data Tag information. If you don’t see Data Tag requests, update the GTM Server Preview HTTP header.

7. Once you’ve verified that the Data Tag and Data Client works correctly, publish a web and server container.

Data Tag Use Cases

1. Send dataLayer from web to server container.

The first use case that comes to mind is sending a dataLayer from the web container to the server. With the help of this data you can feed additional parameters to your server-side tags. On the screenshot below, I used these settings to send dataLayer to the server container: 

Custom event: {{event}}

Enabled send all from dataLayer 

Enabled send common data

This data tag is firing when a user goes through the checkout process on the site.

send dataLayer from web tag manager to server

If I go to the web and server container’s preview mode, I can see that Data Tag fired three times on the web container, and Data Client received and processed all three events inside the server container. If I click on the event name and check request_data, I can see all parameters from the web DataLayer. 

data tag checkout
datalayer to server container

2. Sending User Data to Facebook Conversion API.

Let’s say you want to send user data (like first name, last name, email, etc.) to Facebook Conversion API to increase your event match quality. You can use Data Tag for that, and if you are using our tag to set up a Facebook conversion API inside the server container, the FB tag will automatically capture user data from the Data Tag. 

I wanted to send the user’s email, first name, and last name on the checkout events. I added the user’s data to the Data Tag inside the web Google Tag Manager container. I’m using static parameters for the test, but you can pass these parameters dynamically using variables. Inside the server container Facebook tag captures user parameters and sends hashed information to Facebook. 

facebook user data
facebook user data

To double-check that Facebook received these parameters, you can add Facebook test ID to the Facebook server tag and check what parameters Facebook sees in the events manager testing tool.

3. Send custom data from the web container to any other servers.

You can send data from the Google Tag Manager web container to your CRM, Slack, webhooks, etc. This example shows you how to send information about a new Purchase on your site to the Slack channel. 

First of all, make sure that you send needed information from the Google Tag Manager web container using Data Tag -> generate a webhook https://api.slack.com/tutorials/slack-apps-hello-world on Slak -> Inside the server container create a new tag and choose a tag type HTTP Request -> in the destination URL, add the URL that you’ve generated on Slack -> HTTP method POST -> in the Request body, add text and parameters that you want to send to Slack. 

{“text”: “New Purchase \n email: {{email}}  \n transation_id: {{transaction ID}} \n purchase_value: {{transaction ID}}”}

notification from slack to google tag manager

4. Store data. 

If you work with Google Tag Manager quite often, then I’m sure that there has been a time where the dataLayer (or any other variable) had to be passed on from one page of your site to another.

Unfortunately, Google TagManager doesn’t have an option to store data and pass it between site pages. For example, it’s possible to send a user email only when it existing on the page. But what if user data is not available on the thank you page, and it can be captured only from the page before the thank you page.

If you are using a data tag, you can store any variables you want to pass to other pages.

As an example, I will use an assessment that is built using the Instapage. We needed to set up a lead event for the Facebook conversion API. While submitting the assessment user had to enter details like email, phone number, first name, etc. This user information was available on the assessment pages but not the thank you page.

To have a high event match quality score on Facebook, you should send user parameters together with the CAPI event.

That is why I used Data Tag to store user data in the local storage. I created a Submit application Data tag that takes user parameters from the data layer and stores them in the Local Storage. This tag triggers when a user clicks on submit assessment button.

To enable data storing in the Data Tag, select the storing option next to the data you want to store.

data tag store data

Then I added a new variable type in the web container (you can download it using this link.) Create new variables for all data that you stored.

store data variables

And finally created a Lead Data Tag that sends stored data to the server container.

sends stored data server container

Common Problems with Data Tag and Data Client:

If you can’t see Data Tag requests inside the server container, it might be because of the following reasons: 

    1.  Wrong preview header. Open the preview mode of the Server container -> click three dots in the top right corner -> click send requests manually -> copy X-Gtm-Server-Preview HTTP header -> Open Web container and update GTM Server Preview HTTP header that you use inside the server container. 
    2. Data Client is not published. Open Server container and publish Data Client.
    3. Change POST to GET. Open the console and check if you have any errors. Click on network and type data. If you see errors, open the Data Tag and switch the Request type from POST to GET. 
data tag error

Want us to implement server-side tracking on your site?
Find out how much it'll cost!

Conclusion: Data Tag and Data Client will give a solid source of information to feed into the tags you are using inside the server container.  With the help of this tag, you can move faster in the deployment of new server-side tracking and technologies. This tag will save time and cost for both IT and marketing – a clear win-win!

 

If you want to test what the GTM server is and how it works, please register an account.

If you need help setting up a GTM server account on your website, contact us right away!