Guides & tutorials
Guides & tutorials
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).
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:
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.
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:
Now that we know the basics of GTM, let's see how to track Arengu form events.
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:
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:
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:
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:
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:
Now that we know the main concepts, let's see how we track Arengu events with Segment.
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.
This JavaScript library allows you to use a track method (among others) to send information to Segment from your website.
track method definition:
Example of track method:
So following the same GTM logic, we need to add listeners that will run the track method once someone submits the form successfully:
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:
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).