Web SDK
Gebruik die blaaier-SDK wanneer u web-inheemse attribusie, handmatige roete-opsporing, diep-skakel-hantering en gebeure-vaslegging wil he sonder om React-spesifieke omhulsels by te voeg.
Pakketoppervlak
Algemene gids vir @attriax/js. 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.
Blaaier-inheems
Pas by webtuistes, web-apps en bestemmingsblad-vloei wat attribusie benodig sonder 'n mobiele looptyd.
Router-bewus
Laat u app besluit hoe URL'e verbruik word terwyl die uitkoms steeds aan Attriax gerapporteer word.
Ontleding-gereed
Voed bladsyaansigte, roete-konteks en gebeurtenisse in dieselfde ontledings-oppervlak wat deur mobiele apps gebruik word.
Integrasienotas
Hou die openbare dokumentasie liggies, en open dan die projekwerkspasie wanneer u die presiese opstelstappe vir u eie vrystellingsvloei benodig.
Vermoens
- Initialiseer 'n blaaier-SDK-instansie op modulebereik en hou dit lewendig oor SPA-navigasie.
- Teken bladsyaansigte handmatig aan wanneer u eie router pad- en titelveranderinge besit.
- Wag vir aanvanklike diep skakels, teken in op looptyd-diep-skakel-gebeurtenisse en los URL'e op wat die router reeds verbruik het.
- Aktiveer GDPR-bewuste aflewering met gdprEnabled en gebruik attriax.consent.gdpr vir GDPR-toestand, kontroles en toestemmingsskrywes.
- Vang webkant-gebeurtenisse en roete-konteks vas sodat blaaierreise langs app-attribusiedata verskyn.
Notas
- Blaaier-web is 'n primere Attriax-oppervlak, nie net 'n terugval-bestemming nie.
- Gebruik die JS-pakket wanneer u maksimum beheer oor router-integrasie en gebeure-tydsberekening wil he.
- SKAdNetwork-looptyd-opdaterings is 'n mobiele SDK-saak; blaaier-SDK'e kan steeds webbydrae-attribusie en ontledings rondom dieselfde veldtogte lewer.
- As u reeds in React is, voeg die React-omhulsel verskaffer- en haak-ergonomie op hierdie looptyd by.
Installeer
Die JS-pakket is die laagste-vlak blaaier-toegangspunt en werk goed wanneer u webtuiste of app reeds sy eie router-lewensiklus besit.
Installeer-opdrag
npm install @attriax/jsVoorbeeld
Die onderstaande kode-uittreksel weerspieel die beginpunt van die projekwerkspasie terwyl die gids algemeen bly in plaas van projekspesifiek.
src/attriax.ts
Initialiseer die blaaier-looptyd, teken bladsyaansigte aan, wag vir die aanvanklike diep skakel en los enige URL'e op wat u router nog nie verbruik het nie.
1import { Attriax, type AttriaxDeepLinkEvent } from '@attriax/js';
2
3// Keep one SDK instance at module scope.
4const attriax = new Attriax({
5 appToken: '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();