Web SDK
Verwenden Sie das Browser-SDK, wenn Sie web-native Attribution, manuelles Routen-Tracking, Deep-Link-Verarbeitung und Ereigniserfassung ohne React-spezifische Wrapper moechten.
Paket-Oberflaeche
Allgemeiner Leitfaden fuer @attriax/js. 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.
Browser-nativ
Passt zu Websites, Web-Apps und Landing-Flows, die Attribution ohne eine mobile Laufzeit benoetigen.
Router-bewusst
Laesst Ihre App entscheiden, wie URLs verarbeitet werden, waehrend das Ergebnis weiterhin an Attriax gemeldet wird.
Analysebereit
Speist Seitenaufrufe, Routenkontext und Ereignisse in dieselbe Analyseflaeche ein, die von mobilen Apps genutzt wird.
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
- Initialisieren Sie eine Browser-SDK-Instanz im Modulbereich und halten Sie sie ueber SPA-Navigation am Leben.
- Erfassen Sie Seitenaufrufe manuell, wenn Ihr eigener Router Pfad- und Titelaenderungen verwaltet.
- Warten Sie auf initiale Deep Links, abonnieren Sie Laufzeit-Deep-Link-Ereignisse und loesen Sie URLs auf, die der Router bereits verarbeitet hat.
- Aktivieren Sie DSGVO-bewusste Auslieferung mit gdprEnabled und verwenden Sie attriax.consent.gdpr fuer den DSGVO-Zustand, Pruefungen und Einwilligungsschreiben.
- Erfassen Sie webseitige Ereignisse und Routenkontext, damit Browser-Journeys neben App-Attributionsdaten erscheinen.
Hinweise
- Browser-Web ist eine primaere Attriax-Flaeche, nicht nur ein Fallback-Ziel.
- Verwenden Sie das JS-Paket, wenn Sie maximale Kontrolle ueber die Router-Integration und das Ereignis-Timing moechten.
- SKAdNetwork-Laufzeitaktualisierungen sind ein mobiles SDK-Anliegen; Browser-SDKs koennen weiterhin Web-Attribution und Analysen rund um dieselben Kampagnen beitragen.
- Wenn Sie bereits in React arbeiten, fuegt der React-Wrapper Provider- und Hook-Ergonomie auf dieser Laufzeit hinzu.
Installation
Das JS-Paket ist der niedrigste Browser-Einstiegspunkt und funktioniert gut, wenn Ihre Website oder App bereits ihren eigenen Router-Lebenszyklus verwaltet.
Installationsbefehl
npm install @attriax/jsBeispiel
Das folgende Snippet spiegelt den Startpunkt des Projektarbeitsbereichs wider und haelt den Leitfaden allgemein statt projektspezifisch.
src/attriax.ts
Initialisieren Sie die Browser-Laufzeit, erfassen Sie Seitenaufrufe, warten Sie auf den initialen Deep Link und loesen Sie alle URLs auf, die Ihr Router noch nicht verarbeitet hat.
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();