Pass Hubspot context information

[lenvanessen]

What are you trying to do?

We're trying to get our Hubspot to not mark all leads as direct-traffic. As explained here, this means we need to send hubspot some context trough the forms api. Currently, this is not done and some tracking is off.

https://knowledge.hubspot.com/reports/why-do-i-have-more-direct-traffic-than-expected

What's your proposed solution?

Hubspot stores a unique id for the user in a cookie named hubspotutk. This cookie should be available to Formie on POST request. If it would be possible, we could get the value from that cookie and and pass it to the forms API as "context".

I've seen the possibility of using ModifyFieldIntegrationValuesEvent, but i'm not sure where we'd store the cookies value in the meantime, as we don't want to rely an the user adding a field for it or anything of that nature.

Additional context

No response

[engram-design]

This has been brought up a few times and is tricky for Formie to deal with, without mapping values.

Cookie values won't work because integrations are run via the queue, where the cookie is no longer maintained. As such, you'll need to populate a hidden field with the cookie value to retain it for the submission, ensure that hidden field is mapped to the Tracking ID value in your HubSpot integration settings.

We do have some plans to be able to store this sort of thing against a submission automatically, but no ETA on that. For now, it'll need to be a manual process to ensure you hook up the Tracking ID yourself. Totally get that for client-created forms this isn't ideal.

[engram-design]

To follow up on this, my current recommendation is to add a hidden field to your form, map it to "Tracking ID" and use JS to populate it.

{% js %}
{# Look for any forms on the page wanting to use the HubSpot tracking and add it #}
var $trackingInputs = document.querySelectorAll('[name="fields[hubspotTracking]"]');
var hutk = document.cookie.replace(/(?:(?:^|.*;\s*)hubspotutk\s*\=\s*([^;]*).*$)|^.*$/, "$1")

for (var i = 0; i < $trackingInputs.length; i++) {
    $trackingInputs[i].value = hutk;
}
{% endjs %}

Here, that will look for a field with the name attribute fields[hubspotTracking] (so change this to match your field handle) and add that hidden value for tracking purposes.

[engram-design]

Updated in 3.0.0