This guide will walk you through the entire process step-by-step on integrating the HubSpot chatbot also called tracking code in react. So let’s dive in!
Table of Contents
1. Prerequisites
2. Step 1: Setting Up HubSpot Tracking Code
3. Step 2: Adding the Tracking Code to Your React App
4. Step 3: Installing and Configuring the `react-hubspot-tracking-code-hook` Library
5. Step 4: Assigning Logged-In User Information
6. Step 5 (Optional): Revoking User Details on Logout
7. Wrapping Up
Prerequisites
Make sure you have the following before you start:
- HubSpot Account: If you haven’t signed up yet, create a free account.
- React Application: A working React project. Create React App is a great option if you’re starting from scratch.
- Basic React Knowledge: Familiarity with React components, hooks, and project structure.
- Access to Project Files: You’ll need to modify your `index.html` and install npm packages, so ensure you have the necessary permissions.
Step 1: Setting Up HubSpot Tracking Code
The HubSpot Tracking Code is like the bridge between your website and HubSpot’s services. It enables the chatbot, tracks user interactions, and integrates with other HubSpot tools.
a. Log in to Your HubSpot Account
1. Head over to HubSpot and log in with your credentials. If you’re new, go ahead and sign up.
b. Navigate to Account Settings
1. Once logged in, click on the Settings icon (
) located in the main navigation bar at the top-right corner.
2. In the left sidebar, find and click on Tracking Code under the Accounts Management section.
3. You’ll see your unique tracking code snippet. Click Copy to grab the code, or use Email to web developer if you prefer sending it directly to your team.
Note: If you’ve just created the tracking code, give it a few hours to propagate. The chatbot might not appear instantly.
Step 2: Adding the Tracking Code to Your React App
Now that you have your tracking code, it’s time to embed it into your React application.
a. Locate the `index.html` File
In most React setups (like Create React App), the `index.html` file resides in the `public` directory.
my-react-app/
├── public/
│ └── index.html
├── src/
│ └── ...
├── package.json
└── ...
b. Insert the Tracking Code
1. Open the
index.html
file in your preferred code editor.
2. Before the closing
</body>
tag, paste the tracking script you copied from HubSpot. It should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My React App with HubSpot Chat</title>
</head>
<body>
<div id="root"></div>
<!-- HubSpot Tracking Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/<Your-Tracking-Code>.js"></script>
</body>
</html>
Important: Replace
<Your-Tracking-Code>
with the actual code HubSpot provided (it’s usually a series of numbers).
c. Save and Test
1. Save the changes to index.html.
2. Start your React app if it’s not already running:
npm start
3. Open your browser and navigate to your app. If the chatbot doesn’t appear immediately, remember it might take a few hours to activate. Refresh the page periodically to check.
**Step 3: Installing and Configuring the
react-hubspot-tracking-code-hook
Library**
To better manage HubSpot’s tracking within your React app, we’ll use the
react-hubspot-tracking-code-hook
library. It provides a handy custom hook to interact with the HubSpot Tracking Code API.
a. Install the Library
Open your terminal, navigate to your project directory, and run:
npm install react-hubspot-tracking-code-hook
Or if you’re using Yarn:
yarn add react-hubspot-tracking-code-hook
b. Understand What This Library Does
This library offers a React hook that simplifies:
- Setting the Current Page Path: Essential for tracking page views in single-page applications (SPAs) like React.
- Manually Tracking Page Views: Ensures each route change is recorded, maintaining accurate analytics.
c. Implement the Hook in Your App
Let’s add the hook to your main component, typically App.js or App.tsx.
1. Open App.tsx (or App.js):
import React, { useEffect } from 'react';
import { useTrackingCode } from 'react-hubspot-tracking-code-hook';
function App() {
const { setPathPageView, setTrackPageView } = useTrackingCode();
useEffect(() => {
// Set the initial page path
setPathPageView('/');
// Track the page view
setTrackPageView();
}, [setPathPageView, setTrackPageView]);
return (
<div>
<h1>Welcome to My React App</h1>
{/* Rest of your components */}
</div>
);
}
export default App;
This ensures that when the component mounts, it sets and tracks the current page.
d. Handling Route Changes with React Router
If your app uses React Router for client-side routing (which most SPAs do), you’ll want to track page views whenever the route changes.
1. Install React Router (if not already installed):
npm install react-router-dom
Or with Yarn:
yarn add react-router-dom
2. Modify App.tsx to Include Routing and Tracking:
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom';
import { useTrackingCode } from 'react-hubspot-tracking-code-hook';
function App() {
const { setPathPageView, setTrackPageView } = useTrackingCode();
return (
<Router>
<RouteChangeTracker setPathPageView={setPathPageView} setTrackPageView={setTrackPageView} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
{/* Add more routes as needed */}
</Switch>
</Router>
);
}
function RouteChangeTracker({ setPathPageView, setTrackPageView }) {
const location = useLocation();
useEffect(() => {
setPathPageView(location.pathname);
setTrackPageView();
}, [location, setPathPageView, setTrackPageView]);
return null;
}
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
export default App;
Step 4: Assigning Logged-In User Information
Personalizing the chatbot experience by linking it to the current user can make interactions more meaningful. Here’s how to set the logged-in user’s email in HubSpot.
**a.
Implementing User Identification**
Assuming you have an authentication system (like Firebase, Auth0, etc.), you’ll typically have access to the user’s email and a unique ID upon login.
1. Create an Authentication Handler:
Let’s say you have a signIn function that handles user login.
import { useTrackingCode } from 'react-hubspot-tracking-code-hook'
const { setIdentity } = useTrackingCode()
const signIn = async (email: string, id: string) => {
setIdentity(email, { id: id })
}
2. Explanation:
This function is used to identify a visitor to your site. The unique identifier is an email address. If there is an existing contact record for that email address, it will be updated. Otherwise, a new contact record will be created. In both cases, the analytics data collected for the visitor will be associated with the contact record.
Step 5 (Optional): Revoking User Details on Logout
Switching users or logging out should clean up any user-specific data to maintain privacy and data integrity. Here’s how to revoke user details from HubSpot when a user logs out.
a. Implement the Revocation
1. Create a Sign-Out Handler:
Extend your authentication logic to include a `signOut` function.
const signOut = () => {
revokeIdentity();
};
const revokeIdentity = () => {
if (window._hsq) {
window._hsq.push(['revokeCookieConsent']);
} else {
window._hsq = window._hsq || [];
window._hsq.push(['revokeCookieConsent']);
}
};
Why This Matters: Revoking user details prevents data from different users from getting mixed up, maintaining the privacy and accuracy of your analytics.
Wrapping Up
Congratulations! 
You’ve successfully integrated the HubSpot chatbot into your React application. Here’s a quick recap:
1. Set Up HubSpot Tracking Code: Obtained and embedded the tracking script into your `index.html`.
2. Installed and Configured the Library: Used r
eact-hubspot-tracking-code-hook
to manage tracking within React.
3. Handled User Identification: Linked logged-in users to HubSpot for personalized interactions.
4. Managed User Data on Logout: Ensured data privacy by revoking user details upon logout.
— Jaycee