Form tracking: Overview

Updated by Anton Lauritsen

Please only implement the scripts below IF you are currently using the legacy version 1.0 of Dreamdata's Web Tracking script. Otherwise, we recommend using the new Web Tracking script, version 2.0, which has built-in support for form tracking, intent sources and other integrations.

In this article, we'll provide you with a comprehensive listicle of the different ways to track form submissions.

Before setting up the form tracking, you need to first set up the web tracking by installing the Dreamdata analytics script.

Refer to our Web Tracking Documentation for guidance.

Att: At Dreamdata we recommend that you set up your tracking manually as this enables you to control the tracking behaviour much easier.

For the manual set-up guide, click here.

Auto identify

With this method, you add an additional script to your pages that out-of-the-box monitors all form submissions, and if it can find an email input, it uses that as the user’s email address, meaning it's linking that email input with the user’s cookie id.

When using this method, it’s important to note that it only works if your forms are straightforward valid HTML forms. If you are doing a lot of javascript, want to control the tracking behavior, or else just don’t use valid HTML forms, then you should consider the Javascript option.

See below for information about installation and configuration.

Note: Our script adds event listeners to all forms present after the load event.
Any forms which are added after this will not be tracked.

How to install auto-identify script

Add the following auto-identify script just before the closing </body> tag on your website pages to ensure it captures all forms rendered on the page.

  1. <script async id="dreamdata-form-identify" src="https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js"></script>

How to name your form

To give your form a name that appears on the event in Dreamdata, you can select which attribute below works best with your current form naming process.

Description

Attribute

Example Script

Use the form's id attribute as the event name in tracking

data-use-form-id-as-track-name="true"

<script async id="dreamdata-form-identify" data-use-form-id-as-track-name="true" src="https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js"></script>

Use the form's name attribute as the event name in tracking.

data-use-form-name-as-track-name="true"

<script async id="dreamdata-form-identify" data-use-form-name-as-track-name="true" src="https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js"></script>

Custom event name for tracking, overriding default "form-submit".

data-track-name="[insert custom name here]"

<script async id="dreamdata-form-identify" data-track-name="[insert custom name here]" src="https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js"></script>

Below you'll find an overview of the different ways you can track forms in Dreamdata:

Form tracking: SPAs (Single Page Applications)

This guide will explain how to implement form tracking in modern JS frameworks such as React, Angular and similar. Click here to view the guide

Form tracking: Google Tag Manager (auto-identify script)

This guide will explain how to add the auto-identify form tracking script via Google Tag Manager using a custom HTML tag.

Note: If you have set up Google Analytics event or goal tracking then read this article on common issues.

Form tracking: Hubspot (auto-identify script)

This guide explains how you can apply the auto-identify script and start tracking If you use Hubspot forms on your website

Form tracking: iframes (auto-identify script)

This guide will explain how you can use the auto-identify script to track forms sitting in iframes.

Form tracking: Calendly

This guide will explain how you can track Calendly forms on your website.

Form tracking: Pardot iframe

This guide explains how you can track Pardot iframe forms on your website.

Form tracking: Server Side Analytics APIs

This guide will explain how to track events server-side. If you want to know more about this, contact your customer success manager or reach out through the chat.

Form tracking: Sleeknote or Drift

This is a guide on how to track forms using Drift or Sleeknote.

Form tracking: Dynamics 365 Marketing

This guide on how to track forms using Dynamics 365 Marketing Forms

Form tracking: Intercom

This guide on how to track chat conversions with Intercom

How did we do?