Issues capturing the hubspotutk cookie in form submission with HubSpot API

[alexdeoliveira]

Hey folks! I’m having an issue with capturing the hubspotutk cookie and sending it to HubSpot via API.

I have a sign-up form in a Laravel app hosted at example.yourdomain.com, and the HubSpot tracking script is being loaded via Google Tag Manager using a custom HTML tag:

<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXXX.js"></script>

In GTM, the trigger is set to fire on pages where the hostname contains “yourdomain.com”, so it should include example.yourdomain.com.

In the form, I try to capture the hubspotutk cookie using JavaScript and set it into a hidden input before submitting.

I even added a 2-second delay on the form’s submit event to give the cookie time to load before sending the data.

Still, when the form is submitted and data is sent using the HubSpot Forms API (https://api.hsforms.com/submissions/v3/integration/secure/submit/...), most of the submissions come with a null hutk, and they show up in HubSpot as direct traffic.

I’ve logged the values before sending, double-checked GTM and script timing — everything seems to be working, except I’m not getting that cookie. I’ve seen some people mention browser tracking prevention might block the cookie, but the percentage is way too high for that to be the only reason.

Has anyone run into this before? Any tips to make sure the hubspotutk gets captured and properly sent with the API submission? Thanks a lot!

[GRajput]

Hi @alexdeoliveira 

Here are a few things that you can check, sometimes because of these the cookies are not captured -

Script Loading Order: The HubSpot tracking script cannot be accessible even with a 2-second lag if it hasn't been loaded or completely initialized before you try to capture the cookie. Make sure that no other scripts are interfering with the loading of the GTM tag and that the tag firing is dependable.

Asynchronous Loading: Because the script loads asynchronously, you may want to make sure the cookie is set before submitting the form by using a callback or event listener, if one is available.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[evaldas]

Hi @alexdeoliveira,

Just to confirm, you are using a custom coded form (not an embedded HubSpot form), correct?

You mention that you are trying to pass the cookie through a hidden variable. In your API call, are you passing the cookie value into the "fields" or the "context" object in the body? 

[alexdeoliveira]

Hi @evaldas, thanks for jumping in!


Yes, that’s correct — I’m using a *custom-coded form*, not an embedded
HubSpot form.


In the API call, the hubspotutk cookie is being passed inside the *context*
object of the request body, like this:

{
"fields": [
{ "name": "email", "value": "example@example.com" },
{ "name": "firstname", "value": "John" },
...
],
"context": {
"hutk": "cookie_value_here",
"pageUri": "https://dns.lumiun.com/register",
"pageName": "Create Account"
}
}

So the structure seems correct — the main issue is that sometimes the
hubspotutk cookie is missing on the client side before submission, even
after trying to read it with a retry loop in JavaScript.

Appreciate any ideas you might have on that!

[evaldas · Accepted solution]

Yes, the structure you have looks correct.

The question now is whether the issue is with one of the following:

- the cookie value being captured by the JavaScript code

- the cookie value being properly passed into request body

- the cookie loading in the first place.

Theoretically, the cookie should be available upon page load and you should be able to store it in a variable even before someone tries to fill out a form - so you should not really even need to delay the form submission.

I would suggest running some tests in separate incognito/private sessions to check whether the JS function is capturing it consistently/properly with a simple console log:

console.log('HubSpot Cookie:', your_cookie_variable_from_JS);