Install with npm

If your site has a build step, install the capture code as a dependency instead of loading it from the CDN. The public API is the same as the script tag's.

Add the package

npm install --save-exact @tracelog/capture-web@2.4.0

The command installs an exact version: --save-exact stops npm writing a range into your manifest. Update it after reviewing the new release.

Initialise it

import TraceLog from "@tracelog/capture-web";

TraceLog.init({
  key: "tl_pk_xxxxxxxxxxxxxxxxxxxxxxxxxx",
  endpoint: "https://api.tracelog.io/v1/events",
});

The key is your project's browser key, from Installation and keys in the project. It is public and only accepted from your site's addresses on the project. The server key is a different credential: never put it in code that runs in the browser.

Consent, steps, and the conversion

TraceLog.consent.grant();

TraceLog.step("form_started");

TraceLog.conversion("lead", { identifier: lead.id });

Nothing is captured before consent.grant(). Call it when the visitor accepts, and on every page load while their consent stands: a grant is not remembered. Calls made before init are held, up to 100, and made once it runs. If you import the package lazily, what you call before the import resolves is yours to hold. The full signature of every member is in the SDK reference. A conversion may also say what it was for — its items, the day a booking is for, whether it recurs and whether it is the person's first — and a step the items it shows.

Behind a proxy of your own

The example above sends events to https://api.tracelog.io/v1/events. If your site serves TraceLog behind its own domain, leave endpoint out: the capture code then sends events to /v1/events on your own origin, and your proxy forwards them.

Verify it

Open Installation and keys in the project, start the check from Open my site, and walk the declared path in the tab that button opens. TraceLog marks that tab as verification traffic. Accept your consent banner in it first: from then on the tab stays in the check across your pages and through a payment that leaves your site and comes back. A conversion you complete in any other tab counts as real and reaches your figures.

The checklist under Your conversion path ticks as TraceLog receives each event, so a local copy of your site that cannot reach TraceLog shows nothing. Run the check on your live site: Open my site always opens the address you declared. A staging copy never ticks the checklist. Events from a staging hostname you have declared are staging traffic and count toward none of your figures or your session limit. To confirm that copy sends events, open Path: under each step, it shows when its last staging event arrived.