npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-hubspot-tracking-code-hook

v1.2.2

Published

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.

Downloads

35,971

Readme

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

  • [x] Set Page Path
  • [x] Track Page View
  • [x] Identify a visitor
  • [x] Track events - Events JavaScript API
  • [x] 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("[email protected]");

  setContentType("landing-page");

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

API

useTrackingCode provides the functions from HubSpot tracking code;

| Names | Params | Required | Info | |-------------------- |-------------------- |------------------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | setContentType | contentType: string | x | Additional code to bucket data into HubSpot page types (standard-page, site-page, landing-page, listing-page, blog-post, or knowledge-article) | | setPathPageView | pathName: string | YES | Set 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. | | setTrackPageView | x | x | This 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: YES | 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. | | setTrackEvent | ({ eventId: string, value: string or number }) | eventId: YES | This 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):

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