Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-hubspot-tracking-code-hook

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-hubspot-tracking-code-hook

The HubSpot tracking code function as a hook to use in your React project (SPA) with all the functions available in the HubSpot Tracking code API documentation.

  • 1.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

React HubSpot Tracking Code Hook

npm

All Contributors

A custom hook to use the HubSpot Tracking Code API function.

With this custom hook, you can easily use the HubSpot Tracking Code API function.

Features

  • Set Page Path
  • Track Page View
  • Identify a visitor
  • Track events - Events JavaScript API
  • Additional code to bucket data into HubSpot page types

Next features

  • Remove cookies
  • Get privacy consent status
  • Place do not track cookie
  • Reapply analytics event handlers
  • Get cross-domain linking parameters

Guide

Installation

First step, install the HubSpot tracking code in your React project following the HubSpot documentation about it.

Tip: You can copy and paste the script code directly in the public/index.html file or use the Google Tag Manager to install as a pixel.

then,

$ yarn add react-hubspot-tracking-code-hook
# or
$ npm install react-hubspot-tracking-code-hook

How to use

This library is using the global function window._hsq that's initialized from HubSpot tracking code.

Basic
import React from "react";
import { useTrackingCode } from "react-hubspot-tracking-code-hook";

const App = () => {
  const { setPathPageView, setIdentity } = useTrackingCode();

  setPathPageView("/home");

  setIdentity("your-email@provider.com");

  setContentType("landing-page");

  return <div>My app</div>;
};

API

useTrackingCode provides the functions from HubSpot tracking code;

NamesParamsRequiredInfo
setContentTypecontentType: stringxAdditional code to bucket data into HubSpot page types (standard-page, site-page, landing-page, listing-page, blog-post, or knowledge-article)
setPathPageViewpathName: stringYESSet the path to the current page will be treated. This function should be used to update the current page whenever a page is loaded. After using this function to update the path, it will call the setTrackPageView function to track the view of the current page.
setTrackPageViewxxThis function is called when the tracking code is loaded on a page, but you can manually call this function to track subsequent views in a single page application.
setIdentity(email: string, otherProperties: object)email: YESThis 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.
setTrackEvent({ eventId: string, value: string or number })eventId: YESThis function is used to track an event using JavaScript and HubSpot's tracking code. You can use events to track specific activities completed by visitors on your site. Tracked events can show up in contacts' timelines.

License

react-hubspot-tracking-code-hook is under MIT License

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Kelvin Maues

📖 💻

Logan Koester

💻 📖

Kyle Hotchkiss

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Keywords

FAQs

Package last updated on 15 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc