What are webhooks and their use in server-side tracking

There are a lot of ways how to automatize your business. Among them, we would like to distinguish webhooks. By setting up webhooks, you can streamline processes that usually depend on manual input, ultimately saving time and energy. 

In this blog post, we will explain what webhooks are, why they’re the perfect choice for your flexibility, how they work, and their use in server-side tracking.

What are webhooksCopy link to this section

In a nutshell, a webhook is a program code. It usually consists of two parts - a variable and the data itself. 

Webhooks are automated messages sent from web applications to other web applications. It is a powerful tool that allows developers to inform multiple services of updated content or user data. This allows web pages to remain in sync, as webhooks enable developers to connect two web services quickly and automatically transfer information between them in real time. Webhooks can be used for almost anything, including push notifications when an item has shipped or sending payment information when a purchase has been made. Webhooks provide ease and convenience without needing manual input or middleware software, making web development smoother than ever.

How webhooks workCopy link to this section

To get started with server-side webhooks, you must first decide which application you want to trigger and which application will receive them. Typically, the sending application is referred to as the ‘source’ while the receiving application is referred to as the ‘destination.’ Once you have chosen both applications, the next step is configuring each one’s webhook settings. 

Webhook is triggered when an event occurs on your site, CRM, chatbot, or other systems. For example, a person wrote a comment or added a new product to the product accounting system. When this event occurs, the server creates an HTTP request and sends it to the address specified by the customer to receive webhooks. The client gets new data in time - the client is happy. The user can configure webhooks so that events on some sites trigger actions on other sites. For example, a person creates an order in the online store → the system sends a webhook to the owner's app → the app notifies the owner and sends the person an estimate.

Webhooks and server-side trackingCopy link to this section

Using webhooks in server-side tracking is surprisingly simple. With webhooks, data can automatically be sent to the server Google Tag Manager container every time an event or action takes place on your website. 

The most common use case of webhook in server-side tagging is sending webhooks from the CRM or CMS. For example, whenever a user is created, updated, an order placed, etc., you can send this data to server GTM. 

Why should you use webhooks for server-side taggingCopy link to this section

With the help of webhooks, you can track events that happen not on your website or app. Things like sales in offline stores or phone leads - all this data can be sent to advertising platforms using webhooks and server-side tagging. 

Imagine this scenario: a user stumbling across your advertisement online, clicks through, and arrives on your website. After some exploring, they had queries regarding the product, so they decided to give you a call. Customer service representatives answered all the questions, and a user placed an order by phone.

In this case, one particular campaign is responsible for the order, but how can you track it? The most obvious way is to ask clients how they find your website. They might say something like an online ad or tell the platform where they saw it. But this information won’t help to understand which campaign or ad set was responsible for the conversion. 

Tracking such orders is possible with the help of webhooks and server-side tagging. Whenever a new phone order is created in the CRM, you can send a webhook to server Google Tag Manager with all the order and customer details. After the server GTM gets this data, you can distribute it to the advertising network. If the ad network can match a user who made an offline purchase to a user who saw your ad, this order will be reflected as an offline conversion to a corresponding campaign. 

In the next section, let’s dive into some details on how to set up webhooks and trigger conversions based on the webhooks. 

How to set up webhooks for sGTMCopy link to this section

The reason why using webhooks in sGTM can help to track conversions more accurately and improve conversion attribution is obvious. So let’s dive into details on how to set up webhooks in sGTM. 

1. How to send webhooks to sGTM

Check your CRM or CMS for a native plugin or functionality that supports webhooks. The most popular one does. Once you’ve found it, create a webhook for the event you want to track. In the webhook settings, add your server-side tagging URL with the path that will distinguish your webhook. 

In my case:

https://ss.wp-demo.stape.io - is server-side tagging URL 

/order_created - is a path that differentiates my webhook that sends data whenever an order is placed. 

2. How to see webhook data in sGTM

Sending webhook data from CRM or CMS is relatively easy. However, you need to see webhook data in the sGTM debugger to set up tags accurately. The chances that one can set up tags without using a debugger are low. 

By default, you can’t see webhook data in sGTM. To make it visible, we need to use Preview HTTP header functionality in the sGTM debugger and stape. 

To enable the sGTM preview header open your server Google Tag Manager container -> click preview -> click three dots in the top right corner -> click send requests manually -> copy X-Gtm-Server-Preview HTTP header.

Log in to your stape.io account, open the sGTM container, go to Power-Ups and click Use HTTP Header Config. 

Paste the Preview HTTP header you’ve copied from the server Google Tag Manager debugger and click Save. 

The above steps will allow you to see webhook data in the server Google Tag Manager debugger. After you’ve done the setup, remove Preview Header from stape sGTM power-ups. Our system automatically removes the Preview Header 1 hour after you’ve enabled it. 

3. How to process webhook data in server Google Tag Manager

The last preparation step before you can eventually send webhook data to the advertising or analytics platform is to process webhook data in sGTM. We will do so with the help of stape’s Data Client. 

In sGTM, clients are responsible for claiming requests and processing request data to event data. 

Import Data Client to your sGTM container. The first step would be to download Data Client from GitHub. Then, go to the sGTM container, open the Templates sections, and click New client. 

Click three dots and then Import. Next, select the Data Client template you downloaded from GitHub and save it.

Go to the Clients tab and create a new Client. Select Client type - Data Client, add client name, and scroll to Accepted Path Settings. Add a path that differentiates your webhook. In my case, it’s /order_created and click save. 

Once done, open sGTM and test that the webhook was sent and Data Client processed the requests successfully. 

4. How to use webhook data for setting sGTM tags

This step highly depends on your goals and technology stack. For example, you can send offline events to Facebook or Google Ads. Or you can notify your sales or marketing department about new orders using Slack or Telegram tag for sGTM. 

ConclusionCopy link to this section

Webhooks offer an easy and convenient way to receive real-time notification updates for web-based activities, allowing companies to respond and act upon those notifications with minimal effort quickly. Additionally, webhooks are a secure way of sharing information with other web services like marketing or analytics platforms, as they don’t require developers or programmers to provide users with access credentials or sensitive data.

If you feel confused - do not hesitate to contact stape support. We will be more than happy to help you.