Guides & tutorials

Tracking form events with Google Tag Manager & Segment

No items found.
Import this tutorial scenario in your workspace
Table of contents

As you begin to deploy your forms, it is important to measure the success of user engagement. One of the most common ways of measuring is by using Google Tag Manager. 

In this example, we'll explain how to implement Google Tag Manager within an Arengu form, but the same approach can be applied to any other tracking tool.

Requirements

  • The Google Tag Manager script must be installed in your website, where the Arengu form is embedded. 
  • A data layer object must be defined in a script, at least once in the form, otherwise be manually entered:
<script>
 window.dataLayer = window.dataLayer || [];
</script>

We will be working with the data layer object which is like a bucket that stores information. Google Tag Manager will read that information, use it in tags/triggers/variables, or send further to other tools, Google Analytics, Google Adwords, Facebook, etc.

Tracking next/previous steps events

A very useful measurement is to track the user journey through each form step. So that you can update or change the steps as needed. 

Do you need to track when a user clicks the Next or Continue button? 

To measure this, we can add an HTML block with a data layer script to the second step of the form. This way we are tracking when the second step loads, so that we know when a user has clicked the continue button. 

We recommend adding the HTML block to the bottom of the steps for organizational purposes, however, as it is invisible, it can be placed anywhere in the step. 

The script added to the HTML Block:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'next_step',
    stepName: 'Verification code',
    email: '{{fields.email}}'
  });
</script>

If you have additional steps, in your form, and need to track each of them, just keep adding HTML blocks with a data layer script to as many steps as needed. 

To recap, as each form step loads, the HTML block will load, and the data layer script sending the event will execute.

Tracking form submissions events

Another useful measurement is tracking form submissions. We make it easy to track submissions with our Ending screen. Our Ending screen includes a Javascript callback settings, where we can add a data layer script to run when a form has been submitted.

An example of a code added to the Javascript setting:

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'submit_form_success',
    formName: 'Signup with OTP',
    userId: '{{state.user_id}}',
    email: '{{fields.email}}'
  });

This script will run when the form is submitted. 

Referencing form variables in your events

In your tracking code, you can reference any user input value by using the format {{fields.field_id}}.

The email field with an id of email, the reference is {{fields.email}}

<script>
  window.dataLayer.push({
    event: 'next_step',
    email: '{{fields.email}}'
  });
</script>

Or if you are using state variables {{state.variable_id}}

<script>
  window.dataLayer.push({
    event: 'signup_success',
    userId: '{{state.user_id}}'
  });
</script>

You can learn more about state variables here.

Using other analytic tools 

Since we support HTML script blocks and the Ending screen Javascript callback, you can use any analytic tools. You just need the proper script format. 

Segment

analytics.track('signup_sucess', {
  formName: 'Signup with OTP',
  email: '{{fields.email}}'
})

Advanced tracking with DOM events

We provide you with custom DOM events to track advanced interactions (eg. focus, blur, change, etc) in your forms.

This list has the most common used events to measure your forms performance:

Event Description
af-submitForm-error Fires when there is an error submitting a form.
af-invalidFields-error Fires when there are invalid fields.
af-blurField Fires when a field loses focus
af-focusField Fires when a field gets focus
af-changeField Fires when the value of a field has been changed.

You can find a full list of these events in our documentation site.

This is an example listening to the change field event:

document.addEventListener('af-changeField', function(e) {
  console.log('A field value has changed:', e.detail);
});

Notice that if you access the detail property that is passed to the event handler, you can use further information related to that event (eg. form ID, step ID, field value, etc). Again, you can find a full list of available properties of the event object in our documentation.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.