React SDK
Die React-pakket omhul die blaaier-looptyd met 'n Attriax-verskaffer en haak sodat u bladsyopsporing en diep-skakel-hantering naby u geroeteerde koppelvlak kan hou.
Pakketoppervlak
Algemene gids vir @attriax/react. Gebruik die projekwerkspasie wanneer u gedetailleerde opstelstappe, vrystelling-konteks en projekspesifieke waardes benodig.
Waarvoor spanne dit gebruik
Dit is die looptyd-take wat die produk reeds deur die SDK en die ooreenstemmende werkspasie-gereedskap beskikbaar stel.
Verskaffer-gebaseerde opstelling
Hou die looptyd in React-konteks in plaas van singletontoegang oor komponente handmatig te implementeer.
Hake vir roeteveranderings
Spoor bladsyaansigte en diep skakels van dieselfde plek waar u routerstaat reeds woon.
Vinnige app-aanboord
Werk goed met die aangetekende Vibe Setup-aanwysingbouer wanneer spanne 'n begeleide uitrol wil he.
Integrasienotas
Hou die openbare dokumentasie liggies, en open dan die projekwerkspasie wanneer u die presiese opstelstappe vir u eie vrystellingsvloei benodig.
Vermoens
- Omhul die app met AttriaxProvider en hou looptyd-initialisering naby aan die React-boom.
- Spoor roeteveranderings met haak-gebaseerde bladsyaansig-helpers in plaas van elke oorgang handmatig te bedraad.
- Teken in op diep-skakel-gebeurtenisse met React-hake en gee opgeboste paaie terug aan u router.
- Gee gdprEnabled deur verskaffer-konfig en gebruik attriax.consent.gdpr van haak-ondersteunde koppelvlak-vloei.
- Gebruik dieselfde onderliggende blaaier-looptyd terwyl die integrasie gevorm bly vir SPA-spanne.
Notas
- Die React-omhulsel is die beste vir geroeteerde SPA'e wat reeds navigasiestaat sentraliseer.
- Dit steun op die blaaier-SDK onderliggend, dus bly web-diagnostiek en ontledings-verwagtings in lyn.
- Die projekwerkruimte kan React-gerigte Vibe Setup-aanwysings genereer wanneer u begeleide implementeringstappe wil he.
Installeer
Gebruik die React-omhulsel wanneer u die JS-looptyd plus React-bewuste verskaffer- en haak-ergonomie wil he.
Installeer-opdrag
npm install @attriax/react @attriax/jsVoorbeeld
Die onderstaande kode-uittreksel weerspieel die beginpunt van die projekwerkspasie terwyl die gids algemeen bly in plaas van projekspesifiek.
src/app-root.tsx
Omhul die app in AttriaxProvider, teken bladsyaansigte aan van routerstaat en los diep skakels op deur die haak-gebaseerde looptyd.
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 appToken: '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}