Attriax logo
Attriax
Create Project

Web SDK

Use the browser SDK when you want web-native attribution, manual route tracking, deep-link handling, and event capture without adding React-specific wrappers.

Package surface

General guide for @attriax/js. Use the project workspace when you need detailed setup steps, release context, and project-specific values.

Open on npmjs

What teams use it for

These are the runtime jobs the product already exposes through the SDK and the matching workspace tools.

Browser-native

Fits websites, web apps, and landing flows that need attribution without a mobile runtime.

Router aware

Lets your app decide how URLs are consumed while still reporting the outcome to Attriax.

Analytics ready

Feeds page views, route context, and events into the same analytics surface used by mobile apps.

Integration notes

Keep the public docs lightweight, then open the project workspace when you need the exact setup steps for your own release flow.

Capabilities

  • Initialize a browser SDK instance at module scope and keep it alive across SPA navigation.
  • Record page views manually when your own router owns path and title changes.
  • Wait for initial deep links, subscribe to runtime deep-link events, and resolve URLs the router already consumed.
  • Enable GDPR-aware delivery with gdprEnabled and use attriax.consent.gdpr for GDPR state, checks, and consent writes.
  • Capture web-side events and route context so browser journeys show up beside app attribution data.

Notes

  • Browser web is a primary Attriax surface, not just a fallback destination.
  • Use the JS package when you want maximum control over router integration and event timing.
  • SKAdNetwork runtime updates are a mobile SDK concern; browser SDKs can still contribute web attribution and analytics around the same campaigns.
  • If you are already in React, the React wrapper adds provider and hook ergonomics on top of this runtime.

Install

The JS package is the lowest-level browser entry point and works well when your site or app already owns its own router lifecycle.

Install command

npm install @attriax/js

Example

The snippet below mirrors the project workspace starting point while keeping the guide general instead of project-specific.

src/attriax.ts

Initialize the browser runtime, record page views, wait for the initial deep link, and resolve any URLs your router did not already consume.

1import { Attriax, type AttriaxDeepLinkEvent } from '@attriax/js';
2
3// Keep one SDK instance at module scope.
4const attriax = new Attriax({
5  projectToken: 'ax_your_project_token',
6  automaticPageTracking: false,
7  gdprEnabled: true,
8});
9
10function openDeepLink(event: AttriaxDeepLinkEvent) {
11  // Map the Attriax path to your real router.
12  window.history.pushState({}, '', event.uri.pathname || '/');
13  window.dispatchEvent(new PopStateEvent('popstate'));
14}
15
16async function bootstrapAttriax(): Promise<void> {
17  // Wait for SDK init before bootstrapping routing-sensitive UI.
18  await attriax.init();
19
20  // Use the GDPR helper from your privacy UI or settings screen when needed.
21  // await attriax.consent.gdpr.needsConsent({ localOnly: true });
22
23  // Emit a manual page view when your router owns page naming.
24  await attriax.tracking.recordPageView(window.location.pathname, {
25    pageTitle: document.title,
26    source: 'web_bootstrap',
27  });
28
29  const [initialDeepLink, originalInstallReferrer, reinstallReferrer] = await Promise.all([
30    attriax.deepLinks.waitForInitialDeepLink(),
31    attriax.referrer.getOriginalInstallReferrer(),
32    attriax.referrer.getReinstallReferrer(),
33  ]);
34
35  if (originalInstallReferrer) {
36    console.info('Original install campaign', originalInstallReferrer.campaign);
37  }
38
39  if (reinstallReferrer) {
40    console.info('Reinstall campaign', reinstallReferrer.campaign);
41  }
42
43  if (initialDeepLink?.found) {
44    openDeepLink(initialDeepLink);
45  }
46
47  // Listen for resolved deep links that arrive after startup.
48  attriax.deepLinks.stream.subscribe((event) => {
49    if (!event.found) {
50      return;
51    }
52
53    openDeepLink(event);
54  });
55
56  // If your router already consumed the URL, report it manually.
57  const manualDeepLink = await attriax.deepLinks.recordDeepLink({
58    uri: window.location.href,
59    source: 'web_router',
60  });
61
62  if (manualDeepLink?.found) {
63    openDeepLink(manualDeepLink);
64  }
65}
66
67void bootstrapAttriax();