> ## Documentation Index
> Fetch the complete documentation index at: https://dub.co/llms.txt
> Use this file to discover all available pages before exploring further.

# HubSpot

> Learn how to track lead conversion events with HubSpot and Dub

<Tip>
  This feature is only available on [Advanced plans and
  above](https://dub.co/pricing).
</Tip>

Dub's [HubSpot integration](https://dub.co/integrations/hubspot) allows you to track conversion events directly from HubSpot.

This is useful for B2B SaaS companies that use HubSpot as their CRM and want to track meeting bookings and deal creation/closed-won events as lead and sale conversion events on Dub.

## Prerequisites

First, you'll need to enable conversion tracking for your Dub links to be able to start tracking conversions:

<Tip>
  If you're using [Dub Partners](https://dub.co/partners), you can skip this
  step since partner links will have conversion tracking enabled by default.
</Tip>

<AccordionGroup>
  <Accordion title="Option 1: On a workspace-level">
    To enable conversion tracking for all future links in a workspace, you can do the following:
    To enable conversion tracking for all future links in a workspace, you can do the following:

    1. Navigate to your [workspace's Tracking settings page](https://app.dub.co/settings/tracking).
    2. Toggle the **Workspace-level Conversion Tracking** switch to enable conversion tracking for the workspace.

    <Frame>
      <img src="https://mintcdn.com/dub/7gz73MV2fRr5fJas/images/conversions/enable-conversion-tracking-workspace.png?fit=max&auto=format&n=7gz73MV2fRr5fJas&q=85&s=f810945d33a42f45de3e06647b2cfd15" alt="Enabling conversion tracking for a workspace" width="3082" height="1529" data-path="images/conversions/enable-conversion-tracking-workspace.png" />
    </Frame>

    This option will enable conversion tracking in the [Dub Link Builder](/help/article/dub-link-builder) for all future links.
  </Accordion>

  <Accordion title="Option 2: On a link-level">
    If you don't want to enable conversion tracking for all your links in a workspace, you can also opt to enable it on a link-level.

    To enable conversion tracking for a specific link, open the [Dub Link Builder](/help/article/dub-link-builder) for a link and toggle the **Conversion Tracking** switch.

    <Frame>
      <img src="https://mintcdn.com/dub/F9cdc9nB_SI4yl65/images/conversions/enable-conversion-tracking.png?fit=max&auto=format&n=F9cdc9nB_SI4yl65&q=85&s=4153d4a981e2a13324464ca3d30625cd" alt="Enabling conversion tracking for a link" width="2345" height="908" data-path="images/conversions/enable-conversion-tracking.png" />
    </Frame>

    <Tip>
      You can also use the `C` keyboard shortcut when inside the link builder to
      quickly enable conversion tracking for a given link.
    </Tip>
  </Accordion>

  <Accordion title="Option 3: Via the API">
    Alternatively, you can also enable conversion tracking programmatically via the [Dub API](/docs/api-reference/introduction). All you need to do is pass `trackConversion: true` when creating or updating a link:

    <CodeGroup>
      ```javascript Node.js theme={null}
      const link = await dub.links.create({
        url: "https://dub.co",
        trackConversion: true,
      });
      ```

      ```python Python theme={null}
      link = d.links.create(url="https://dub.co", track_conversion=True)
      ```

      ```go Go theme={null}
      link, err := d.Links.Create(ctx, &dub.CreateLinkRequest{
          URL: "https://dub.co",
          TrackConversion: true,
      })
      ```

      ```ruby Ruby theme={null}
      s.links.create_many(
        ::OpenApiSDK::Operations::CreateLinkRequest.new(
          url: "https://dub.co",
          track_conversion: true,
        )
      )
      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>

Then, you'd want to install the Dub Analytics script to your website to track conversion events.

You can install the Dub Analytics script in several different ways:

<CardGroup>
  <Card title="React" icon="react" href="/docs/sdks/client-side/installation-guides/react" horizontal />

  <Card title="Manual installation" icon="browser" href="/docs/sdks/client-side/installation-guides/manual" horizontal />

  <Card
    title="Framer"
    icon={
  <svg
    width="74"
    height="111"
    viewBox="0 0 74 111"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-7 h-7"
  >
    <path d="M0 0H73.8374V36.9892H36.9187L0 0Z" fill="#155dfc" />
    <path d="M0 36.989H36.9187L73.8374 73.9796H0V36.989Z" fill="#155dfc" />
    <path d="M0 73.9797H36.9187V110.97L0 73.9797Z" fill="#155dfc" />
  </svg>
}
    href="/docs/sdks/client-side/installation-guides/framer"
    horizontal
  />

  <Card title="Shopify" icon="shopify" href="/docs/sdks/client-side/installation-guides/shopify" horizontal />

  <Card title="WordPress" icon="wordpress" href="/docs/sdks/client-side/installation-guides/wordpress" horizontal />

  <Card title="Webflow" icon="webflow" href="/docs/sdks/client-side/installation-guides/webflow" horizontal />

  <Card title="Google Tag Manager" icon="google" href="/docs/sdks/client-side/installation-guides/google-tag-manager" horizontal />
</CardGroup>

<Check>
  You can **verify the installation** with the following tests:

  1. Open the browser console and type in `_dubAnalytics` – if the script is installed correctly, you should see the `_dubAnalytics` object in the console.
  2. Add the `?dub_id=test` query parameter to your website URL and make sure that the `dub_id` cookie is being set in your browser.

  If both of these checks pass, the script is installed correctly. Otherwise, please make sure:

  * The analytics script was added to the `<head>` section of the page
  * If you're using a content delivery network (CDN), make sure to purge any cached content
</Check>

Finally, install the [HubSpot Dub Integration](https://app.dub.co/integrations/hubspot) to your workspace.

<Frame>
  <img src="https://mintcdn.com/dub/4atD6Qmc1QmxgkWq/images/conversions/hubspot/installed-hubspot-integration.png?fit=max&auto=format&n=4atD6Qmc1QmxgkWq&q=85&s=2cbc22a672f1eaecb50d83439f84b722" alt="HubSpot Dub Integration" width="1026" height="659" data-path="images/conversions/hubspot/installed-hubspot-integration.png" />
</Frame>

### Integration Setup

During the installation, Dub will create 3 properties to your contact object on HubSpot:

* **Dub Id** - Unique identifier that Dub uses to track clicks
* **Dub Link** - The short link that the contact clicked to reach your site
* **Dub Partner Email** - Email address of the partner associated with the short link

<Frame>
  <img src="https://mintcdn.com/dub/FXRjcdT3tyFnZPLN/images/conversions/hubspot/hubspot-dub-properties.png?fit=max&auto=format&n=FXRjcdT3tyFnZPLN&q=85&s=1aea7bc62a2bb2fdf275c64957449422" alt="HubSpot Contact Properties Created by Dub Integration" width="2516" height="1008" data-path="images/conversions/hubspot/hubspot-dub-properties.png" />
</Frame>

<Tip>
  If you can't see these properties in your HubSpot contact object after
  installation, something might've gone wrong with the integration setup. Please
  [contact us](https://dub.co/contact/support) for assistance.
</Tip>

### Set Your Closed Won Deal Stage ID

You can define which HubSpot deal stage should be treated as **Closed Won** for automatic sales tracking in Dub.

If you've customized your pipeline (i.e. changed or added deal stages in HubSpot), enter the stage ID corresponding to your custom **Closed Won** stage in the [HubSpot Integration Settings](https://app.dub.co/settings/integrations/hubspot).

Once set, any HubSpot deal marked as **Closed Won** will automatically be tracked in Dub as a sale conversion event, including its deal value.

<Frame>
  <img src="https://mintcdn.com/dub/FXRjcdT3tyFnZPLN/images/conversions/hubspot/hubspot-custom-deal-stage-id.png?fit=max&auto=format&n=FXRjcdT3tyFnZPLN&q=85&s=4d4b14da0cc8552a28dc1b230df9d41f" alt="Add custom deal stage ID to HubSpot Integration Settings" width="1356" height="522" data-path="images/conversions/hubspot/hubspot-custom-deal-stage-id.png" />
</Frame>

## Option 1: Using HubSpot Forms

[HubSpot Forms](https://www.hubspot.com/products/marketing/forms) help you capture lead information and track conversions. By integrating with Dub, you can attribute each form submission back to the specific Dub link that drove the conversion.

To make attribution work, you need to capture the `dub_id` cookie in your HubSpot form. This ensures each lead is tied back to the exact Dub link they came from.

Here's how you can set it up:

<Steps>
  <Step title="Add a hidden field to your form">
    In the HubSpot form builder, add a hidden field and map it to the **Dub Id** contact property.

    This makes sure the value captured by your script is stored on the contact record. Without mapping to a property, HubSpot won’t persist the `dub_id` value.

    <Frame>
      <img src="https://mintcdn.com/dub/4atD6Qmc1QmxgkWq/images/conversions/hubspot/hubspot-forms-setup.png?fit=max&auto=format&n=4atD6Qmc1QmxgkWq&q=85&s=a8a09cc8a620d07eb4c3ff22ce80a33f" alt="Segment Dub (Actions) Mapping" width="1440" height="1024" data-path="images/conversions/hubspot/hubspot-forms-setup.png" />
    </Frame>
  </Step>

  <Step title="Add the script to your site">
    Finally, add the following snippet to your site. The script reads the `dub_id` cookie and, if found, automatically fills the hidden Dub Id form field with its value.

    <CodeGroup>
      ```html HTML expandable theme={null}
      <script src="https://js.hsforms.net/forms/embed/47839131.js" defer></script>

      <div
        class="hs-form-frame"
        data-region="na1"
        data-form-id="YOUR_FORM_ID"
        data-portal-id="YOUR_PORTAL_ID"
      ></div>

      <script>
        // A helper function to get the value of a cookie
        function getCookie(name) {
          const value = `; ${document.cookie}`;
          const parts = value.split(`; ${name}=`);

          if (parts.length === 2) {
            return parts.pop().split(";").shift();
          }

          return null;
        }

        // Listen for the form ready event
        window.addEventListener("hs-form-event:on-ready", (event) => {
          const clickId = getCookie("dub_id");

          if (!clickId) {
            console.debug("clickId not found. Skipping lead tracking.");
            return;
          }

          // Populate the hidden field with the dub_id
          HubSpotFormsV4.getForms()[0].setFieldValue("0-1/dub_id", clickId);
        });
      </script>
      ```
    </CodeGroup>

    When a prospect submits the form, the `dub_id` is captured and passed to HubSpot, ensuring the lead is attributed back to the original Dub link.
  </Step>
</Steps>

## Option 2: Using HubSpot Meeting Scheduler

[HubSpot's Meeting Scheduler](https://www.hubspot.com/products/sales/schedule-meeting) lets prospects book time directly with you or your team.

Since HubSpot doesn't let you add a hidden field to the scheduling form, you should handle initial lead tracking through [deferred lead tracking](/docs/conversions/leads/deferred) on the client side.

<Steps>
  <Step title="Generate your publishable key">
    Before you can track conversions on the client-side, you need to generate a publishable key from your Dub workspace.

    To do that, navigate to your [workspace's Tracking settings page](https://app.dub.co/settings/tracking) and generate a new publishable key under the **Publishable Key** section.

    <Frame>
      <img src="https://mintcdn.com/dub/7gz73MV2fRr5fJas/images/conversions/publishable-key.png?fit=max&auto=format&n=7gz73MV2fRr5fJas&q=85&s=76add1f30a997ba897f10acdc21b51b5" alt="Enabling conversion tracking for a workspace" width="2985" height="2021" data-path="images/conversions/publishable-key.png" />
    </Frame>
  </Step>

  <Step title="Allowlist your site's domain">
    Then, you'll need to allowlist your site's domain to allow the client-side conversion events to be ingested by Dub.

    To do that, navigate to your [workspace's Tracking settings page](https://app.dub.co/settings/tracking) and add your site's domain to the **Allowed Hostnames** list.

    This provides an additional layer of security by ensuring only authorized domains can track conversions using your publishable key.

    <Frame>
      <img src="https://mintcdn.com/dub/7gz73MV2fRr5fJas/images/conversions/allowed-hostnames.png?fit=max&auto=format&n=7gz73MV2fRr5fJas&q=85&s=da26eba128e89211e7bfd7cf46ba32e0" alt="Enabling conversion tracking for a workspace" width="2979" height="2018" data-path="images/conversions/allowed-hostnames.png" />
    </Frame>

    You can group your hostnames when adding them to the allow list:

    * `example.com`: Tracks traffic **only** from `example.com`.
    * `*.example.com`: Tracks traffic from **all subdomains** of `example.com`, but **not** from `example.com` itself.

    <Tip>
      When testing things out locally, you can add `localhost` to the **Allowed
      Hostnames** list temporarily. This will allow local events to be ingested by
      Dub. Don't forget to remove it once you're ready to go live!
    </Tip>
  </Step>

  <Step title="Add the tracking code to your site">
    Use the following code to track lead conversions when meetings are booked through the HubSpot scheduler.

    The script listens for booking events from HubSpot, extracts the customer's details (name and email), and then calls `dubAnalytics.trackLead()` with [deferred lead tracking](/docs/conversions/leads/deferred).

    This way, the lead is only tracked after the meeting is confirmed, ensuring accurate attribution.

    <CodeGroup>
      ```html HTML expandable theme={null}

      <!-- Load Dub analytics script -->
      <script>
        !(function(w, n) {
          w[n] = w[n] || function() { (w[n].q = w[n].q || []).push(arguments); };
          ["trackClick","trackLead","trackSale"].forEach(t => w[n][t] = (...a) => w[n](t, ...a));
          var s = document.createElement("script");
          s.defer = true;
          s.src = "https://www.dubcdn.com/analytics/script.conversion-tracking.js";
          s.setAttribute("data-publishable-key", "YOUR_PUBLISHABLE_KEY");
          s.setAttribute("data-domains", '{"refer":"YOUR_SHORT_DOMAIN"}');
          document.head.appendChild(s);
        })(window, "dubAnalytics");
      </script>

      <div
        class="meetings-iframe-container"
        data-src="https://meetings.hubspot.com/YOUR_USERNAME?embed=true"
      ></div>

      <script
        type="text/javascript"
        src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"
      ></script>

      <script>
        // Listen for the message event
        window.addEventListener("message", function (event) {
          // Check if the message is from the scheduling widget
          if (event.origin === "https://meetings.hubspot.com") {
            // Get the data from the event
            const data = event.data;

            if (data.meetingBookSucceeded) {
              // Get the scheduled contact
              const contact =
                data.meetingsPayload.bookingResponse.postResponse.contact;

              if (!contact) {
                console.debug("contact not found. Skipping lead tracking.");
                return;
              }

              // Track the lead with the scheduled contact
              const customerName = [contact.firstName, contact.lastName]
                .filter(Boolean)
                .join(" ");

              dubAnalytics.trackLead({
                mode: "deferred",
                eventName: "Meeting scheduled",
                customerExternalId: contact.email,
                customerName: customerName,
                customerEmail: contact.email,
              });
            }
          }
        });
      </script>
      ```
    </CodeGroup>
  </Step>
</Steps>

## Tracking conversion events

After a prospect attends your demo call, you'll typically create a deal in HubSpot to track the sales opportunity.

Dub's HubSpot integration automatically sets up webhooks to track both deal creation and deal closure events, providing complete visibility into your sales funnel.

### When a deal is created (lead event)

When you create a deal in HubSpot for a contact who came through your Dub links, the integration automatically tracks this as a [lead event](/docs/quickstart/server#tracking-lead-events) in Dub.

### When a deal is closed (sale event)

When a deal moves to a **Closed Won** status in HubSpot, the integration automatically [tracks a sale event](/docs/quickstart/server#tracking-sale-events) in Dub using the deal amount as the sale value.

If a deal is not being tracked as a sale in Dub, make sure you've set the correct Closed Won Deal Stage ID in your [HubSpot Integration Settings](#set-your-closed-won-deal-stage-id).

## Example apps

<CardGroup cols={2}>
  <Card title="Dub + HubSpot Demo App" icon="github" href="https://github.com/dubinc/examples/tree/main/conversions/hubspot" color="#333333">
    See the full example on GitHub.
  </Card>
</CardGroup>
