August 17, 2021
How to See Shopify Webhooks in Server-side GTM Preview Mode
This blog post is sort of like a sequel to this one. I was just playing around and thought that maybe some of my readers will find it useful.
In a nutshell, if you want to see incoming requests in your server-side GTM’s preview mode, those HTTP requests must either contain 3 gtm-related cookies (read more here) or they must contain an X-Gtm-Server-Preview header with a particular value.
Without these measures, the requests will not be visible in the preview mode, hence the debugging process will be very tedious. Your server-side GTM will continue getting those requests but they will not be displayed in the preview mode.
Fair enough. But what if you are getting requests where you cannot simply add that header (or cookies) to the request? A Shopify webhook, for example. The process becomes a bit more complex.
Luckily, there are workarounds. In this blog post, I will play around with the Shopify order payment webhook and I’ll show how to make it visible in the SGTM preview mode.
Server-side GTM is a tough topic
If you have never worked with SGTM before, this blog post might look quite confusing (because web GTM and server GTM are fairly different beasts). If you want to get started with it, take a look at my intermediate/advanced GTM course where I have two modules dedicated to this topic.
Before we continue
Look at this article as a proof of concept. Instead of using yet another 3rd party tool (in this blog post, that’s Webhook Relay), cooperate with a developer to and ask him/her to build some basic forwarder in-house (or maybe your company already has some application/server that handles incoming webhooks. In that case, you could ask to add additional forwarding to your SGTM server too). The less you are dependent on 3rd parties, the better it is in the long run.
So what’s the plan?
In a nutshell, I will be sending webhooks (coming from Shopify) to an intermediary service that allows me to edit the request and then forward it wherever I want.
I will catch that webhook, add the X-Gtm-Server-Preview header, and will then forward it to SGTM. Look at this example as a proof of concept. When it comes to real-life projects, I would recommend cooperating with your company’s/client’s developer who could build a similar service (rather than depending on a 3rd party request-forwarding tool).
The example that I will be showing might be ok for the initial setup when you are working on a fairly small project. But before going live, I would suggest closer cooperation with a developer and making sure that your company/client owns that request-forwarding solution.
In this guide, I presume that you are not a developer (but you are not afraid of getting your hands a little dirty).
What is a Webhook?
After doing a quick Google search, I found a tool called Webhook Relay. It allows catching webhooks, manipulating them (if needed), and then sending it further (wherever you need).
Its free plan was enough for me to play around and write this blog post.
Go to the official website and sign up. When you do that, go to Functions. Here we will write a little function that will add that X-Gtm-Server-Preview header to Shopify’s Webhook.
Keep looking for Request Forwarding > Functions > Create Function. Add its name, e.g. Add GTM preview header.
Delete all the existing code there and enter this:
Replace XXXXX with the value that you will find by going to your SGTM preview mode and clicking Three Dots > Manually Send Request. This is what the final result should look like.
Click Save in the Webhook Relay Function Editor.
Once this function is activated, it will set an additional Request Header X-Gtm-Server-Preview and its value will be whatever you copied from your SGTM preview mode.
Now, let’s create the actual webhook forwarding. This part will be responsible for processing the request, activating the function (that adds the header), and forwarding it further to your SGTM endpoint.
Go to the Request Forwarding section. SaaS companies keep constantly changing their interface, therefore, don’t attach too much to my screenshots. Just keep looking for Request Forwarding or something similar. Click New Forwarding.
Then select Use default input domain.
Then skip the Run a Function on the incoming request. Just click continue. We are going to use our function a bit later.
Then enter the URL of your server-side GTM endpoint (where the data should be sent). Since you are going to send Shopify webhooks, you can enter your endpoint’s domain and /shopify/. Click Continue.
Let’s use our function. In the 4th step, select that you want to use a Function and then pick it. Click Continue.
Review the entire setup. Optionally, you can rename this configuration.
After you see a Success message, go to Buckets and you should see your Forwarding there. Click on the Copy icon in the Inputs column.
We’ll need that link in the Shopify Admin.
Configure Webhook in Shopify
Log in to your Shopify Store’s Admin. Go to Settings > Notifications
Then scroll down to the very bottom of the page and click Create Webhook.
For this example, I will use Order Payment webhook. Enter the URL that you have copied from Webhook Relay. As for the Webhook API version, you can select the latest stable version.
Whenever a new payment is made on a Shopify store, that order’s information will be sent to Webhook Relay (and from there, it will be forwarded to SGTM).
Let’s test the setup
In your server-side GTM container, click Preview. Then go back to your Shopify Admin and click Send Test Notification next to the Order Payment webhook. This will send test webhook data to Webhook Relay.
Then Webhook Relay will get that request and activate a function (that adds the header). Because of that header, you should see the request in your GTM’s preview mode.
If you entered /shopify/ in Webhook Relay’s Forwarding Settings, you should see /shopify/ in the preview mode. Most likely, no client will claim it.
It depends on what are your goals and needs. There is a chance that you will need a developer to build a client for you that will process the data and do something with it (maybe make it available in the Event Data tab of SGTM preview mode or maybe will send it somewhere further).
You can download their template file here by clicking Right-click > Save as. Important: save it as .tpl file, not .txt.
Then go to your SGTM container > Templates > New (in the Client Templates section.
In the top-right corner, click 3 dots > Import and select the template file you’ve just downloaded. Then click Save.
Close the Template Editor.
Now go to Clients > New > Data Client. Click More Settings and enter the path to which you are sending webhooks from Webhook Relay. In my case, I use /shopify/, therefore, I will enter it here as well.
Save the client.
Refresh the SGTM preview mode by clicking the Preview button once again. Go to Shopify Admin > Settings > Notifications and send another test notification (webhook).
You should see one more request to /shopify/ in your SGTM preview mode. Click it. This time, you will see that this request was claimed by the Data Client.
If you click on Data (on the left sidebar) and go to Event Data, you will see that the client parsed a lot of data from it and made it available as separate data points.
If you want to access, say, ‘id’ of this order…
…then create a new variable in your server-side GTM container with the following settings:
Want to access accepts_marketing key?
Then create this variable in your server-side GTM container:
The reason why I entered a dot after customer is because first I had to access the customer event data key. And since this key is an object, I had to access its accepts_marketing value by entering a dot. This is similar to what I explain here.
- Once you create a new webhook and start forwarding it to Webhook Relay > SGTM, all events of that type will start appearing in the SGTM preview mode (not only yours). If you are working with a high-volume website, this might overwhelm your debugging process because you will start getting way too many transactions). In that case, there are two options:
- You could add additional code and enhance the function in Webhook Relay (to add the header only if a particular condition is met, e.g. the user id is of your account). Coding knowledge required.
- If your developer has built an in-house webhook-forwarder, ask him/her to add some sort of filter and add X-Gtm-Server-Preview only to requests coming from your Shopify User (because id is also included in the webhook).
- If your Shopify store is already sending order payment webhooks directly to SGTM and then you create another order payment webhook to replicate this blog post’s solution, you will start getting duplicate request. I mean, your preview mode will be showing only the data coming from your webhook (because of the GTM preview header), but the SGTM server will be getting both regular and forwarded webhooks. So just for debugging, you could use another SGTM container. Or you could cooperate with a developer, ask him/her to developer the webhook forwarder, and then add the header only to webhooks coming from your user. Or maybe you will come up with something else.
Shopify Webhooks in Server-side GTM Preview Mode: Final words
Look at this guide as a proof of concept. I don’t know if Webhook Relay is a reliable service for something more serious than just playing around. Maybe it is. Maybe it isn’t.
So if you ever work on a decent SGTM project, cooperate with a developer (and ask him/her to build some basic service that accepts webhooks and then forwards them with an additional HTTP header). That way, your (client’s) company will have more control.
Anyway, what we did in this blog post was (not necessarily in this order):
- Configured a Shopify webhook that sends the data to Webhook Relay
- We used Webhook Relay to modify the outgoing request and add an additional HTTP header (without the need to code anything)
- That header is automatically added by a function we created in Webhook Relay
When all of those steps are configured, the Webhook is sent to Webhook Relay, which then sends it to your SGTM server.