Hubspot tracking code in Angular single page application

[BroLegend]

The website documentation has a template code as

<!-- Set up the path for the initial page view -->
<script>
  var _hsq = window._hsq = window._hsq || [];
  _hsq.push(['setPath', '/home']);
</script>

<!-- Load the HubSpot tracking code -->
<!-- Start of HubSpot Embed Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/{hubId}.js"></script>
<!-- End of HubSpot Embed Code -->

<!-- Tracking subsequent page views -->
<script>
  var _hsq = window._hsq = window._hsq || [];
  _hsq.push(['setPath', '/about-us']);
  _hsq.push(['trackPageView']);
</script>

But how do I automatically update 

<script>
  var _hsq = window._hsq = window._hsq || [];
  _hsq.push(['setPath', '/home']);
</script>

so I don't need to manually call it in every service class.

Thanks.

[cbarley10]

Hey @BroLegend , not entirely sure what you mean by automatically update, but a lot of people will hold the path to the page in state via the router, or in the application's state. You can then set and pull from the state each time a new "page" has loaded in your SPA. You can do this onclick, or when the applications state has changed or a new route it hit. 

Not sure if that answers your question at all, but hope it points you in the right direction.

[BroLegend]

@cbarley10 I'm thinking of having a router.events.navigationEnd which triggers .push function to set path. Is that possible? Or if there is a better way to do it?

[cbarley10]

sounds about right, as long as there's an event in the DOM that can trigger the push method on the _hsq array, you should be good. To be fair though, I'm not very familiar with Angular.

[BroLegend]

Me either, do you have any code sample for angular SPA?

[cbarley10]

I don’t, sorry !