Monitoring Network Traffic with Google Tag Manager

[mstlucky8072]

When the action you want to track with GTM is form submissions, things can get a little complicated. Most of the time, a page view following the form submission or using the validation feature in HTML <form> tags is enough to easily set up. However, if form submissions are not followed by a new page view or non-standard form markup is used, it may be necessary to go for a little more special solutions.

The rest of the article will explain the solution I used to measure form transactions that are not possible to track with local triggers in GTM. Before we start, it is useful to remind you that we recommend using the setup we will perform by listening to network traffic under the following conditions:

If there is no thank you page displayed after submitting the form
If the HTML level form markup does not allow GTM's native Form Submission trigger to work properly
If there is no time or labor resources available to develop any of the above options
If you meet these conditions, you can continue reading the recipe for the installation. The installation we will do is as follows: We will capture form submissions by monitoring the requests in the network traffic and add each new form submission as a new record to the spreadsheet we created in Google Sheets. We will run our tests with Nightmarejs . Our list of requirements for this scenario is as follows:

A small script that allows us to monitor the XHR requests that the browser will
make An Apps Script macro that we will use to respond to requests to our Google Sheets document and create new records
Variables that will store the user information entered in the form we will follow
A Nightmarejs environment that will allow us to add our business owner database own GTM container to any web page to run the script we will create in the first step




Let's start with step 1.

Monitoring Network Traffic with Google Tag Manager
XHR -XMLHttpRequest- can be defined as an HTTP interface that allows scripts running in the browser to exchange data with remote servers. We can say that XHR is often required for the information to be sent via a form submission to be entered into the website's records. Therefore, the script we will write to monitor network traffic needs to monitor XHR type traffic. The script below will do exactly that:


The script makes a small addition to the browser's default XHR behavior, allowing us to access the response to any request. There are two areas in this piece of code that will be important for us during the installation phase and that we definitely need to customize. The first is the targetURL variable on line 14.