Connecting External CDP Data to Anonymous Users in Hubspot Using the Form API

Connecting customer data from various sources is crucial for creating personalized experiences and targeted campaigns. Hubspot, a popular customer relationship management (CRM) platform, offers a powerful Form API that allows you to seamlessly connect external customer data platform (CDP) data to anonymous users within Hubspot. In this article, we’ll explore how to leverage Hubspot’s Form API to achieve this integration and unlock new possibilities for your marketing efforts.

The Importance of Connecting External CDP Data

Connecting external CDP data to anonymous users in Hubspot opens up a world of opportunities for marketers. By combining the rich customer data stored in your CDP with Hubspot’s robust CRM capabilities, you can gain a more comprehensive understanding of your audience, even before they become known contacts. This integration enables you to:

1. Personalize marketing campaigns based on external data points
2. Segment and target audiences more effectively
3. Enhance lead scoring and prioritization
4. Improve customer journey mapping and analysis

Leveraging Hubspot’s Form API Hubspot’s Form API serves as the bridge between your external CDP and Hubspot. By utilizing this API, you can programmatically submit form data, including external CDP data, to Hubspot without requiring users to fill out a form. This seamless integration allows you to capture and associate valuable customer data with anonymous users, enriching your anonymous Hubspot contact records.

Here’s a complete code example that demonstrates how to submit an external unique identifier (mautic ID) to Hubspot using the Form API:

<script>
// Function to get cookie value by name
function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

// Prepare the form data
function prepareFormData() {
  var mtc_id = getCookie('mtc_id'); // Get mtc_id cookie value
  var hubspotutk = getCookie('hubspotutk'); // Get hubspotutk cookie value

  return JSON.stringify({
    "fields": [
      {
        "objectTypeId": "0-1",
        "name": "mautic_id",
        "value": mtc_id || "" // Use mtc_id as the external unique identifier value or empty string if not found
      }
    ],
    "context": {
      "hutk": hubspotutk, // Include hubspotutk for tracking
      "pageUri": window.location.href,
      "pageName": document.title
    }
  });
}

// Function to submit form data
function submitToHubSpot() {
  // Check if the form has already been submitted by looking up 'hasSubmitted' in localStorage
  if (localStorage.getItem('hasSubmitted') !== 'true') {
    var formData = prepareFormData();
    var endpointUrl = 'https://api.hsforms.com/submissions/v3/integration/submit/XXXX/YYYY'; // Replace XXXX with your Hubspot portal ID and YYYY with your form GUID

    fetch(endpointUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: formData
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
      console.log('Form submission successful', data);
      // Set 'hasSubmitted' to 'true' in localStorage to indicate submission has occurred
      localStorage.setItem('hasSubmitted', 'true');
    })
    .catch(function(error) {
      console.error('Form submission error:', error);
    });
  }
}

// Run the submission function conditionally
// Check if the form should not be submitted based on 'hasSubmitted' in localStorage
if (!window.location.href.includes('gtm') && localStorage.getItem('hasSubmitted') !== 'true') {
  submitToHubSpot();
}
</script>

In this code example:

1. The getCookie function is used to retrieve the values of the mtc_id and hubspotutk cookies.
2. The prepareFormData function constructs the form data payload to be submitted to Hubspot. It includes the mtc_id value as the external unique identifier in the mautic_id field, along with the hubspotutk value in the context object.
3. The submitToHubSpot function checks if the form has already been submitted by looking up the hasSubmitted flag in localStorage. If the form hasn’t been submitted, it proceeds with the submission.
4. The endpointUrl variable should be updated with your Hubspot portal ID (replace XXXX) and the form GUID (replace YYYY) that you want to submit the data to.
5. The form data is submitted to Hubspot using the Fetch API, with the formData as the request body.
6. If the submission is successful, a success message is logged to the console, and the hasSubmitted flag is set to 'true' in localStorage to prevent duplicate submissions.
7. If an error occurs during the submission, an error message is logged to the console.
8. The submitToHubSpot function is conditionally executed based on the URL and the hasSubmitted flag in localStorage. This ensures that the form is not submitted on certain pages (e.g., GTM pages) and prevents duplicate submissions.

Please note that you need to replace XXXX with your actual Hubspot portal ID and YYYY with the form GUID you want to submit the data to.

This code example demonstrates how to submit the mtc_id (Mautic user ID) as an external unique identifier to Hubspot, allowing you to tie CDP traffic data to users in Hubspot.

Best Practices and Considerations When implementing the integration between your external CDP and Hubspot using the Form API, keep the following best practices and considerations in mind:

1. Ensure data privacy and security by properly handling and protecting user data.
2. Implement error handling and retry mechanisms to handle potential API failures or network issues.
3. Avoid submitting duplicate form data by tracking submission status using browser storage or cookies.
4. Regularly monitor and analyze the integration’s performance and data quality to ensure accuracy and reliability.

Connecting external CDP data to anonymous users in Hubspot using the Form API opens up possibilities for data-driven marketing. By leveraging this integration, you can gain a more comprehensive understanding of your audience and personalize experiences, even before users become known contacts. Once a user submits their email and transitions from anonymous to known, you can look up all their previous anonymous activities in your CDP, which likely contains more accurate and detailed data compared to Hubspot alone.

Moreover, Hubspot offers a way to deduplicate anonymous users, ensuring that their analytics history is more complete and consolidated. This deduplication process allows you to merge the data of anonymous users who may have interacted with your website or content multiple times before becoming known, providing a more holistic view of their journey.

To send custom events from your CDP to Hubspot and take full advantage of the platform’s advanced analytics and reporting capabilities, you’ll need to subscribe to the Enterprise-level package.

By harnessing the full potential of connecting external CDP data with Hubspot and leveraging the deduplication feature, you’ll be able to deliver more personalized and effective marketing campaigns, ultimately driving business growth and customer satisfaction.