How do I install TapCub on React?

Short answer

Add the TapCub script tag once to the index.html of your React app. It tracks the first load and every React Router navigation on its own; call tapcub.track() for events and tapcub.login() after sign-in.

Find your site key in Web analytics › Configuration › SDK code.

1. Add the script once

In a Vite or Create React App project, put the tag in the <head> of index.html:

<script defer src="https://static.pathclue.com/client.js" data-site="YOUR_SITE_KEY"></script>

The script starts in the browser by itself. Do not create or inject it again from a component; a second insert is ignored.

2. Pageviews and route changes

The first load and later route changes that use browser history are sent automatically. React Router with BrowserRouter needs nothing more. With HashRouter, add data-hash="true" to the same tag.

To send pageviews yourself, set data-auto-track="false" on the script and call tapcub.pageview() after each route finishes. Note that this also turns off automatic outbound and download clicks, Web Vitals and 404 events. See install on single-page apps.

3. Events and sign-in

tapcub.track('purchase', { revenue: 19.9 });

Call it from an event handler or effect in the browser. React strict mode runs effects twice in development; a repeated script insert is ignored, but a track call inside an effect will be sent twice there. Event names are cut at 100 characters; at most 20 properties are kept, keys are cut at 50 characters and string values at 200. Only strings, numbers and booleans are kept as values.

After sign-in, link the visitor to your user ID:

tapcub.login(userId, { plan: 'pro' }, { type: 'login' });

login comes from the identity script, so check that it exists before calling it. More in identify users.

Check it works

Local hostnames such as localhost are skipped by default, which is easy to mistake for a broken install. Test on a deployed preview or the live site, watch the browser network panel for the collect request, then follow check your installation.

Common problems

Not using React? See install TapCub.