Stape

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

Author
Stape
Published
April 01, 2021
Also available in

Having reliable data in the server Google Tag Manager is a key to accurate server-side tagging. One of the most popular ways to send data from web to server GTM is Google Analytics 4. GA4 has its limitations. That is why we created Data Tag and Data Client that should work together to deliver event and user data from web to server GTM.

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. When used together with the Data Client for the Google Tag Manager server container, it allows sending data layer variables, custom parameters, and other data from the web to the server container. As a result, Data Client retrieves information from the Data Tag into the Google Tag Manager Server Events.

How to send data from the Google Tag Manager web to the server containerCopy link to this section

Companies started to take advantage of the Google Tag Manager server-side containers in 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 start utilizing only server-side tracking. The Data Tag that we created is designed to deliver data from the web to the server container. The clients who wish to combine web and server tracking will find it especially helpful. 

The server-side tracking allows moving the instrumentation of Google Tag Manager to the server environment. In other words, you can move your tracking out of the browser and into the server. Our Data Tag and Data Client solve the problem of transporting data from the Google Tag Manager web to the server container. Let’s say that you have all the data you need configured on the web container, but the server environment cannot use the same data Layer variables, DOM elements, etc. Our Data Tag and Data Client solve the problem of transporting all the data from the web to server container with no extra efforts required.

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. 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, molding, and retrieving 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 tags.

Data Tag DescriptionsCopy link to this section

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

data tag overview

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 in your Google Tag Manager Server container settings under Tagging server URL. Data Tag will use this domain to send requests. 

You can choose to send all data layer values to the server container by enabling Send all from Data Layer.

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 tab, 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 values with functions Trim, To lower case or Hash. You can also store variables.

With the help of User Data, you can send user parameters. You need to select the parameter name from the dropdown menu, add a static value, or use the variable. There is also an option to transform value with trim, to lowercase, hash functions and store. 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, then the Facebook tag will automatically take user data from Data Tag. 

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

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

Data Tag benefitsCopy link to this section

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 an 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. For example, it can be used when the form submits have available user data on button clicks but not at thank-you pages. I’ll demonstrate how this function works later in the 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 ClientCopy link to this section

I will show how to use Data Tag/Data Client for the purchase event. This logic of using Data Tag/Data Client is the same for all events. 

This video shows hot to use Data Tag / Data Client for sending event and user information from web to server container👇

1. Add Data Tag to the GTM Web container from the Template Gallery. 

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 Tag -> Select event name or choose dynamic event name -> Add GTM Server Side URL -> Add event data (such as product name, SKU, ID, etc.) and User Data manually or select to Send all from DataLayer.  

set up data tag enhanced e-commerce 

4. Select trigger for the event and click save.

5. Open Server container -> Open Client -> Add new client -> Client type Data Client -> 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. 

test data tag requests in the server container 

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

Data Tag use casesCopy link to this section

1. Data layer from the web to the server container.Copy link to this section

The first use case that comes to mind is sending a data layer 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 the data layer to the server container: 

  • Custom event: {{event}}
  • Enabled send all from data layer
  • Enabled send common data

This data tag fires on all enhanced e-commerce events.

send data from web gtm to Server GTM 

In the server container preview mode, you will see that Data Tag sent requests on all e-commerce events, and Data Client received and processed these requests inside the server container. If I click on the event name and check event_data, you should see all the parameters from the web data layer.

2. Sending User Data to Facebook Conversion API.Copy link to this section

Let’s say that you want to send user data like the first name, last name, or email 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 tag, the FB tag will automatically capture user data from the Data Tag. 

I wanted to send the user email, first name, and last name together with the checkout events in the examples below. I added the user data to the Data Tag on the Web Google Tag Manager container. I’m using static parameters for the test, but you can pass these parameters dynamically using variables. Our Facebook tag automatically captures user parameters from the Data Client and sends hashed information to Facebook.

send user data from web to Server GTM

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

3. Send custom data from the Web container to any other servers.Copy link to this section

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. 

    1. Make sure that you send the correct information from the Google Tag Manager web container using Data Tag. 

    2. Generate a webhook https://api.slack.com/tutorials/slack-apps-hello-world on Slack. 

    3. Inside the server container, create a new tag and choose a tag type HTTP Request. 

    4. In the destination URL, add the URL that you’ve generated on Slack. 

    5. HTTP method POST.

    6. 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}}”}

4. Store data.Copy link to this section

If you work with Google Tag Manager quite often, then there has been a time when the data layer (or any other variable) had to be passed on from one page of your site to another.

Unfortunately, Google Tag Manager 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 exists 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?

Using a data tag, you can store any variables you want to pass to other pages.

As an example, I will use an assessment built with Instapage. We needed to set up a lead event for the Facebook conversion API. While submitting the assessment, the user had to enter details like email, phone number, first name, etc. This user information was available on the assessment pages but not on 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 the submit assessment button.

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

store user data in cookies web google tag manager

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.

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

5. Retrieve any incoming request.Copy link to this section

You can use Data Client to retrieve any incoming requests. To do that, you need to modify Path Settings. It can be used, for example, to retrieve data from Webhooks. We have this article that describes how to use incoming webhooks.

prices incoming requests in the server container

Common Problems with Data Tag and Data ClientCopy link to this section

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

1. Data Client is not published. Open Server container and publish Data Client

data client nor working CORS

ConclusionCopy link to this section

Data Tag and Data Client will give a solid source of information to feed into the tags you use 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!

Tagged with:GTM

Host your GTM server at Stape

By signing up you agree to Stape’s Terms of Use and Privacy Notice