How to track Form Submissions on Typeform Forms?

Here's a guide on how to track Typeform form submissions using the Convert AB testing platform. By following these steps, you'll be able to monitor when users submit a Typeform and trigger a conversion within Convert.

Step 1: Set Up the Typeform Submit Event

Typeform provides a way to track when a form is submitted by defining a submit function. This function logs the form ID and response ID when a form is submitted. You’ll need this function in the global scope to connect it to Convert.

Here’s the code snippet for setting up Typeform with the necessary submit tracking:

In the code above, replace <form-id> with your actual Typeform ID. This will ensure the button triggers the correct Typeform form and logs form submissions as they occur.

Step 2: Trigger a Conversion in Convert

To register form submissions as conversions in Convert, we’ll programmatically trigger a test conversion when the Typeform submit event fires.

Convert’s triggerConversion method allows you to manually send a conversion event. Here's how you can set this up.

Step 3: Adding the Code to Convert

You’ll add this JavaScript code to the Global Project JS in Convert by following these steps:

1. Log in to your Convert account.
2. Navigate to Project > Configuration > Global Project JS.
3. Copy and paste the code below into this section.

Here’s the JavaScript code to be added to Convert’s Global Project JS section. It waits for the DOM to load, then defines the submit function to trigger a conversion in Convert.

Code Explanation:

1. DOM Loaded Event: Wrapping the code inside DOMContentLoaded ensures it runs after the page’s HTML has fully loaded.
2. Global submit Function: The submit function, now in the global scope, will be triggered whenever the Typeform form is submitted.
3. Conversion Trigger: The _conv_q.push(["triggerConversion", "100137247"]); line activates a conversion in Convert. Replace 100137247 with your actual goal ID from Convert.

This setup will allow you to track Typeform form submissions as conversions within Convert, making it easier to analyze and improve user interactions with your forms!

Targeting Typeform Tracking on Specific URLs

Option 1: Using a URL Condition in Code

To restrict the Typeform tracking code to specific pages, you can add a simple URL condition. This way, the code only runs on the URLs you specify. Here’s an example of how to do this.

1. URL Matching: Define the URL(s) you want to target by using window.location.href or window.location.pathname.
2. Example Code: Modify the Typeform submit tracking code by wrapping it in an if-statement that checks for a matching URL.

Here’s how to structure the code to target specific pages:

In this example:

• Replace https://example.com/specific-page and https://example.com/another-page with the URLs where you want the tracking code to run.
• The tracking code will now only be active on the specified pages.

Option 2: Using Convert Deploy Experience Location Targeting

Alternatively, you can add the tracking code to a specific Deploy Experience in Convert, where you can use Location targeting to specify the pages where the code should run.

1. Add Code to the Deploy Experience: Instead of placing the code in Global Project JS, add it to the Variation JS section of the desired Deploy Experience.

2. Set Up Location Targeting:

   • In your Convert app, go to Experiences and select or create the Deploy Experience where you want to add the tracking code.
   • Go to Targeting > Location and set rules to match the pages where the form is present.
   • You can target specific URLs, use path-based targeting (e.g., contains /specific-page), or set up advanced conditions.

3. Code Example for the Variation JS Section: Simply paste the code below in the Variation JS of the Deploy Experience:

   javascript

   Copy code

   // Define the Typeform submit function in the global scope
window.submit = function({ formId, responseId }) {
console.log(`Form ${formId} submitted, response id: ${responseId}`);

// Trigger conversion in Convert
window._conv_q = window._conv_q || [];
_conv_q.push(["triggerConversion", "100137247"]);
};


By adding the tracking code to the Variation JS section and targeting the appropriate pages in the Experience settings, you have control over where the tracking is applied without needing to edit Global Project JS directly.

Summary

• URL Condition in Code: This option checks URLs in the code, allowing the tracking code to run only on specific pages.
• Convert Deploy Experience: Add the code to the Variation JS section and use Location targeting for page-specific control within the Convert platform.

These methods provide flexibility in choosing the right approach based on your needs.