Attriax logo
Attriax
Створити проєкт

Web SDK

Використовуйте браузерний SDK, коли вам потрібна веб-нативна атрибуція, ручне відстеження маршрутів, обробка глибоких посилань та захоплення подій без додавання обгорток, специфічних для React.

Поверхня пакету

Загальний посібник для @attriax/js. Використовуйте робочий простір проєкту, коли вам потрібні детальні кроки налаштування, контекст релізу та значення, специфічні для проєкту.

Open on npmjs

Для чого команди це використовують

Це завдання середовища виконання, які продукт вже надає через SDK та відповідні інструменти робочого простору.

Браузер-нативний

Підходить для веб-сайтів, веб-застосунків та лендінгових потоків, яким потрібна атрибуція без мобільного середовища виконання.

Обізнаний з маршрутизатором

Дозволяє вашому застосунку вирішувати, як URL-адреси споживаються, водночас повідомляючи результат до Attriax.

Готовий до аналітики

Передає перегляди сторінок, контекст маршруту та події на ту саму аналітичну поверхню, що використовується мобільними застосунками.

Примітки щодо інтеграції

Тримайте публічну документацію легкою, а потім відкривайте робочий простір проєкту, коли вам потрібні точні кроки налаштування для вашого власного потоку релізів.

Можливості

  • Ініціалізуйте екземпляр браузерного SDK в області модуля та підтримуйте його активним під час SPA-навігації.
  • Фіксуйте перегляди сторінок вручну, коли ваш маршрутизатор керує змінами шляху та заголовку.
  • Зачекайте на початкові глибокі посилання, підписуйтесь на події глибоких посилань у середовищі виконання та вирішуйте URL-адреси, які маршрутизатор вже опрацював.
  • Вмикайте доставку з урахуванням GDPR за допомогою gdprEnabled та використовуйте attriax.consent.gdpr для стану GDPR, перевірок та записів згоди.
  • Захоплюйте веб-сторонні події та контекст маршруту, щоб подорожі браузера відображались поруч з даними атрибуції застосунку.

Примітки

  • Браузерний веб є основною поверхнею Attriax, а не лише резервним призначенням.
  • Використовуйте пакет JS, коли хочете максимальний контроль над інтеграцією маршрутизатора та часом подій.
  • Оновлення середовища виконання SKAdNetwork є проблемою мобільного SDK; браузерні SDK все одно можуть сприяти веб-атрибуції та аналітиці для тих самих кампаній.
  • Якщо ви вже в React, обгортка React додає ергономіку провайдера та хуків поверх цього середовища виконання.

Встановлення

Пакет JS є найнижчим рівнем точки входу браузера і добре працює, коли ваш сайт або застосунок вже керує власним життєвим циклом маршрутизатора.

Команда встановлення

npm install @attriax/js

Приклад

Фрагмент нижче відображає початкову точку робочого простору проєкту, зберігаючи посібник загальним замість проєктно-специфічного.

src/attriax.ts

Ініціалізуйте середовище виконання браузера, фіксуйте перегляди сторінок, зачекайте на початкове глибоке посилання та вирішуйте будь-які URL-адреси, які ваш маршрутизатор ще не опрацював.

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();