Skip to content
  • Home
  • Developers
  • API
  • Releases
  • Community
  • University
  • Status
  • Home
  • Developers
  • API
  • Releases
  • Community
  • University
  • Status
Home Data Management React & DOM Minification Using Heap with React Websites
Session Replay Getting Started Administration Data Management Definitions Charts Analysis Examples Heap Plays Integrations Heap Connect Data Privacy

Table of Contents

Was this article helpful?

Yes No

Thank you for your feedback!

Using Heap with React Websites

In this article you'll learn:

  • Important differences when it comes to defining events on React websites
  • Best practices for using Heap on React websites

Usage

To install Heap with react (also known as reactJS), follow our web installation instructions. The snippet attaches Heap to the browser’s window, so you can access Heap from within React components by calling window.heap.

Defining Events

When customers use your product or app, Heap collects that event data. This includes all references to the tags, classes, IDs, and all other attributes that make up what’s known as the DOM (Document Object Model). When you define an event, you’re telling Heap what that data means— it’s a virtual pointer to all the data we collect.

Most of the time, those classes, IDs, and attributes have some semantic meaning. For example, a signup button may have an ID of “signup” and look like this:

<button id="signup">Sign Me up!</button>

It may also have classes, a type, a name, etc. depending on the element, such as this:

<button id="signup" class="btn btn-primary" type="submit" name="signup">

This semantically useful information makes it easy for you to identify and define events. However, with newer frameworks like React, which include libraries and modules to make the work that developers do faster and more efficient, the amount of semantically useful information in the DOM is often diminished.

React libraries that implement CSS modules tend to do non-conventional things to the HTML code on the page. They may completely replace semantic class names with short, random strings. They may preserve some semantically useful information, but may also append a random string to the end of the class, which changes on each build. Some implementations may only use a data-react-id attribute which has no semantic value (typically just a number) and that Heap, accordingly, doesn’t track.

As a best practice for using Heap with React websites, we recommend using data attributes and semantically useful class names. For more information on how to use these, see General Strategies for Using Heap with a Minified DOM.

For information on how to manage react native events, see Managing React Native Event Definitions. For information on how to define new react native events, see Define Events with visual labeling (react native).

Was this article helpful?

Yes No

Thank you for your feedback!

Last updated November 21, 2022.

data attributesreactreact appreactJS
  • Blog
  • Partners
  • Legal
  • Security
  • Terms
  • About
  • Careers
  • Privacy
  • Contact Us

© 2023 Heap, Inc.