1. Help
  2. Advanced
  3. Integrations
  4. Set up source tracking for HubSpot

Set up source tracking for HubSpot

You can collect tracking information to find out where your HubSpot contacts are coming from  by following the instructions in this article.

This article shows you how to track information like First page seen, Last Page seen, Last referring site, Original source and Original source drill-down 1 and Original source drill-down 2 in HubSpot to show where your submissions are coming from, for example, from social media or direct traffic. 

You can configure source tracking for Typeform's HubSpot integration in two ways:

- Segment your audience by source on your HubSpot dashboard

- Track the source of embedded typeforms (for advanced users)

To start tracking the source of your typeforms, you must first enable source tracking. You can do this by simply toggling the source tracking switch when connecting your typeform to HubSpot:

HubSpot_source_tracking_toggle.png

 

HC_BobRoss_ilu_cropped.png
Tips! To track embedded typeforms, you’ll need access to your website source files. Skip to track typeform embeds (advanced).

Segment your audience by source on your HubSpot dashboard

Want to track the source of your leads? Once you set up the integration and enable source tracking, you’ll be able to do that in your HubSpot account.

By default HubSpot adds a tracking cookie to your typeform. So if you share your typeform on social media, that will be recorded in HubSpot.

1. Toggle the Enable source tracking switch when setting up the integration.

HubSpot_source_tracking_toggle.png

2. Open your HubSpot account, and click on Contacts.

3. Click Table actions, and Edit columns:

HubSpot_19.png

4. From this menu, make sure you add Original source and Original source drill-down 1.

HubSpot_21.png

5. Now you can see the source type in Original source, and the specific source in Original source drill-down 1:

HubSpot_22.png

In this case my latest contact came from Social Media, specifically Twitter.

If you're backfilling responses, you won't be able to segment those contacts by a specific source. All such contacts will be shown as created from Direct Traffic from Unknown URL:

HubSpot_SourceUnknown.png

Read on to learn about a more advanced method to track the source of your embedded typeforms.

Track the source of embedded typeforms (for advanced users)

Tracking the source of typeforms that are embedded onto websites requires using the Typeform Embed SDK—for this it's best to have some web development experience. You can also partner up with an agency to find a certified Typeform expert.

To start tracking embedded typeforms:

1. When connecting your typeform to HubSpot, toggle the Enable source tracking switch.

HubSpot_source_tracking_toggle.png

2. Add the following code to track the source of a typeform embedded on a website like Squarespace or WordPress:

2.1. On your website, add your HubSpot tracking code by following the instructions here.

image5.png

2.2. Add the Typeform Embed SDK snippet into the header by adding the following to the <head> section of your HTML page under the HubSpot tracking code:

<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />

<script src="//embed.typeform.com/next/embed.js"></script>

2.3. Add a placeholder <div> element for your typeform UID to the body section of your HTML page by copying and pasting this snippet to where you want the form to appear on the page:

<div id="form"></div>

2.4. Add the following script to your page, and make sure to replace yourFormId with the UID of your typeform. Below is an example of a typeform UID:

image6.png

<script>

const initForm = (hubspotCookieValue) => {

const yourFormId = 'VNOIUOSYOCFfPLuE' // replace with your FormId

window.tf.createWidget(yourFormId, {

container: document.querySelector('#form'),

hidden: {

hubspot_utk: hubspotCookieValue,

hubspot_page_name: document.title,

hubspot_page_url: window.location.href,

}

})

}

const getCookieValue = (name) => (

document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || null

)

const intervalId = setInterval(() => {

const hubspotCookieValue = getCookieValue("hubspotutk")

if (hubspotCookieValue !== null){

initForm(hubspotCookieValue)

clearInterval(intervalId)

}

}, 1000);

</script>

image2.png

HC_BobRoss_ilu_cropped.png
Tips! You can also change the way the typeform is displayed by changing which API is used and what parameters are passed. You can find the documentation here.

You’re now ready to start collecting tracking information about your embedded typeform! You can view your web analytics data under contact properties in HubSpot:

image3.gif

When you go to your typeform, you'll see the following Hidden Fields automatically created for you: 

image4.png

HC_Note_ilu_cropped.png
Note! Make sure not to delete these Hidden Fields because if you remove them, you'll no longer be able to track the source of your embedded typeforms.
HC_BobRoss_ilu_cropped.png
Tips! If you want to personalize your typeform with HubSpot, you can find out how to do it here.

 

Tap into our community knowledge

Find Answers
Contact Support