Form submission tracking with GTM

Hello!

Brief introduction:
')
If you have competent developers and forms on your site, you can track it using the standard trigger “Submitting a form” to Google Tag Manager or embed an event in the handler - I sincerely envy you. Today we are considering another case.

PROBLEM:

Recently, it is becoming less and less common to see a situation where, after submitting a form, a user is redirected to a new page. All manipulations usually occur at the same address. That is, AJAX technology is used to send data.

Inaccurate and ineffective ways of tracking statistics will always exist.

How "mowing" before:

Previously, the submission of forms was tracked to the individual address of the page. If it was not there, they asked the developers to change the very logic of the form.

How "kosyachat" now:

Relatively new technologies allow you to send data without reloading pages. This creates a problem for tracking the submission of forms: instead of the changed link, they track the CLICK on the button, not the fact of the submission.

Advantages of such approaches:

• Easy to set goals. If you do not know how to do this, you can quickly figure it out.
• More bids * sarcasm *.

Minuses:

• Completed goals do not match the number of applications. The error at the same time can be on average 20-30%.
• The data on the performance of traffic sources will also not correspond to reality.

In addition, difficulties arise when we need to make changes to the code of the site in order to correctly send the event about sending the form:

• Client developers do not know what / how / where to fix. This problem is quite common.
• The site is on a third-party platform (nethouse, insales, wix, LPgenerator, etc.). They do not always give the opportunity to quickly change the code.

There are many ways to track form submission online. But often they are too individual or not always working.

I want to tell you about the solution that works on all sites in which we use it. An event is sent only if the form is successfully submitted.

DECISION:

1. You need to generate the GTM code and install it on the site in accordance with the requirements of Google Tag Manager: tagmanager.google.com

2. On the tab with triggers add a new one - “Model DOM Ready”.



3. On the “Tags” tab , create a new one with the “Custom HTML” type, and select the one created in the previous step as a trigger.



The code itself:



It will help track the submission of forms. Read more about the code here: vk.cc/6Au3Jj

4. Then create a variable for the success data.

To find out which variable to pull, you need:
- Fill out and submit the form



- Open the browser console and send a request to the data level (most likely, the type "dataLayer" without quotes). After that, several objects will appear:



In this particular case, there are two “ajaxSuccessData” objects. The first URL is a “talking link” about sending a message. The second shows on the page a block with the message “Application has been sent”.

You did not have similar data? It is possible that your GTM code simply uses a different data level name.

You can check the level name in the GTM code:



5. Create a variable: GTM → Variables → Create

In the previous screenshot, only the status of “success” is interesting: true in the data level variable responseText, which in turn is inside the ajaxSuccessData container.



How in this case, check the status of «success»: true? In the field the name of a variable of this level must be entered through the point of their name:

ajaxSuccessData.responseText

The name of the variable itself can be any.



6. Create a trigger.

- The name of the trigger must be speaking.
- Trigger Type "Custom Event"
- Event name is “ajaxSuccess”:



- Activation on some pages: only where the variable receives data on the successful submission of the form.

In each case, there may be several forms. If they need to be separated, you can use other data that is transmitted when sending. In our case it was a landing page, and this approach was enough.



7. After the trigger is created, you can create event send tags for Metrics and Analytics.

Please note: in the screenshot for Analytics, the tracking identifier is set via a variable, if you use another variable to specify an identifier - use it or specify the identifier manually. But the latter option is not recommended.





The sites are different, but the sequence of actions described above is the same for all.

Track your goals correctly and let your sales hit Zen!

Author: Pavel Mrykin, Head of Automation and Analytics at a digital agency