Tracking form events with Google Tag Manager & Segment

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:

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.