How to: track Omnisend forms activity using JavaScript

Intro

In this section, we will cover how to use event listeners to trigger custom JavaScript based on site visitor interaction with a form. It enables the following features:

• Execute custom JavaScript upon event occurrence;
• Google Analytics tracking on form events.

See the detailed API reference for Omnisend forms events

Execute custom JavaScript upon event occurrence - event listener sample

The following is the typical format to use when developing your personalized event listener for form events. If needed, you have the option to modify the type view to any other type of form event (as listed in the Form event types section above).

Replace 'Custom JS' in the example below with JavaScript, which should run when the event occurs.

 <script>
    window.addEventListener("omnisendForms", function(e) { 
        if (e.detail.type == 'view') {
            // Custom JS
        }
    });
</script>

To utilize the event's timestamp in your own JavaScript code, use 'e.timeStamp'.

Please note that in this use case, the only exception is landing pages. We will also trigger JavaScript events for landing pages; however, event listeners are not possible in landing pages yet.

Use Case: Implement Google Analytics Tracking on form events

Track a specific form event as an event in Google Analytics.

When picking the perfect event to use, you must consider the specific tracking needs. If you are looking at general form analytics, such as tracking form submissions in Google Analytics, choose the 'submit' event; it triggers only once per form. If you have a multi-step form, you can additionally capture step data using the 'stepSubmit' event.

<script>
  window.addEventListener("omnisendForms", function(e) { 
      if (e.detail.type == 'view') {
          gtag('event', 'omnisend_form_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
      if (e.detail.type == 'interaction') {
          gtag('event', 'omnisend_form_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
      if (e.detail.type == 'submit') {
          gtag('event', 'omnisend_form_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
      if (e.detail.type == 'close') {
          gtag('event', 'omnisend_form_close', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
      if (e.detail.type == 'stepView') {
          gtag('event', 'omnisend_form_step_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
      if (e.detail.type == 'stepInteraction') {
          gtag('event', 'omnisend_form_step_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
      if (e.detail.type == 'stepSubmit') {
          gtag('event', 'omnisend_form_step_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
      }
    });
</script>