Tracking form events with Google Tag Manager & Segment

Arengu provides you with custom DOM events to track how users interact with your forms (eg. submit success, focus, blur, change, etc) in a easy way and using your current analytics stack (eg. Google Tag Manager, Segment, etc).

Basics of custom DOM events

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 submit success event:

document.addEventListener('af-submitForm-success', function(e) {
  console.log('Your form has been successfully submitted:', e.detail.formId);
});

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.

Now that you are familiar with the basics of using custom DOM events, let's see how to use them with the most common analytics tools.

Using Google Tag Manager

GTM is one of the most used tools to add tags and triggers to your website in a centralized way. Once you implement it on your website, you can make modifications and publish them to your website without touching your source code again.

Some main concepts of GTM:

• Triggers: allows you to listen to a specific event that happens in your website (eg. page view, button clicks, form submissions, etc).
• Tags: allows you to add custom code or analytics snippets from third party services.
• Data layer: it's an object that allows you to pass information to GTM (eg. events, variables, etc) and use it in tags or custom triggers.

Now that we know the basics of GTM, let's see how to track Arengu form events.

Create a custom HTML tag:

As we don't have a native trigger in GTM to link tags based on Arengu's events, we will need to add some custom code to listen to them and push the information to the dataLayer object. In this example, we will use the af-submitForm-success event that is triggered once someone successfully submits a form:

<script>
  var eventName = 'af-submitForm-success';
  document.addEventListener(eventName, function(e) {
    dataLayer.push({
      event: eventName,
      data: e.detail,
    })
  });
</script>

The dataLayer object requires an event property that we will use to create a custom event trigger. You can also pass custom properties (eg. data) to be used in other tags.

Once your code is ready, we just need to place it using the custom HTML tag and adding a page view or DOM ready trigger:

Bonus. If you want to track multiple events you can create a function to loop and add listeners to those events:

<script>
var trackedEvents = [
  'af-submitForm-success',
  'af-submitForm-error',
  'af-nextStep',
  'af-focusField',
  'af-changeField',
  'af-blurField'
];

trackedEvents.forEach(function (o) {
  document.addEventListener(o, function(e) {
    dataLayer.push({
      event: o,
      data: e.detail,
    })
  });
});
</script>

Create a custom event trigger:

As we are passing a custom event to the dataLayer, we need to create a trigger to use this event in any tag:

Now if we debug GTM, we will see that the event is triggered once you submit the form successfully:

The data property receives information from the form that you can recall in your tags creating a custom data layer variable. Let's create an example accessing the formId property that we will use on the next step:

Create tags with your custom trigger

Now that we have our custom trigger, you can use it in as many tags as you want to run your analytics code when that event happens. A common use case is to track an event using Google Analytics, if you've created a custom data layer variable to get the form ID (or any other information) in the previous step, you can now use it to pass the information to this tag using {{DL - data.formId}} reference:

Again, if we use the GTM debugger, you can see that if we submit the form successfully, the Google Analytics tag will be fired when the tracked event happens:

Using Segment

Segment is another popular tool in the analytics landscape, unlike GTM that is just a container where you can add tags, Segment is an API that you can use as your analytics hub to track events from multiple sources (eg. backend, website, native apps, etc) and send them to multiple destinations without having to learn, test or implement a new API every time.

Some main concepts of Segment:

• Sources: the origin of the data you would like to track, it could be a website, native apps, server, etc.
• Destinations: where you send your tracked data to, it could be a native integration, a webhook, custom code, etc.
• Analytics.js: a JavaScript library to track events.

Now that we know the main concepts, let's see how we track Arengu events with Segment.

Create a Source

The first thing we need to do is to create a Source to define the origin of our data, we will use a JavaScript source because we are tracking website events:

Once your source is created, you will need to install it by placing the snippet in your website source code or using a tag manager like GTM. This snippet will load the analytics.js library that we will use to track events and not just a simple page view.

Tracking events using analytics.js

This JavaScript library allows you to use a track method (among others) to send information to Segment from your website.

track method definition:

analytics.track(event, [properties], [options], [callback]);

Example of track method:

analytics.track('formSubmit', {
  formId: '123123',
  email: 'jane.doe@arengu.com'
})

So following the same GTM logic, we need to add listeners that will run the track method once someone submits the form successfully:

<script>
  var eventName = 'af-submitForm-success';
  document.addEventListener(eventName, function(e) {
    analytics.track(eventName, {
      data: e.detail,
    })
  });
</script>

Once it's done, if you go to the Debugger tab of your Source, you can have an overview of all tracked events with detailed information:

Add a destination

Now that we are receiving data from our Source, we can add Destinations where we will send the information to. Some common destinations could be Google Analytics, Mixplane, Amplitude, etc but also you can use native applications like Slack to send notifications when specific events happen:

As all analytics tools have the same patterns, now you are ready to track users behavior in your forms regardless of your analytics stack, you just need to listen to the DOM events and run code inside the listener function. Arengu provides you with custom DOM events to track how users interact with your forms (eg. submit success, focus, blur, change, etc) in a easy way and using your current analytics stack (eg. Google Tag Manager, Segment, etc).