> For the complete documentation index, see [llms.txt](https://docs.spara.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.spara.com/guides/integration-guides/setting-up-hubspotutk-cookie-tracking.md).
# Setting Up HubSpotUTK Cookie Tracking
The `hubspotutk` cookie is set by HubSpot's tracking script and stores a unique visitor token used for contact attribution. By calling HubSpot's `identify` method from Spara's JavaScript API `onUserMessageSent()` event, you can associate a visitor's session with their HubSpot contact record.
### Prerequisites
* The **HubSpot tracking script** is installed on your site. [Hubspot's guide to install the tracking code.](https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code)
* The [**Spara embed script**](/guides/installation-guides/readme/installing-spara-navigator.md) is installed on your site.
### Add the identify call
Use Spara's `onUserMessageSent()` event (see [Javascript API](https://docs.spara.com/developers/spara-api/javascript-api)) to extract the visitor's email. Then, call `identify` to merge the visitor to the hubspot cookie data and `trackPageView` to push the identity to HubSpot.
<script type="text/javascript" src="https://app.spara.co/embed-<app_id>.js"></script>
<script>
Spara = {
onUserMessageSent: function (text) {
// extract email from user message
function extractEmail(text) {
const match = text.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/);
return match ? match[0] : null;
}
const email = extractEmail(text);
if (window._hsq && email) {
window._hsq.push(["identify", { email }]);
window._hsq.push(["trackPageView"]);
}
},
}
</script>
**Note:** `identify` sets the identity in HubSpot's tracker memory only. A separate `trackPageView` or `trackEvent` call is required to actually send the data to HubSpot.
### Single-page application (SPA) setup
If your site uses Next.js or React, page navigations don't trigger full reloads, so HubSpot won't automatically track route changes or send identity data.
1. Follow the identify call instructions above.
2. Create a `HubSpotPageView.tsx` component to call `trackPageView` on every route change:
```tsx
'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
export default function HubSpotPageView() {
const pathname = usePathname();
useEffect(() => {
if (window._hsq) {
window._hsq.push(["trackPageView"]);
}
}, [pathname]);
return null;
}
```
3. Add it to your root layout (`app/layout.tsx`):
```tsx
import HubSpotPageView from './HubSpotPageView';
{children}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.spara.com/guides/integration-guides/setting-up-hubspotutk-cookie-tracking.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.