React Router

Add one Bily component inside your existing React Router. It starts the SDK and tracks later route changes without duplicating the automatic initial page view. Do not add a raw Bily script tag anywhere else in the application. init() loads the script for you.

Install Bily

npm install @bilyai/js

Track every route once

This example uses React Router. It remembers the initial URL so it does not send a second PageView, then ignores repeated calls for the same URL.

src/bily-tracking.tsx

import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { init, track } from "@bilyai/js";

const BILY_SCRIPT_URL =
  "https://tracking.example.com/b.js?shop=store.example.com";

export function BilyTracking() {
  const location = useLocation();
  const previousUrl = useRef<string | null>(null);

  useEffect(() => {
    init({ scriptUrl: BILY_SCRIPT_URL });
  }, []);

  useEffect(() => {
    const currentUrl = window.location.href;

    if (previousUrl.current === null) {
      previousUrl.current = currentUrl;
      return;
    }

    if (currentUrl === previousUrl.current) return;
    previousUrl.current = currentUrl;

    track("PageView", {
      sourceUrl: currentUrl,
      pageTitle: document.title,
    });
  }, [location.pathname, location.search, location.hash]);

  return null;
}

Mount the component once in a component that your existing router already renders. This lets useLocation() observe committed routes without creating a second router.

src/AppRoutes.tsx

import { BilyTracking } from "./bily-tracking";

export function AppRoutes() {
  return (
    <>
      <BilyTracking />
      {/* Keep your existing routes and application UI here. */}
    </>
  );
}

This setup expects react-router-dom to be installed and a router to exist above AppRoutes. Do not add another BrowserRouter, Router, or RouterProvider. Repeated init() calls with the same URL are safe. One component keeps ownership clear, while the URL guard prevents React development checks from creating duplicate route events.

Track successful actions

Call track() only after the user action succeeds.

src/LaunchCampaignButton.tsx

import { track } from "@bilyai/js";

export function LaunchCampaignButton({ campaignId }: { campaignId: string }) {
  async function handleClick() {
    await launchCampaign(campaignId);
    track("campaign_launched", { campaign_id: campaignId });
  }

  return <button onClick={handleClick}>Launch campaign</button>;
}

Verify React Router

Check the initial view, later routes, and action events without duplicates.

Use framework mode

Install Bily in a React Router framework mode or Remix root route.

Getting started

Plan and launch

Install Bily

Track events

Operate safely

Install Bily

Track every route once

Track successful actions

Verify React Router

Use framework mode

​Install Bily

​Track every route once

​Track successful actions

Verify React Router

Use framework mode

Install Bily

Track every route once

Track successful actions