# 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.

<pre class="language-html"><code class="lang-html"><strong>&#x3C;script type="text/javascript" src="https://app.spara.co/embed-&#x3C;app_id>.js">&#x3C;/script>
</strong>&#x3C;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 &#x26;&#x26; email) {
        window._hsq.push(["identify", { email }]);
        window._hsq.push(["trackPageView"]);
      }
    },
  }
&#x3C;/script>
</code></pre>

**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';

<body>
  <HubSpotPageView />
  {children}
</body>
```


---

# Agent Instructions: 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:

```
GET https://docs.spara.com/guides/integration-guides/setting-up-hubspotutk-cookie-tracking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
