Docly

Google Tag Manager

Estimated reading: 4 minutes

Google Tag Manager (GTM) is a tool from Google that allows you as an online marketer, entrepreneur or social media specialist to become less dependent on your developers or an external agency. By means of Google Tag Manager you ensure that you can make useful tags such as Google Analytics or the Meta Pixel work without having to ask your web builder to place the tags in the code of your website.

In Measurements you have the option to make Client Side and Server Side calls for GTM. Client Side calls are not available for the events After a webhook call from Findock v2 and After a successful payment. The Client Side calls use the datalayer.push() function. The data can then be read by the GTM pixel on your website:

<!-- 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://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','UNIQUE_ID');</script>
<!-- End Google Tag Manager -->

In the above code, replace UNIQUE_ID with your own Google Tag Manager ID.

Server Side calls are only available if a value is entered in the CampaignSuite settings for the field GTM SST URL (Google Tag Manager Server Side Tracking URL). This URL (also called Tag Manager server container) can be created in Google Tag Manager. Read here to learn more about how to create a Tag Manager server container. When you fill in the Measurement ID field with the ID from GTM, it will automatically be included in the Server Side calls in the parameter tid.

Client Side

When a Client Side call is made via the Google Tag Manager provider, CampaignSuite automatically detects whether it is an E-commerce Measurement call or not. We do this based on the mapping of the Price parameter of the product. If this parameter is mapped, the datalayer.push() will have an e-commerce syntax. In all other cases it will be a simple version of a datalayer.push(). Below are 2 examples of a simple and an e-commerce Client Side call.

Example of the mapping (simple):

Example of the datalayer.push() Javascript code:

<script type='text/javascript'>
  dataLayer.push({
    event: "page_switch",
    page: "1"
  });
</script>

Example of the mapping (e-commerce):

Example of the datalayer.push() Javascript code:

<script type='text/javascript'>
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "purchase",
    transaction_id: "349",
    e-commerce: {
      value: 12.45,
      payment_type: "Ideal",
      items: [
        {
          item_id: "1",
          item_name: "Donation",
          price: 12.45,
          quantity: 1
        }
      ]
    }
  });
</script>

Server Side

It is only possible to make Server Side calls if there is a Tag Managa server container has been created and set up. This container can be accessed via a separate URL (for example: https://sst.testwebsite.nl/g/collect) which must be set in the CampaignSuite settings under GTM SST URL.

The parameters mapped in the block of Google Tag Manager at Measurements will be sent in the URL that CampaignSuite calls via a GET request. Check out this page to see which parameters are supported .

The example below shows a Server Side call upon successful payment:

Example of the mapping:

GET request URL being executed:

https://sst.testwebsite.nl/g/collect?v=2&cid=278327074.1665398324&tid=G-AB1CDEFG23& en=payment&cu=EUR&ep.fbc=undefined&ep.transaction_id=346&epn.value=100&ep.typedonatie=One-time&ep.email=test@test.nl&pr1=idonce_0~nmdonatie_via_website~ pr100~qt1~caIdeal

All product fields are merged and all individual parameters are pasted after the URL. In this way a Server Side call is made for Google Tag Manager.