Vanilla JavaScript

Use the SDK in browser applications built with npm. It loads your exact Bily tracking URL, keeps early calls in order, and can be imported safely during server rendering.

Install Bily

npm install @bilyai/js

Start tracking once

Select your store. Then open Bily > Settings > Apps > More settings > Install tracking, choose your framework, and copy the exact scriptUrl from the SDK snippet.

analytics.ts

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

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

init({ scriptUrl: BILY_SCRIPT_URL });

export { track };

Import this module once from your browser entry point. This gives the SDK one clear place to start.

main.ts

import "./analytics";
import { startApplication } from "./application";

startApplication();

Do not add a separate script tag. For this installation path, init() loads the script.

Track every later route once

The browser script records the initial page view automatically. Save that URL, then run this function only after the router completes a later navigation.

analytics.ts

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

init({
  scriptUrl: "https://tracking.example.com/b.js?shop=store.example.com",
});

let previousUrl = window.location.href;

export function trackCommittedRoute(): void {
  const currentUrl = window.location.href;
  if (currentUrl === previousUrl) return;

  previousUrl = currentUrl;
  track("PageView", {
    sourceUrl: currentUrl,
    pageTitle: document.title,
  });
}

Call trackCommittedRoute() from your router’s after-navigation callback. Do not call it during the initial mount, or you will duplicate the automatic page view.

Track successful actions

create-workspace.ts

import { track } from "./analytics";

export async function createWorkspace(name: string) {
  const workspace = await saveWorkspace({ name });

  track("workspace_created", {
    workspace_id: workspace.id,
    workspace_name: workspace.name,
  });

  return workspace;
}

Send completion events only after the operation succeeds. This keeps attempted actions from looking like completed ones.

Getting started

Plan and launch

Install Bily

Track events

Operate safely

Install Bily

Start tracking once

Track every later route once

Track successful actions

Track custom events

Change the tracking URL

​Install Bily

​Start tracking once

​Track every later route once

​Track successful actions

Track custom events

Change the tracking URL

Install Bily

Start tracking once

Track every later route once

Track successful actions