Form Tracking: Manual set-up (Recommended)
Updated
by
Anton Lauritsen
Form Tracking
Click here to see an overview of our form tracking. For instance, if you are using modern JavaScript frameworks, or external tools for rendering and handling your forms.
Effective form tracking is crucial for leveraging Dreamdata's capabilities. While Dreamdata offers various tracking methods, setting up manual tracking for your forms is recommended for better control and customisation.
Prerequisites
- A developer with the access to your codebase and forms.
- Ensure web tracking is set up by installing the Dreamdata analytics script. Refer to our Web Tracking Documentation for guidance.
- Basic understanding of JavaScript and form handling in web development.
Implement Tracking in Form Handlers
In your form handler function, integrate the analytics.identify and analytics.track methods. Here's a basic JavaScript example:
// Example of a form submission handler
function formSubmissionHandler(event) {
event.preventDefault(); // Prevent default form submission behavior
// Extract user email from the form input
var userEmail = document.getElementById('emailInput').value;
// Identify the user with their email
analytics.identify(null, {
email: userEmail
});
// Track the form submission event
analytics.track('Form Submission - [Your Form Name]');
}
- Replace
[Your Form Name]with the actual name of your form. Make sure the email input field's selector matches with the one in your form. - Replace
emailInputwith the actual selector of the email input field in your form - Ensure that the form name in
analytics.trackis meaningful and consistent for easier tracking across Dreamdata products. For example, if you are tracking a signup form, you could name ituser-signed-up. As mentioned earlier, these names will appear across Dreamdata products, so it's important that they are meaningful for easy identification.
