APIs & Integrations

jessicabrasil
Member

Tracking code problem in Angular Site

SOLVE

Hi Guys, how are you?

 

We've installed the hubspot tracking code on our website but we are having a problem with pop-ups and chat bots appearing on pages tha we don't want them to appear.

 

According to Hubspot support, this happens because all the HTML is loaded at the same time, so the tracking code doesn't understand that the visitor is in another page.

 

Our site was cronstructed in angular.

 

Do you know how we can solve this?

 

Thanks

1 Accepted solution
WendyGoh
Solution
HubSpot Employee
HubSpot Employee

Tracking code problem in Angular Site

SOLVE

Hey @jessicabrasil,

 

Thanks for sharing the page and it seems that this page is a Single Page Application (SPA) and currently, both the chat widget and pop up form weren't designed to work on SPA sites. As such, the behavior that you're seeing is working as expected. This issue has been raised with the engineering team and is something they are looking to provide support for in the future.

 

In the meantime, I'd suggest for your team to use the Conversations API to manipulate the Chat Widget on your SPA. For example: the `window.HubSpotConversations.widget.load();` loads the widget and the `window.HubSpotConversations.widget.remove();` method remove the widget.

 

Regarding pop-up forms, the best alternative is to use the Location Reload method to refresh the page so that it doesn't appear on the other pages. 

 

View solution in original post

6 Replies 6
ClChan
Participant

Tracking code problem in Angular Site

SOLVE

same problem here, how to use window.HubSpotConversations.widget.remove() on angular project? Have there been any updates to resolve this issue ? @WendyGoh @jessicabrasil 

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Tracking code problem in Angular Site

SOLVE

Hey @jessicabrasil,

 

Just to clarify, have you set up the target rule on both your pop up forms and chatflows - Use targeting rules in pop-up forms and chatflows

0 Upvotes
jessicabrasil
Member

Tracking code problem in Angular Site

SOLVE

Hi Wendy, how are you?

 

Yes, I set our home page https://www.b2wmarketplace.com.br/ as the target of the pop-up, but the problem is that the pop-up follows the visitor to other pages. 

 

I also set the pages where I don't want the pop-up to appear in the exclusion rule, but it doesn't work.

 

So I createad a ticket at the HubSpot support and they said that  the problem is caused by the fact that our site loads all the content at the same time, and therefore HubSpot can't understand that the visitor is in another page. 

 

I talked with our developer and she said that our site was made with Angular language, and that's why all content is loaded this way. 

0 Upvotes
WendyGoh
Solution
HubSpot Employee
HubSpot Employee

Tracking code problem in Angular Site

SOLVE

Hey @jessicabrasil,

 

Thanks for sharing the page and it seems that this page is a Single Page Application (SPA) and currently, both the chat widget and pop up form weren't designed to work on SPA sites. As such, the behavior that you're seeing is working as expected. This issue has been raised with the engineering team and is something they are looking to provide support for in the future.

 

In the meantime, I'd suggest for your team to use the Conversations API to manipulate the Chat Widget on your SPA. For example: the `window.HubSpotConversations.widget.load();` loads the widget and the `window.HubSpotConversations.widget.remove();` method remove the widget.

 

Regarding pop-up forms, the best alternative is to use the Location Reload method to refresh the page so that it doesn't appear on the other pages. 

 

AMOKEDDES
Participant

Tracking code problem in Angular Site

SOLVE

Have there been any updates to resolve this issue ? @WendyGoh @jessicabrasil 

We have a single page application (Angular) and we encounter the same problem to display a pop-in form on a page:

it works when we refresh the page and does not work when we come on the page from the site navigation)