React
Learn how to track your first visit & event using React.
Pre-Requisites
Before proceeding, ensure you:
Have installed React
Get started here
Get your project ID
Sign up on Litlyx Dashboard and create a new project.
0. Create Project
In this example, we used Vite as a local development server.
1. Install
Choose your package manager & install the library.
2. Import
Now import Litlyx in your entry-point
file. The easiest way in React is in the file App.tsx
.
3. Initialize
Next, initialize the Litlyx library with your project in your entry-point file (always App.tsx
in this example) as follow:
This line of code will immediately start collecting web analytics such as: Page Visits
, Real-Time Users
, Referrers
, Bounce Rate
, Countries
, Unique Visitor Sessions
, OS
& Devices
.
4. Collect Custom Events
To customize your experience, add the following line in each function you desire. There is no limit to the number of events.
If you want to test if it works and everything is well configured, import the useEffect hook in the entry-point file (always App.tsx
in this example):
If you want to exercise more control over your events, you can use the metadata
field.
In your dashboard, you can group them in the Events
tab with the Event Metadata Analyzer
.
count
is a variable declared in App.tsx
in the default structure if you used Vite. Otherwise, create your custom variable to listen to the click event.