Associating custom form submission data with a contact based using hs_context


#1

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, plus the URI encoded hs_context object.

The problem
The submission from Landing page 1 is absolutely fine however, the submission of data to the Forms API from Landing page 2 comes in without any association to the contact

I was under the assumption that if the hs_context is passed, the data would be used to associate the submission to the contact. Is that incorrect?


Single Page Application HS_CONTEXT Forms Identify TrackPage
Hubspot Tracking on Single Page Website
#2

Hi @timheyes

Form submissions will deduplicate by the cookie value in hutk in the hs_context field, so the second submission should count towards the same contact. You’d need to make sure that the hubspotutk cookie that you’re passing in the hutk field matches on both form pages. We set the cookie at the root domain (.domain.com as an example), so as long as the two pages are on the same root domain (they can be different subdomains) you should get the same cookie.

If the cookies match on both pages, do you have have an example of the POST data the second form would be using?


#3

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 that we have marked up with the appropriate Hubspot CSS selectors 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?

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?

Many thanks!