Usage
To install Heap with React (also known as ReactJS or React.js), 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 create 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.