Manual Form Tracking

Manual tracking necessitates technical expertise and direct access to the codebase. It is important to note that manual tracking cannot be implemented through Google Tag Manager (GTM) or any analogous platforms.

While our automatic tracking covers many scenarios, manual tracking often provides more reliable results. It eliminates dependencies on other tools such as Google Tag Manager (GTM), enhancing the likelihood of successful data capture.

Manual tracking is straightforward. Depending on the event type, it typically involves adding one or two lines of code.

For customers, this approach does require more initial effort. However, with a solution like Dreamdata, the accuracy of your data is paramount. If you have access to a developer, we strongly recommend implementing manual tracking for your forms.

How to Manually Track Form Submissions

To manually track your forms, you need to integrate a couple of lines of code into your existing form submission handlers.

Here’s an example using a simple HTML form. We'll demonstrate how to use Dreamdata's track and identify functions upon a successful form submission:

<form id="download-newsletter-form">
  <input type="text" name="name" placeholder="Name" />
  <input type="email" name="email" placeholder="Email" />
  <button type="submit">Submit</button>
</form>

No matter what UI library or framework you are using, the integration process is consistent. Retrieve the email from your form and use it to call our identify method.

The tracking name should be descriptive and representative of the action being performed, such as Downloaded newsletter for a newsletter sign-up form. These names appear throughout the Dreamdata application, so they should be meaningful and clear.

document
  .getElementById('download-newsletter-form')
  .addEventListener('submit', function (event) {
    event.preventDefault()
    const formData = new FormData(event.target)
    const email = formData.get('email')

    dreamdata.track('Downloaded newsletter')
    dreamdata.identify(null, {
      email: email,
    })
  })