APIs & Integrations

hubspotash
Member

Single Page Application HS_CONTEXT Forms Identify TrackPage

Hi there,

We have a similar issue, we hope you can help with.

-We use AngularJS which is Single Page Application (SPA)

In a normal webpage system the HUBSPOT javascript plugin, reloads when each page loads
-Now in our SPA application the page never really reloads/refreshes the view.
-So we use the standard AngularJS handler which basically fires on each page load it’s called stateChangeSuccess

$rootScope.$on(’$stateChangeSuccess’, function

     _hsq.push(["identify", {
         email: currentSession.Email
     }]);

 // Track a new page using setPath:
 //var _hsq = window._hsq = window._hsq || [];
 _hsq.push(['setPath', '#!'+$location.path()]);
 
 // Track the page view for the new page
 _hsq.push(['trackPageView']);

-This works however there are a few problems:

  1. If the user lands on a page with a Form on it and submits the form the data is sent to HubSpot as we expect it to be. However, if the user navigates to another page the HubSpot code is not smart enough to rescan the HTML DOM and check if there is a Form it can submit is available. How do we force the Hubspot code to “reinitialise” essentially we want it to rescan the DOM as it would do on a normal HTML page reload. We assume it has something to do with the HS_CONTEXT but have no understanding on the method we can call to reinit. Could you give us some pointers?
    developers.hubspot.com
    How to customize the form embed code

This is a list of options that you can use if you just need to tweak a default hubspot form. If you need complete control over the styles and actions of your form, you will still want to use the Forms API.
Is there hbspt.forms.refresh() Or something equivalent?

  1. If the user logs out how do we tell HubSpot that this is an anonymous user i.e. how should we call the “identify” method to tell HubSpot we have logged out?

  2. The page track shows up in hubspot but seems to be one behind. For example
    PageA
    PageB
    PageC

In hubspot PageB shows up instead of PageA and PageC shows up instead of PageB. We have tested this by putting the full URL in the tilte and we can see that we are sending the correct data. The api is somehow pushing it only on the secondary page.

Many thanks!

This is duplicated and referenced:

Hi there, We're integrating HubSpot with our Angular-driven, single page app, using Segment. We've created custom code to pass specific paths and urls to Segment, so that we could get Page Views to work with our various integrations. This has worked flawlessly with our other integrations, but HubSpot is still ignoring a large chunk of the URL passed to it. A sample page view call is as follows: analytics.page({ path: '/campaigns', url: 'http://dev:3000/#/campaigns', name: 'campai…

And

Hi there, I have an issue that I hope someone can help with. This is the use case: Landing page 1 Using standard HubSpot form to capture email address. This is prefilled if hubspotutk exists. On submission of the form, the user is redirected to Landing page 2 Landing page 2 Contains custom HTML (small angular app) which is accepting additional data from the user. At the point the user submits data in this app, a separate call is made to the Forms API passing a couple of pieces of data, p…

0 Upvotes
9 Replies 9
dannylarsen
Member

Single Page Application HS_CONTEXT Forms Identify TrackPage

I am trying removing the cookie now. But on a refresh of the page, the same cookie is set again and it seems that it overrides the previous contact. Name and everything when the contact is identified. I have added an "id" to the indentify, but it seems to be ignored. Any help?

SOLUTION
So I found a solution by inspecting the cookies set. It seems to work if I also delete the "__hstc" cookie. So my code is:
document.cookie = 'hubspotutk=; Max-Age=-99999999;';
document.cookie = '__hstc=; Max-Age=-99999999;';

michaelhubspot
Member

Single Page Application HS_CONTEXT Forms Identify TrackPage

Hi there,

I’m fairly new to Hubspot integrations, but was debugging your issue 3 recently. It seems like $location is not updated yet in the callback to $stateChangeSuccess event, so in every callback you see the previous location. I would try using the $locationChangeSuccess event, which should ensure that $location has been updated before the callback is fired.

0 Upvotes
zwolfson
HubSpot Employee
HubSpot Employee

Single Page Application HS_CONTEXT Forms Identify TrackPage

Hey @hubspotash,

Thanks for the detailed post. Our forms embed doesn’t support SPAs right now so then you should create your own forms and send the data into our Forms API to tell us about that form submission.

For your second question, you wouldn’t use the identify method to tell HubSpot that a user logged out. That method is purely there to associate an email address to a cookie. It’s not concerned with tracking who is logged in and who is not.

For that track page view issue, do you see the tracking pixel being fired for each page view in the network console? I’m not intimately familiar with AngularJS but your code snippet looks like you pushing to _hsq at the appropriate times. Would it be possible to add some console logs and compare those to the pixel fires to see where we might be losing things?

-Zack

0 Upvotes
hubspotash
Member

Single Page Application HS_CONTEXT Forms Identify TrackPage

Dear Zack,

Thank you for coming back to us.

For your second question, you wouldn’t use the identify method to tell HubSpot that a user logged out. That method is purely there to associate an email address to a cookie. It’s not concerned with tracking who is logged in and who is not.

Sorry no, it’s not a matter of logged in or not. We tell Hubspot that email address associated with the session. We then close the browser, someone else comes along and starts using the browser. Problem is, Hubspot still then thinks all subsequent views from that browser is that email address even if we do not send the identify message. How do we tell Hubspot that the session is not related to a particular email address?

For that track page view issue, do you see the tracking pixel being fired for each page view in the network console? I’m not intimately familiar with AngularJS but your code snippet looks like you pushing to _hsq at the appropriate times. Would it be possible to add some console logs and compare those to the pixel fires to see where we might be losing things?

Hardik: Will look into this and come back to you?

Thanks!

0 Upvotes
zwolfson
HubSpot Employee
HubSpot Employee

Single Page Application HS_CONTEXT Forms Identify TrackPage

@hubspotash thanks for the additional clarification. So if I’m understanding you correctly you have multiple users on the same browser and HubSpot is seeing those two users as the same person.

If that’s the case, what you need to do is clear the hubspot cookie which is stored under hubspotutk since HubSpot uses that to determine if someone is the same person (in conjunction with their email address). Right now what’s happening is that we are seeing someone with the same cookie so we assume that they are the same person. If you clear the cookie when someone logs out, that would prevent that situation.

If I missed that use case, let me know

-Zack

0 Upvotes
hubspotash
Member

Single Page Application HS_CONTEXT Forms Identify TrackPage

Dear Zack,

Thanks for that.

What would the code be to clear the cookie? If it is a hubspot.com cookie how could we clear it? Maybe we are missing something ?

With best wishes

0 Upvotes
zwolfson
HubSpot Employee
HubSpot Employee

Single Page Application HS_CONTEXT Forms Identify TrackPage

Hey @hubspotash,

So we use first party cookies meaning that the cookie gets dropped on your domain not on hubspot.com so you would be able to clear. I’m not sure what the code would look like but based on some quick googling it might look something like this: $cookies.remove('hubspotutk')

-Zack

0 Upvotes
livetreesupport
Member

Single Page Application HS_CONTEXT Forms Identify TrackPage

Hi @zwolfson,

We can remove the cookie dropped by hubspot when the user gets logged out but we need this cookie again when the user gets logged in, right? if so, please let me know if there is any API call to reload the cookie or I need to load following script again?
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js" data-concat="false" data-remove="false" is-vendor="false" ></script>

0 Upvotes
zwolfson
HubSpot Employee
HubSpot Employee

Single Page Application HS_CONTEXT Forms Identify TrackPage

Hey @hardikpatel,

There isn’t an API to grab the cookie associated with a visitor, however, if you simply call the identify method again with the same email, all the web activity of the new cookie dropped by the HubSpot script will be associated back to the same contact record.

-Zack

0 Upvotes