Tracking Typeform Submissions

Tracking Typeform submissions 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.

If you want to track Typeform submissions and associate them with user data in Dreamdata (e.g., for tracking form completions), you can integrate our tracking with Typeform’s embedded forms.

In this guide, we’ll show you how to automatically track conversions when users submit Typeform forms, identify users using their email address, and register the conversion event in Dreamdata.

Steps for Integrating Typeform Submissions with Dreamdata

To track Typeform submissions with Dreamdata and capture user information such as their email, we need to:

1. Embed the Typeform form in your website.
2. Capture the form submission using Typeform’s Embed SDK.
3. Fetch the user’s email via Typeform’s API.
4. Send the data to Dreamdata for user identification and event tracking.

Step-by-Step Guide

1. Embed the Typeform Form in Your Website

First, embed the Typeform form into your website using the Typeform Embed SDK. Here’s an example:

<script src="https://embed.typeform.com/embed.js"></script>
<script>
  var typeformPopup = new window.TypeformEmbed.Popup('<your-form-id>', {
    hideHeaders: true,
    hideFooters: true,
  })

  typeformPopup.open()
</script>

Replace <your-form-id> with your actual Typeform form ID.

2. Capture the Form Submission and Fetch User Email

Next, when a user submits the form, you can capture the submission and fetch the user’s email dynamically using Typeform’s API.

You’ll need a backend server that can query Typeform’s API to retrieve the submission details (such as the email). The responseId passed in the onSubmit callback will be used to fetch the response data.

Here’s how to set up the server:

Server (Node.js/Express)

const express = require('express')
const axios = require('axios')

const app = express()
const PORT = process.env.PORT || 3000
const TYPEFORM_API_KEY = 'your_typeform_api_key'
const TYPEFORM_FORM_ID = 'your_form_id'

// Endpoint to fetch submission data by responseId
app.get('/fetch-response/:responseId', async (req, res) => {
  const { responseId } = req.params

  try {
    const response = await axios.get(
      `https://api.typeform.com/forms/${TYPEFORM_FORM_ID}/responses/${responseId}`,
      {
        headers: {
          Authorization: `Bearer ${TYPEFORM_API_KEY}`,
        },
      }
    )

    const submission = response.data.items[0]
    const emailField = submission.answers.find(
      (answer) => answer.field.type === 'email'
    )
    const email = emailField ? emailField.email : null

    res.json({ email })
  } catch (error) {
    console.error('Error fetching Typeform response:', error)
    res.status(500).send('Error fetching response')
  }
})

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`)
})

This server will fetch the email address based on the responseId from Typeform.

3. Handle the Submission and Track in Dreamdata

In the front-end, when the user submits the form, we’ll use the responseId to request the email from our server and send the data to Dreamdata.

import { createPopup } from '@typeform/embed'
import '@typeform/embed/build/css/popup.css'

createPopup('<your-form-id>', {
  onSubmit: async ({ formId, responseId }) => {
    try {
      // Fetch email using the responseId from your server
      const res = await fetch(
        `http://localhost:3000/fetch-response/${responseId}`
      )
      const data = await res.json()
      const email = data.email

      if (email) {
        // Track the form submission in Dreamdata
        dreamdata.track('Requested Demo')

        // Identify the respondent in Dreamdata
        dreamdata.identify(null, { email })
      } else {
        console.error('Email not found in submission response')
      }
    } catch (error) {
      console.error('Error tracking form submission:', error)
    }
  },
})

Here, after the form is submitted, the responseId is passed to the server, which fetches the email from Typeform’s API. Once we have the email, we use Dreamdata's track and identify methods to register the conversion and identify the user.