HubSpot Tracking Code API Set Path String

[jasminetan]

Posting on behalf of a customer:

"I've been trying to figure out why web activity from one of our websites (e.g https://booking.123456.com) isnt syncing with HubSpot. The purpose of this is to see who views a Booking Confirmation page, to attribute a booking to HubSpot activities.

This website is a single page application so the standard HubSpot tracking cookie doesn't work correctly.

I need to implement the tracking code in this help doc (https://developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview#spa), however I don't fully understand certain elements.

The specific webpage I want to track looks like following- booking.123456.com/booking-confirmed/*.

Under "Set Page Path", I don't understand if the "path string" has to be placed only on the above URL only, or if the "path string" automatically updates per page.

Can you please help me understand what I need to do here, to be able to sync page views of this booking confirmation page?"

---

Edit to Add: What I mean by ' "path string" automatically updates per page.', is that my understanding is that the path string will not change when a new page is loaded.

This is explained here- https://developers.hubspot.com/docs/methods/tracking_code_api/set_page_path and I've attached an image of the path string I am referring to (image- 'capture').

I just want to know if someone has visited that booking confirmation page, the tracking code isn't clear for those I've spoken to internally.

Questions are;

• What does the code look like?

-- Does the path string update per URL change?

• Where does the code sit?

-- On every page, or just on the page we want to track?

These questions revolve around the difficulty in understanding how the tracking code functions with single page applications.

--

[PatrickEng]

Was this ever resolved?

I think I'm in a similar situation where my client's main site doesn't actually change URLs when you go to a new page. Instead, an id parameter is changed in the URL, which then updates the page content.

Is HubSpot not able to track these "pages" as actual pages because they all use the same URL?

Thanks for any info!

[cbarley]

Hi @Patrick_Eng, to answer the above thread and your question, for a single page application, to track particular pages you'll have to manually update the path by setting the path like this doc goes over: https://developers.hubspot.com/docs/methods/tracking_code_api/set_page_path. Here's what it would look like:

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/page-url']);
_hsq.push(['trackPageView']);

[PatrickEng]

@Connor_Barley,

Just want to make sure I understand how you're using the word "manually" here. Are you saying that for every single page they have, they need to add a those lines of JS to each page and swap out that URL path?

So if there are 300 pages that are a part of that single page application, we'd have to edit all 300 pages and swap out that URL path manually?

I'm really hoping I'm missing something here.

[cbarley]

Hi @Patrick_Eng, sorry about that confusing language there. By "manually" I just meant that you'll need to call that function for each page they have. You don't have to actually hardcode the page URLs into that function. You can grab the slug using JS, and pass that variable into the setPath function. But either way, the function will need to run for each individual page.

[PatrickEng]

@Connor_Barley,

Got it, that's what I was assuming since hardcoding it just doesn't make sense. Thanks for the help!

[PatrickEng]

Hey @Connor_Barley,

Here's what I have in terms of finishing this up:

var pathName = window.location.pathname + window.location.search;
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', pathName]);

The above code just needs to load right before the HubSpot tracking code loads and then we should be good to go, right?