Tracking Forms

Nicholas Wright Updated by Nicholas Wright

When using Dreamdata its important to get an overview of your forms and ensure they are tracked properly.

There are a few ways to do that and which one to use depends on your setup and preferences.

Tracking using Javascript

It is highly recommend for you to track forms using Javascript which gives you the control and reliability to ensure we track your important events.

Generally speaking, you want to run the following tracking code either just before or just after the form has been submitted. If it’s before or after usually depends if you have some validation rules running server-side and of practicalities. As such its not important if it’s done before or after. 

You might already have some tracking of events for example Google Analytics running. If you do its very likely that you would want to place this script the same place in your code or example Google Tag Manager.

This is the tracking code you would want to add. Remember to replace the email with the user’s actual email address, you might want to ask your developer to help with that as it depends on how your setup works.

analytics.identify(null, {email: 'person@email.com'});
analytics.track('formSubmitted');

Note 1: It's often a good idea to replace formSubmitted with an meaningful conversion name for your case. In case the code is generic you can keep formSubmitted as conversion name.

Note 2: Don't give any HTML element the id='analytics' as this will make the page incompatible with our script.

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 its 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 straight forward valid HTML forms. If you are doing a lot of javascript, want to control the tracking behavior, or else how 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.

Manually install auto-identify script

The Auto-Identify script in the header of your websites where you would also add the following script at the end of the <head /> section.

<script async id="dreamdata-form-identify" src="https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js"></script>
Install auto-identify script via Google Tag Manager

If you installed our webpage tracking using the Google Tag Manager Dreamdata Template, you can simply enable the Auto-Identify script within the Tag settings.

Tracking Hubspot Forms with auto-identify script

For users using Hubspot Forms, add the following auto-Identify script at the end of the <head /> section.

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

If you are using Google Tag Manager, then you have to use this script instead because Google Tag Manager strips data parameters:

<script>
var script = document.createElement('script');
script.async = 'true';
script.id = 'dreamdata-form-identify';
script.src = "https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js";
script.setAttribute('data-hubspot-forms', 'true');
document.head.appendChild(script);
</script>
Tracking Iframes with auto-identify script

On the parent page that contains the iframe, you will need the following script added at the end of the <head /> section.

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

If you are using Google Tag Manager, then you have to use this script instead because Google Tag Manager strips data parameters:

<script>
var script = document.createElement('script');
script.async = 'true';
script.id = 'dreamdata-form-identify';
script.src = "https://cdn.dreamdata.cloud/scripts/identify-form/v1/identify-form.min.js";
script.setAttribute('data-iframe', 'true');
document.head.appendChild(script);
</script>

Within the iframe, you will need the following script added at the end of the <head /> section.

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

For users using Pardot iframe forms please refer to this article

Google Analytics tracking

If you have set up Google Analytics event or goal tracking there are a few things you want to consider before comparing the numbers.

Events

If you compare with events then you should be aware that the events are not unique per user. Meaning that in Google Analytics if someone submits and forms you track multiple times it would also count multiple times as events.

Currently, we don’t show this number in the UI, however, it’s in our data source.

Goals

Goals are tracked on the visitor. For example, if 1 site visitor fills out your newsletter signup form 2 times, using 2 different email addresses, it will only count as 1 goal conversion. However also if the same user submits the same email on both his mobile and desktop device then it would count 2.

Dreamdata

At Dreamdata we try to avoid looking at cookies for analytics and only count unique emails (contacts) and unique companies. We do this because many of the data sources are not cookie-based and also cookies can be cleared.

Therefore the numbers will not always match up, however often than should be close and it’s for sure a good idea to align on the numbers ensuring they are not too far off which could indicate that some of the trackings are not set up properly.

If we try with the same example as with Goals. If 1 site visitor fills out your newsletter signup form 2 times, using 2 different email addresses, it will record 1 unique contacts (using the last email) and 0 or 1 unique company (depending on if the email can be associated with a company). If the user signs up with the same email address on two different devices Dreamdata would record the same which is 1 unique contact and 0 or 1 unique company.

Ad Blockers

Some ad-blockers are also preventing analytics scripts such as Google Analytics and Dreamdata's from loading.

To prevent this from happening read more here.

Tracking server-side

Currently, Dreamdata does not support tracking server-side, but it’s on our roadmap.

In either case, this is how it would work if doing tracking server-side.

There is high level two situations when you talk server-side tracking. 

  1. When the user in more or less real-time submits some kind of data to your servers typically via a web browser or app. 
    1. In all cases where you would want to also identify the user client-side. This ensures that we can link the user’s cookie-id with the user’s email address.
  2. Your business has some process that means that a user can convert without being present or without using a web browser or app. Examples could load in data from an offline event.

Often this is about automation, reach out to use before you start doing anything. We are working on solutions for the most common causes of loading in data from other sources and would like to understand your problem so we can best support you and you can avoid doing more work than needed.

Sleeknote

If you are using Sleeknote to collect leads then here is how you can ensure we track the Sleeknote popups. You might want to consider changing the event name from 'formSubmitted' to what makes sense for you.

​<script>
document.addEventListener('sleekNote', function (e) {
if (e.data.type == 'submit' && window.analytics) {
window.analytics.identify(null, { email: e.data.email });
window.analytics.track('formSubmitted');
}
}, false);
​</script>

You can read more information about how Sleetentoes Event Emitter works here.

Drift

If you have Drift chat on your website and would like identify users when an email is captured as part of an campaign. Then here is an snippet you can use to ensure the user is identified within Dreamdata.

Note: The script has to be loaded after your Drift script. Example you could paste in the below script as is just after your Drift script in your header. Which will identify users automatically and throw an chat_converted event.

​<script>
drift.on("emailCapture", function(payload) {
if (payload.data && payload.data.email && window.analytics) {
window.analytics.identify(null, {
email: payload.data.email
});
window.analytics.track('chat_converted');
}
});
​</script>

You can read more about how to receiving information from Drift here.

How did we do?

Setting up tracking with Segment

Contact