# Tracking code for a single-page application made in React

**URL:** <https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584>\
**Category:** APIs & Integrations\
**Created:** [September 13, 2017, 3:06pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584 "2017-09-13T15:06:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [September 13, 2017, 3:06pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584/1 "2017-09-13T15:06:53Z")

</div>

Hope anyone can help me over here to also make this clear for everyone looking for the same kind of information.

After some research I could not find a definitive answer about manually tracking page views in a single-page application without reloading the tracking code.

I found this “Tracking Code Overview”: [Tracking Code Overview](https://developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview)

**There you can see a way to track this kind of apps:**

var \_hsq = window.\_hsq = window.\_hsq || [];  
\_hsq.push([‘setPath’, ‘/home’]);

var \_hsq = window.\_hsq = window.\_hsq || [];  
\_hsq.push([‘setPath’, ‘/about-us’]);  
\_hsq.push([‘trackPageView’]);

Is this the right way to do it?

Let’s say I have a Single Page App with 3 different URLs: “/”, “/About Us” and “/Contact”.

How would you implement this?

Thanks in advance for any feedback.

---

<div class="post-metadata">

**Author:** ![Derek\_Gervais](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/derek_gervais/32/17429_2.png) [@Derek\_Gervais](https://community.hubspot.com/u/Derek_Gervais)\
**Post date:** [September 13, 2017, 5:57pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584/2 "2017-09-13T17:57:01Z")

</div>

Hi [@DanielV11](https://community.hubspot.com/u/danielv11),

The `_hsq.push([‘setPath’, ‘/about-us’]);` and `_hsq.push([‘trackPageView’]);` lines included in the example are intended to be run when the user changes from the `/home` page to the `/about-us` page. This allows you to track new page views without running the tracking code again. In your case, when a user navigates to the `/Contact` page, you’d run the following:  
`_hsq.push([‘setPath’, ‘/Contact’]);`  
`_hsq.push([‘trackPageView’]);`

---

<div class="post-metadata">

**Author:** ![wmlutz](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wmlutz/32/30191_2.png) [@wmlutz](https://community.hubspot.com/u/wmlutz)\
**Post date:** [April 13, 2018, 2:14pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584/3 "2018-04-13T14:14:32Z")

</div>

If anyone else stumbles across this page while integrating Hubspot with their React App, I built a page listener component that seems to work OK for me. I’m using React Router and Redux:

```auto
import React, { Component } from 'react'
import PropTypes from 'prop-types'

var _hsq = window._hsq = window._hsq || [];

class AnalyticsListener extends Component {
 static contextTypes = {
 router: PropTypes.object
 };

 componentDidMount() {
 this.sendPageView(this.context.router.history.location);
 this.context.router.history.listen(this.sendPageView);
 }

 sendPageView(location) {
 _hsq.push(['setPath', location.pathname]);
 _hsq.push(['trackPageView']);
 }

 render() {
 return this.props.children;
 }
}

export default AnalyticsListener

```

If you’re using google analytics, it will play nicely with that as well. This is what my App.js looks like:

```auto
const App = () =>
 <Provider store={store}>
 <Router history={history}>
 <AnalyticsListener>
 <Application />
 </AnalyticsListener>
 </Router>
 </Provider>

```

If Hubspot ever built a custom package for React apps (there are more of us than you think!) then this would be an awesome wrapper element to include.

---

<div class="post-metadata">

**Author:** ![davidcantum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/davidcantum/32/14727_2.png) [@davidcantum](https://community.hubspot.com/u/davidcantum)\
**Post date:** [May 6, 2020, 4:48pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584/4 "2020-05-06T16:48:06Z")

</div>

Im also looking forward to a npm hubspot package for our own made SPA apps this would make many things easier

---

<div class="post-metadata">

**Author:** ![YDigilov](https://avatars.discourse-cdn.com/v4/letter/y/b9bd4f/32.png) [@YDigilov](https://community.hubspot.com/u/YDigilov)\
**Post date:** [July 10, 2023, 8:12pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584/5 "2023-07-10T20:12:03Z")

</div>

This looks like a good option:

> **[GitHub - kelvinmaues/react-hubspot-tracking-code-hook: A custom hook to use the HubSpot Tracking Code API...](https://github.com/kelvinmaues/react-hubspot-tracking-code-hook)**
>
> A custom hook to use the HubSpot Tracking Code API function.

I also just made my own code to inject the script and track page visits:

```lia-code-sample
import React, { useEffect, createContext } from "react";
import { globalHistory } from "@reach/router";

export function HubspotTrackingLister({ children }) {
 useEffect(() => {
 const script = document.createElement("script");

 script.type = "text/javascript";
 script.id = "hs-script-loader";
 script.async = true;
 script.defer = true;
 script.src="//js.hs-scripts.com/39987214.js";

 document.body.appendChild(script);

 const sendPageView = () => {
 let _hsq = (window._hsq = window._hsq || []);
 _hsq.push(["setPath", window.location.pathname]);
 _hsq.push(["trackPageView"]);
 console.log("set new path: ", window.location.pathname);
 };
 sendPageView();
 return globalHistory.listen(({ action }) => {
 if (action === "PUSH") sendPageView();
 });
 }, []);

 return <>{children}</>;

```

---

<div class="post-metadata">

**Author:** ![davidcantum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/davidcantum/32/14727_2.png) [@davidcantum](https://community.hubspot.com/u/davidcantum)\
**Post date:** [May 6, 2020, 4:50pm UTC](https://community.hubspot.com/t/tracking-code-for-a-single-page-application-made-in-react/11584/6 "2020-05-06T16:50:01Z")

</div>

Do you have this code in hooks