# Tracking code problem in Angular Site

**URL:** <https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751>\
**Category:** APIs & Integrations\
**Tags:** contacts\
**Created:** [August 4, 2020, 1:24pm UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751 "2020-08-04T13:24:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jessicabrasil](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jessicabrasil/32/104777_2.png) [@jessicabrasil](https://community.hubspot.com/u/jessicabrasil)\
**Post date:** [August 4, 2020, 1:24pm UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/1 "2020-08-04T13:24:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [August 6, 2020, 5:33am UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/2 "2020-08-06T05:33:06Z")

</div>

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](https://knowledge.hubspot.com/forms/use-targeting-rules-in-pop-up-forms-and-chatflows)?

---

<div class="post-metadata">

**Author:** ![jessicabrasil](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jessicabrasil/32/104777_2.png) [@jessicabrasil](https://community.hubspot.com/u/jessicabrasil)\
**Post date:** [August 6, 2020, 5:41pm UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/3 "2020-08-06T17:41:33Z")

</div>

Hi Wendy, how are you?

Yes, I set our home page [https://www.b2wmarketplace.com.br/](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.

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [August 7, 2020, 4:44am UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/4 "2020-08-07T04:44:48Z")

</div>

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](https://developers.hubspot.com/docs/methods/conversations_api/hubspot-conversations-javascript-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](https://www.w3schools.com/jsref/met_loc_reload.asp) method to refresh the page so that it doesn’t appear on the other pages.

---

<div class="post-metadata">

**Author:** ![AMOKEDDES](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amokeddes/32/48165_2.png) [@AMOKEDDES](https://community.hubspot.com/u/AMOKEDDES)\
**Post date:** [April 21, 2021, 1:02pm UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/5 "2021-04-21T13:02:22Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![MTodi](https://avatars.discourse-cdn.com/v4/letter/m/2bfe46/32.png) [@MTodi](https://community.hubspot.com/u/MTodi)\
**Post date:** [February 5, 2025, 10:52am UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/6 "2025-02-05T10:52:14Z")

</div>

Helllo all!  
I hope you’ve already found a solution since this post is from a while ago. However, for those facing a similar issue, I’m sharing our solution to the same problem (**without using embed CTAs)** :  
In our index.html, we initialize the \_hsq array for HubSpot tracking inside \<head\> , to ensure that the array is available globally before any other scripts execute:

```lia-code-sample
 <script type="text/javascript">
 window._hsq = window._hsq || [];
 </script>

```

Ofc, in the end of the \<body\> we included :

`<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/{our_hub_id}"></script>`

Then we **Extend the Window Interface** : Create a TypeScript declaration to inform the compiler about the \_hsq and the refresh method  
(Since HubSpotCallsToActions is not a standard property on the Window object, this augmentation is safe.) :

```lia-code-sample
declare global {
 interface Window {
 _hsq: any[]
 HubSpotCallsToActions: {
 refresh: () => void
 }
 }
}

```

Finally, in our App component we subscribe to the router’s navigation events to detect URL changes and notify HubSpot accordingly:

```lia-code-sample
 ngOnInit(): void {
 this.router.events.subscribe((event) => {
 if (event instanceof NavigationEnd) {
 this.onRouteChange()
 }
 })
 }

 private onRouteChange() {
 if (window._hsq) {
 window._hsq.push(['setPath',this.router.url])
 window._hsq.push(['trackPageView'])
 if (window.HubSpotCallsToActions) {
 window.HubSpotCallsToActions.refresh()
 }
 }
 }

```

The important part above is that after updating the path and tracking the page view, you should call window.HubSpotCallsToActions.refresh() to re-render CTAs based on the new URL. This ensures that any CTAs configured to appear on specific pages or under certain conditions are displayed correctly after internal route changes.  
Hopefully, this helps someone!

---

<div class="post-metadata">

**Author:** ![ClChan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/clchan/32/82448_2.png) [@ClChan](https://community.hubspot.com/u/ClChan)\
**Post date:** [July 6, 2021, 7:10am UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/7 "2021-07-06T07:10:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![baribeau](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/baribeau/32/7115_2.png) [@baribeau](https://community.hubspot.com/u/baribeau)\
**Post date:** [November 15, 2023, 5:16pm UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/8 "2023-11-15T17:16:27Z")

</div>

Links to similar/identical issues, with slightly different descriptions or angles of approach:

- [https://community.hubspot.com/t5/APIs-Integrations/Force-CTA-Scripts-to-Run-on-History-Change-for-single-page/td-p/879567](https://community.hubspot.com/t5/APIs-Integrations/Force-CTA-Scripts-to-Run-on-History-Change-for-single-page/td-p/879567)
- [https://community.hubspot.com/t5/APIs-Integrations/When-we-change-the-route-in-our-React-single-page-application/m-p/785956#M63417](https://community.hubspot.com/t5/APIs-Integrations/When-we-change-the-route-in-our-React-single-page-application/m-p/785956#M63417)
- [https://community.hubspot.com/t5/APIs-Integrations/pop-up-form-not-triggering-in-single-page-application/m-p/756377#M61471](https://community.hubspot.com/t5/APIs-Integrations/pop-up-form-not-triggering-in-single-page-application/m-p/756377#M61471)
- [https://community.hubspot.com/t5/HubSpot-Ideas/Support-Single-Page-Application-navigation-logic-in-CTA-Beta/idi-p/806022](https://community.hubspot.com/t5/HubSpot-Ideas/Support-Single-Page-Application-navigation-logic-in-CTA-Beta/idi-p/806022)

---

<div class="post-metadata">

**Author:** ![baribeau](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/baribeau/32/7115_2.png) [@baribeau](https://community.hubspot.com/u/baribeau)\
**Post date:** [May 23, 2024, 7:20pm UTC](https://community.hubspot.com/t/tracking-code-problem-in-angular-site/23751/9 "2024-05-23T19:20:44Z")

</div>

I’ve outlined a slightly-hacky solution for this problem using Google Tag Manager and Javascript, at [https://community.hubspot.com/t5/APIs-Integrations/Force-CTA-Scripts-to-Run-on-History-Change-for-single-page/m-p/977800/highlight/true#M73696](https://community.hubspot.com/t5/APIs-Integrations/Force-CTA-Scripts-to-Run-on-History-Change-for-single-page/m-p/977800/highlight/true#M73696)