Forms

HubSpot Tracking Cookie for Form Submissions

When submitting custom made forms to HubSpot, it’s essential to include tracking information using HubSpot’s hubspotutk cookie, which helps associate submissions with specific user sessions and activities on the site. The tracking setup ensures that HubSpot correctly records user data and links it to ongoing marketing insights.

Required Context for HubSpot Form Submissions

To properly capture tracking information when submitting a form to HubSpot, you need to include a context object just after the fields we’re submitting:

const context = {
    "hutk": getCookie("hubspotutk"),
    "pageUri": window.location.href,
    "pageName": window.location.href
};

Here’s a breakdown of each parameter:

• hutk: This is the HubSpot tracking cookie (hubspotutk) which uniquely identifies users. HubSpot uses this unique identifier to correlate users’ interactions across the website, allowing HubSpot to track anonymous visits and link them to contacts in your database when they convert. The hubspotutk cookie value is a number representing this unique identifier.
• pageUri: The current URL of the page where the form is being submitted.
• pageName: The name of the page (usually the URL) where the form is submitted, providing additional context. After talking to Maria we decided we’ll be always sending the url or pageUri as pageName too. Methods for Submitting Form Data

Submission

You can submit form data, including the tracking context, to HubSpot through either PHP or JavaScript. Here’s how to do it with both methods.

Method 1: JavaScript

In JavaScript, retrieve the hubspotutk cookie using a helper function and then submit the form data to HubSpot.

• Retrieve the Cookie: Use a helper function to get the hubspotutk cookie from document.cookie.

export default function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

• Create the Context Object: Populate the context object with hutk, pageUri, and pageName.

const context = {
    "hutk": getCookie("hubspotutk"),
    "pageUri": window.location.href,
    "pageName": window.location.href
};

• Submit the Form to HubSpot: Use fetch or another HTTP method to send the form data, including the context object, directly to HubSpot’s form submission endpoint.

Method 2: PHP

In PHP, retrieve the hubspotutk cookie server-side and send it along with the form data. The pageUri parameter, however, can be more accurately gathered with JavaScript since it relies on the client’s current URL. Remeber this is not a problem since we usually pass the parameters from JS to PHP.

• Retrieve the Cookie in PHP: Access the hubspotutk cookie via PHP’s $_COOKIE superglobal.

$hutk = isset($_COOKIE['hubspotutk']) ? $_COOKIE['hubspotutk'] : '';
$pageUri = filter_input(INPUT_POST, 'pageUri', FILTER_SANITIZE_STRING);
$pageName = filter_input(INPUT_POST, 'pageUri', FILTER_SANITIZE_STRING);

• Get the Page URI in JavaScript: Set the pageUri parameter using JavaScript to ensure it reflects the accurate page location at the time of submission. Example:

formData.append('pageUri', window.location.href);

• Submit the Form to HubSpot: Send the form data to HubSpot’s form endpoint with both the PHP-collected cookie and JavaScript-collected pageUri.

"context" => array(
    "hutk" => $hutk,
    "pageUri" => $pageUri,
    "pageName" => $pageName
  )

Why HubSpot Uses the hubspotutk Cookie

The hubspotutk cookie is essential for tracking and analytics in HubSpot. It’s a unique identifier that helps HubSpot build a profile of each user’s interactions with your site, tracking data such as page views, clicks, and form submissions. This numeric ID allows HubSpot to connect anonymous visits to specific user profiles when they eventually convert, giving you deeper insights into their behavior and journey on your site.

By including the hubspotutk and contextual information with your form submissions, you help HubSpot maintain a reliable record of visitor activity and build more comprehensive contact profiles. This tracking mechanism supports better lead attribution and nurtures campaigns, enhancing the effectiveness of your marketing efforts.