React SDK
Das React-Paket umschreibt die Browser-Laufzeit mit einem Attriax-Provider und Hooks, sodass Sie Seiten-Tracking und Deep-Link-Verarbeitung nah an Ihrer gerouteten UI halten koennen.
Paket-Oberflaeche
Allgemeiner Leitfaden fuer @attriax/react. Verwenden Sie den Projektarbeitsbereich, wenn Sie detaillierte Setup-Schritte, Release-Kontext und projektspezifische Werte benoetigen.
Wofuer Teams es verwenden
Dies sind die Laufzeit-Jobs, die das Produkt bereits ueber das SDK und die passenden Arbeitsbereich-Tools bereitstellt.
Provider-basiertes Setup
Halten Sie die Laufzeit im React-Kontext, anstatt den Singleton-Zugriff komponentenuebergreifend manuell zu implementieren.
Hooks fuer Routenaenderungen
Verfolgen Sie Seitenaufrufe und Deep Links von derselben Stelle, an der sich Ihr Router-Status bereits befindet.
Schnelles App-Onboarding
Funktioniert gut mit dem angemeldeten Vibe Setup-Eingabeaufforderungs-Builder, wenn Teams ein gefuehrtes Rollout moechten.
Integrationshinweise
Halten Sie die oeffentlichen Dokumente schlank, und oeffnen Sie dann den Projektarbeitsbereich, wenn Sie die genauen Setup-Schritte fuer Ihren eigenen Release-Flow benoetigen.
Faehigkeiten
- Umschliessen Sie die App mit AttriaxProvider und halten Sie die Laufzeitinitialisierung nah am React-Baum.
- Verfolgen Sie Routenaenderungen mit hook-basierten Seitenaufruf-Hilfsmitteln, anstatt jeden Uebergang manuell zu verdrahten.
- Abonnieren Sie Deep-Link-Ereignisse mit React-Hooks und geben Sie aufgeloeste Pfade an Ihren Router zurueck.
- Uebergeben Sie gdprEnabled ueber die Provider-Konfiguration und verwenden Sie attriax.consent.gdpr aus hooks-basierten UI-Flows.
- Verwenden Sie dieselbe zugrunde liegende Browser-Laufzeit, waehrend die Integration fuer SPA-Teams geformt bleibt.
Hinweise
- Der React-Wrapper eignet sich am besten fuer geroutete SPAs, die den Navigationsstatus bereits zentralisieren.
- Er beruht auf dem Browser-SDK darunter, sodass Web-Diagnosen und Analyseerwartungen ausgerichtet bleiben.
- Der Projektarbeitsbereich kann React-zielgerichtete Vibe Setup-Eingabeaufforderungen generieren, wenn Sie gefuehrte Implementierungsschritte moechten.
Installation
Verwenden Sie den React-Wrapper, wenn Sie die JS-Laufzeit plus React-bewussten Provider und Hook-Ergonomie moechten.
Installationsbefehl
npm install @attriax/react @attriax/jsBeispiel
Das folgende Snippet spiegelt den Startpunkt des Projektarbeitsbereichs wider und haelt den Leitfaden allgemein statt projektspezifisch.
src/app-root.tsx
Umschliessen Sie die App mit AttriaxProvider, erfassen Sie Seitenaufrufe aus dem Router-Status und loesen Sie Deep Links ueber die hooks-basierte Laufzeit auf.
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}