@openpolitica/react-use-hotjar
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

traffic

react-use-hotjar

Adds Hotjar capabilities as custom hooks to your project

NPM


Statements Branches Functions Lines
Statements Branches Functions Lines

Table of Contents


Install

npm install --save react-use-hotjar

Usage

  • Initializing Hotjar (use it at the very top of your application)
import * as React from 'react';
import useHotjar from 'react-use-hotjar';

const myCustomLogger = console.info;

const HotjarReadyApp = () => {
  const { initHotjar } = useHotjar();

  React.useEffect(() => {
    initHotjar(1234567, 6, false, myCustomLogger);
  }, [initHotjar]);

  return <App />;
};
  • Identifying Users (Use it wherever user's information is available. Send and object respecting Identify API's rules)
import * as React from 'react';
import useHotjar from 'react-use-hotjar';

const myCustomLogger = console.log;

const MyCustomComponent = () => {
  const { identifyHotjar } = useHotjar();

  const handleUserInfo = (userInfo) => {
    const { id, ...restUserInfo } = userInfo;

    identifyHotjar(id, restUserInfo, myCustomLogger);
  };
};

Examples


Documentation

useHotjar() returns:

  • An object with the following keys:
key description arguments example
readyState States if Hotjar is ready N/A N/A
initHotjar Initialize method (hotjarId: number, hotjarVersion: number, hotjarDebug?: boolean, loggerCallback?: console[method]) (1933331, 6, false, console.info)
identifyHotjar User identify API method (userId: string, userInfo: object, loggerCallback?: console[method]) ('abcde-12345-12345', {name:"Olli",surname:"Parno",address:"Streets of Tomorrow"}, console.log)
stateChange Relative path state change (relativePath: string, loggerCallback?: console[method]) ('route/logged-route/user?registered=true')
tagRecording Tag a recording (tags: string[], loggerCallback?: console[method]) (['tag1', 'tag2'])
  • initHotjar()
  1. hotjarId: Your Hotjar application ID ex.: 1933331
  2. hotjarVersion: Hotjar's current version ex.: 6
  3. hotjarDebug: Optional Debug Mode to see hotjar logs in console ex.: true
  4. logCallback: Optional callback for logging whether Hotjar is ready or not
initHotjar: (
  hotjarId: string,
  hotjarVersion: string,
  hotjarDebug?: boolean,
  logCallback?: () => void
) => boolean;
  • identifyHotjar()
  1. userId: Unique user's identification as string
  2. userInfo: User info of key-value pairs (note this must not be so long and deep according to docs) (Please note: The Identify API is only available to Business plan customers.)
  3. logCallback: Optional callback for logging whether Hotjar identified user or not
identifyHotjar: (userId: string, userInfo: object, logCallback?: () => void) =>
  boolean;
  • stateChange()
  1. relativePath: A change in a route specially for SPAs usage. stateChange docs
  2. logCallback: Optional callback for logging whether Hotjar stateChange was called or not
stateChange: (relativePath: string, logCallback?: () => void) => boolean;
  • tagRecording()
  1. tags: List of strings to associate with a recording that can be used for filtering
  2. logCallback: Optional callback for logging whether Hotjar tagRecording was called or not
tagRecording: (tags: string[], logCallback?: () => void) => boolean;

Contributors

Thanks goes to these wonderful people (emoji key):


Olavo Parno

🤔 💻 ⚠️

Gianpietro Lavado

📖

Ivan Kleshnin

💻 🤔

Ajay Varghese

💻 🤔

honicole

🔧 💻 🤔 📖

Georg Bakken Idland

📖 🤔

Jason Papakostas

🐛

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


License

react-use-hotjar is MIT licensed.


This hook is created using create-react-hook.

Readme

Keywords

none

Package Sidebar

Install

npm i @openpolitica/react-use-hotjar

Weekly Downloads

0

Version

1.2.1

License

MIT

Unpacked Size

19.5 kB

Total Files

8

Last publish

Collaborators

  • luighiv