APIs & Integrations

ELingris
Member

Hubspot cookie banner implementation on SPA (single page application) website

We have activated the cookie banner from the account settings.

 

It correctly loads on the first visit on our external SPA website.

 

If the user does not interact with it (i.e. click 'Accept' or 'Reject'), and just clicks on any link within the page, then, after being redirected to the new page, the cookie popup does not show up again.

 

We have not found a way to re-initialize the cookie.

 

By using the _hsp.push(['showBanner']); on every spa page load, the cookie settings banner shows up, which is not what we need.

 

Anyone else had this problem with a SPA and the cookie banner?

4 Replies 4
ELingris
Member

Hubspot cookie banner implementation on SPA (single page application) website

0 Upvotes
ELingris
Member

Hubspot cookie banner implementation on SPA (single page application) website

Hello @miljkovicmisa  and thank you for your response!

 

We have implemented the 'setPath' and 'trackPageView' functionalities.

We have also added a console.log right after it, which logs the same path that we push to the setPath function.

 

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', window.location.pathname]);
_hsq.push(['setContentType', hubspotType]);
_hsq.push(['trackPageView']);

console.log(hubspotPath, hubspotType , window.location.pathname);

 

When going from one page to the next, we can see the correct values in the browser console, but still, the cookie popup does not follow us.

 

You can see it for yourself here:

https://iyc.randi.radicalel.com/

 

We do not have a typical SPA website. Our tech stack is Stimulus + Turbolinks.

 

Do you have any other suggestions?

 

Thank you!

0 Upvotes
miljkovicmisa
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Hubspot cookie banner implementation on SPA (single page application) website

👋@ELingris !
SPA's with hubspot are a bit of a challenge you are not alone, but that doesn't mean they are impossible.

First of all you should make sure you are tracking subsequent page views, because you have a single page app, that means that the hubspot tracking code is executed only once, to overcome this, you need to prepare for the change of a page with some javascript.
This link contains some info about that.
So basically you want to push some data into the script to make sure all pages are tracked by the code, like this:

// Set the path to '/' and track the page
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/']);
_hsq.push(['trackPageView']);
// This will result in a view being recorded for
// http://www.mydomain.com/

// Set the path to '/contact-us' and track the page
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/contact-us']);
_hsq.push(['trackPageView']);
// This will result in a view being recorded for
// http://www.mydomain.com/contact-us


More info here in this link also.
With that in place your page will be loading the hubspot cookie banner until it is accepted or declined.
If the above doesn't help, please write back with some more info or possibly a link to a page so we could debug that further.

P.S.: But I have a question, if it's an SPA, your page shouldn't be going anywhere, don't you just "push" the subsequent page into the history and just change the url? That way you don't actually change the page so it shouldn't go away.

P.P.S.: Also make sure to add that "cookie settings" button somewhere that will fire the code you mentioned. That is needed as per GDPR regulations, but it also depends on your country legislation.

If my answer was helpful please mark it as a solution.

dennisedson
HubSpot Product Team
HubSpot Product Team

Hubspot cookie banner implementation on SPA (single page application) website

@miljkovicmisa , any chance you could help here?

0 Upvotes