HubSpot, a renowned CRM platform, comes equipped with a tracking code feature. This powerful tool allows you to monitor your website visitors and gather insightful data about their behavior. By doing so, you can enhance your marketing strategies and bolster your sales efforts.
The Tracking Code API can also be used to track visitors in HubSpot. It will attribute page views to a contact if the contact clicks a link in a tracked marketing email which directs to a page with the HubSpot tracking code installed.
Suppose you've built your website using a React app. In that case, fortunately, we recommend that you incorporate HubSpot's tracking code into your setup to capture this valuable data and start monitoring essential marketing metrics. This article aims to guide you through the process of integrating HubSpot tracking into your React app in a few straightforward steps.
The first step involves installing the react-hubspot-tracking-code-hook library.
The tracking code is automatically included on HubSpot blog pages, landing pages, and website pages.
Copy your HubSpot tracking code:
This library contains a custom hook that simplifies the use of the HubSpot Tracking Code API in your React project. You can add this library to your project using the following command in your terminal:
$ yarn add react-hubspot-tracking-code-hook
# or
$ npm install react-hubspot-tracking-code-hook
* Choose the command based on whether you're using yarn or npm as your package manager.
In this step, you will need to add the HubSpot tracking code API initialization script and identify the currently logged-in user in your system. The HubSpot tracking code should be added to the index.html file of your React project.
Also, identify the currently logged-in user using the ‘setIdentity’ function provided by the ‘react-hubspot-tracking-code-hook’ library. Replace "your-email@provider.com" with the email of the currently logged-in user.
const { setIdentity } = useTrackingCode();
setIdentity("your-email@provider.com");
The react-hubspot-tracking-code-hook library provides several functions that you can use to interact with the HubSpot tracking code. Here's how to instantiate them:
const { setPathPageView, setIdentity, setTrackPageView } = useTrackingCode();
To track the current route being visited by the user, use the setPathPageView function and pass the current route as an argument. Then, call the setTrackPageView function to track the route set in setPathPageView.
setPathPageView("/current-route");
setTrackPageView();
Be sure to replace "/current-route" with the actual path of the page you are tracking.
Here's how you can add the HubSpot tracking code in your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Test Hubspot</title>
</head>
<body>
<div id="root"></div>
<!-- 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/20715003.js"></script>
<!-- End of HubSpot Embed Code -->
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
In the script above, replace "/home" with the path of the initial page you wish to track and "//js.hs-scripts.com/20715003.js" with your specific HubSpot tracking code.
Note: without adding the tracking code API in index.html the hook library will not work
You are all set! You can see some example results in these screenshots:
After call centers, marketing production, event management etc. there is also a lot of the high skill, strategic work being done by outsourced...
Learn the simple steps on how to set up Google Search Console to start getting metrics on your SERPs and leverage information to accelerate growth.
Looking to hire a CMO? Discover the 10 essential interview questions to identify top marketing leadership. Plus, how a fractional CMO could benefit...