How to Integrate Convert.com Experiences with HubSpot Forms

IN THIS ARTICLE YOU WILL:

• Know the Prerequisites for the Integration
  
• Learn the Implementation Steps
• Best Practices
• Troubleshooting Steps

This guide will show you how to append Convert.com experience data to HubSpot forms as hidden fields, allowing you to track which experiences and variations your form submissions were exposed to.

Prerequisites

• Active Convert.com account with experiences running
• HubSpot account with forms set up
• Access to modify your website's JavaScript

Implementation Steps

1. Create Hidden Fields in HubSpot Form

First, create two hidden fields in your HubSpot form:

• convert_experience_names
• convert_variation_names

2. Add the Integration Code

Add the following JavaScript code to your website where the HubSpot form is present or add it to the variation JS section of an independent Deploy experience targeted to the form page

_conv_q = _conv_q || [];
_conv_q.push([function() {
    // Wait for HubSpot form to load
    window.addEventListener('message', function(event) {
        if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
            // Get current experience data
            if (convert && convert.currentData && convert.currentData.experiences) {
                const experiences = convert.currentData.experiences;
                const experienceNames = [];
                const variationNames = [];
                // Loop through active experiences
                Object.keys(experiences).forEach(function(experienceId) {
                    const experience = experiences[experienceId];
                    if (experience.variation) {
                        experienceNames.push(experienceId);
                        variationNames.push(experience.variation.name);
                    }
                });
                // Find hidden fields in HubSpot form
                const form = document.querySelector('form.hs-form');
                const experienceNamesField = form.querySelector('input[name="convert_experience_names"]');
                const variationNamesField = form.querySelector('input[name="convert_variation_names"]');
                if (experienceNamesField && variationNamesField) {
                    // Set experience data to hidden fields with comma separation
                    experienceNamesField.value = experienceNames.join(',');
                    variationNamesField.value = variationNames.join(',');
                }
            }
        }
    });
}]);

3. How It Works

1. The code uses Convert.com's queue system (_conv_q) to ensure all experience data is loaded before execution.
2. It listens for HubSpot's form ready event to ensure the form is fully loaded.
3. When triggered, it:
   • Accesses theconvert.currentData.experiencesobject to get active experiences
   • Creates arrays to store multiple experience IDs and variation names
   • Finds the hidden fields in your HubSpot form
   • Sets the comma-separated values to the hidden fields

4. Accessing Experience Data

The code uses Convert.com's updated JavaScript object structure:

convert.currentData.experiences[experienceId] = {
    firstTime: true,
    variation: {
        id: "1000244142",
        name: "Original Page",
        key: "1000244142-original-page",
        status: "running",
        changes: [
            {
                name: "Original Page"
            }
        ]
    }
}

5. Testing the Integration

To verify the integration:

1. Open your website with both Convert.com experiences and HubSpot form
2. Open browser developer tools
3. Submit the form
4. Check HubSpot submission data to confirm multiple experiences and variations are being captured as comma-separated values

Best Practices

• Add error handling for cases when Convert.com data isn't available
• Consider adding timestamp data to track when the experiences were active
• Validate that all experience IDs and variation names are properly formatted before joining

Troubleshooting

If experience data isn't appearing in form submissions:

• Verify Convert.com experiences are running
• Check browser console for JavaScript errors
• Confirm hidden fields are properly created in HubSpot
• Ensure form names match in your integration code
• Verify the comma-separated values are being properly formatted