React

​

Pre-Requisites

Before proceeding, ensure you:

​

0. Create Project

In this example, we used Vite as a local development server.

npm create vite@latest my-app --template react-ts

​

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.

import { Lit } from "litlyx-js"

​

3. Initialize

Next, initialize the Litlyx library with your project in your entry-point file (always App.tsx in this example) as follow:

function App() {
    Lit.init("your_project_id");
    /* previously existing code */
}

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):

useEffect(() => {
    Lit.event("your_event_name");
}, [count])

If you want to exercise more control over your events, you can use the metadata field.

useEffect(() => {
    Lit.event(
        "your_event_name", {
        metadata: {
            "functional-component": "App",
            value: count
        }
    });
}, [count])

In your dashboard, you can group them in the Events tab with the Event Metadata Analyzer.