React SDK
Пакет React обгортає середовище виконання браузера провайдером Attriax та хуками, щоб ви могли тримати відстеження сторінок та обробку глибоких посилань близько до вашого маршрутизованого інтерфейсу.
Поверхня пакету
Загальний посібник для @attriax/react. Використовуйте робочий простір проєкту, коли вам потрібні детальні кроки налаштування, контекст релізу та значення, специфічні для проєкту.
Для чого команди це використовують
Це завдання середовища виконання, які продукт вже надає через SDK та відповідні інструменти робочого простору.
Налаштування на основі провайдера
Тримайте середовище виконання в контексті React замість ручного реалізації доступу до синглтона між компонентами.
Хуки для змін маршрутів
Відстежуйте перегляди сторінок та глибокі посилання з того самого місця, де вже знаходиться стан вашого маршрутизатора.
Швидке онбординг застосунку
Добре працює з конструктором підказок Vibe Setup зі входом, коли команди хочуть керований розгортання.
Примітки щодо інтеграції
Тримайте публічну документацію легкою, а потім відкривайте робочий простір проєкту, коли вам потрібні точні кроки налаштування для вашого власного потоку релізів.
Можливості
- Обгорніть застосунок за допомогою AttriaxProvider і тримайте ініціалізацію середовища виконання близько до дерева React.
- Відстежуйте зміни маршрутів за допомогою помічників перегляду сторінок на основі хуків замість ручного підключення кожного переходу.
- Підписуйтесь на події глибоких посилань за допомогою хуків React і повертайте вирішені шляхи до вашого маршрутизатора.
- Передавайте gdprEnabled через конфігурацію провайдера та використовуйте attriax.consent.gdpr з потоків інтерфейсу на основі хуків.
- Використовуйте те саме базове середовище виконання браузера, зберігаючи форму інтеграції для SPA-команд.
Примітки
- Обгортка React найкраще підходить для маршрутизованих SPA, які вже централізують стан навігації.
- Вона покладається на браузерний SDK, тому веб-діагностика та аналітичні очікування залишаються узгодженими.
- Робочий простір проєкту може генерувати підказки Vibe Setup, орієнтовані на React, коли вам потрібні керовані кроки реалізації.
Встановлення
Використовуйте обгортку React, коли вам потрібне середовище виконання JS плюс ергономіка провайдера та хуків, обізнаних з React.
Команда встановлення
npm install @attriax/react @attriax/jsПриклад
Фрагмент нижче відображає початкову точку робочого простору проєкту, зберігаючи посібник загальним замість проєктно-специфічного.
src/app-root.tsx
Обгорніть застосунок в AttriaxProvider, фіксуйте перегляди сторінок зі стану маршрутизатора та вирішуйте глибокі посилання через середовище виконання на основі хуків.
1import { useEffect } from 'react';
2import { useLocation, useNavigate } from 'react-router';
3import {
4 AttriaxProvider,
5 useAttriax,
6 useAttriaxDeepLinks,
7 useAttriaxPageView,
8} from '@attriax/react';
9
10function AppRoutes() {
11 return <div>Your routed application goes here.</div>;
12}
13
14function AttriaxRuntime() {
15 const navigate = useNavigate();
16 const location = useLocation();
17 const { attriax, isInitialized } = useAttriax();
18
19 // Track page changes with your router state.
20 useAttriaxPageView(location.pathname, {
21 disabled: !isInitialized,
22 effectKey: location.key,
23 pageTitle: document.title,
24 source: 'react_router',
25 });
26
27 // Listen for deep links that resolve after startup.
28 useAttriaxDeepLinks((event) => {
29 if (!event.found) {
30 return;
31 }
32
33 navigate(event.uri.pathname || '/');
34 });
35
36 useEffect(() => {
37 if (!isInitialized) {
38 return;
39 }
40
41 let active = true;
42
43 void (async () => {
44 const [initialDeepLink, originalInstallReferrer, reinstallReferrer] = await Promise.all([
45 attriax.deepLinks.waitForInitialDeepLink(),
46 attriax.referrer.getOriginalInstallReferrer(),
47 attriax.referrer.getReinstallReferrer(),
48 ]);
49
50 if (!active) {
51 return;
52 }
53
54 if (originalInstallReferrer) {
55 console.info('Original install campaign', originalInstallReferrer.campaign);
56 }
57
58 if (reinstallReferrer) {
59 console.info('Reinstall campaign', reinstallReferrer.campaign);
60 }
61
62 if (initialDeepLink?.found) {
63 navigate(initialDeepLink.uri.pathname || '/');
64 }
65 })();
66
67 return () => {
68 active = false;
69 };
70 }, [attriax, isInitialized, navigate]);
71
72 return <AppRoutes />;
73}
74
75export function AppRoot() {
76 return (
77 <AttriaxProvider
78 autoInit
79 config={{
80 projectToken: 'ax_your_project_token',
81 automaticPageTracking: false,
82 gdprEnabled: true,
83 }}
84 onInitError={(error) => console.error('Attriax init failed', error)}
85 >
86 <AttriaxRuntime />
87 </AttriaxProvider>
88 );
89}