CAPI på serversidan och händelsespårning

Kringgå annonsblockerare och ITP-begränsningar genom att leda MousePlayer-trafik via din egen förstapartscontainer för GTM på serversidan och följ detaljerad e-handelsanalys.

1. Översikt över spårningslägen

MousePlayer V2 introducerar en kraftfull händelserouter som låter dig styra hur data går från användarens webbläsare till våra servrar. Du kan välja mellan tre lägen:

  • Endast webb (standard): strömmar alla data via WebSockets direkt till MousePlayer. Bäst för livevy i realtid men känsligt för kraftfulla annonsblockerare.
  • Hybridläge: det bästa från båda världar. Små mus- och scrollkoordinater skickas via WebSockets för en mjuk livevy, medan stora DOM-ändringar och anpassade händelser samlas i batcher och leds säkert via ditt GTM på serversidan med HTTP POST.
  • Ren CAPI: 100% batchhantering med HTTP POST. Maximal integritet, inga WebSockets, helt förstapartsbaserat. Obs: livevyn är avstängd i detta läge.

2. Konfiguration av Google Tag Manager (rekommenderas)

Det enklaste sättet att använda hybridläge eller ren CAPI är våra officiella communitymallar för GTM. Ladda ned .tpl-filerna nedan och importera dem i dina GTM-arbetsytor.

Ladda ned mallar:

↓ Webb-GTM: MousePlayer SDK-tagg

↓ Server-GTM: MousePlayer Ingest Client

↓ Server-GTM: MousePlayer Connector-tagg

Steg 1: konfigurera klienten och taggen på serversidan

Importera i GTM-containern på serversidan mallen Ingest Client. Ställ in den på att lyssna på en egen sökväg (t.ex. /mp_capi). Importera sedan Connector-taggen, ställ in den så att den körs vid händelsen mouseplayer_batch och publicera containern.

Steg 2: konfigurera webb-GTM-taggen

Importera i webb-GTM-containern SDK-taggen. Välj ”Konfiguration och initiering” som taggtyp, ange ditt Channel ID, välj Hybridläge och klistra in URL:en till din ssGTM-slutpunkt (t.ex. https://metrics.yourdomain.com/mp_capi).

3. Manuell installation (utan GTM)

Om du föredrar att hårdkoda skriptet måste du definiera objektet window.mp_config innan spårningskoden laddas.

<!-- MousePlayer Config & SDK --> <script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. Spårning av e-handelstrattar

Följ hela kundresan. Standardiserade händelsenamn låter MousePlayer automatiskt skapa tydliga rapporter över e-handelstrattar i projektets arbetsyta. Alla händelser är helt kompatibla med CAPI- och endast webb-lägena.

1. view_item

Utlös händelsen när en användare visar en viss produktsida.

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

Utlös händelsen när en användare lägger en vara i varukorgen.

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

Utlös händelsen när en användare går till kassan.

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

Utlös händelsen vid genomförd betalning eller orderbekräftelse.

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. Anpassade händelser och kundförfrågningar

Du är inte begränsad till e-handel. Spåra inskickade formulär, nyhetsbrevsregistreringar eller anpassade interaktioner som är unika för din webbapplikation.

Kundförfrågningar (inskickat formulär)

Utlös händelsen när en användare skickar ett kontaktformulär eller begär en offert.

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

Anpassad gränssnittsinteraktion

Förstå hur användare interagerar med komplexa element som kalkylatorer, dialogrutor eller flikbyten.

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. Parametergränser och riktlinjer

Datatyper: MousePlayer upptäcker parametertyper automatiskt. Skicka tal som heltal eller flyttal (t.ex. 150.00, inte "150.00") för att använda avancerad numerisk filtrering (t.ex. ”Pris > 100”) i dashboarden.

Regel Beskrivning
Händelsenamnets längd Högst 128 tecken. Använd snake_case för bästa läsbarhet (t.ex. user_signup).
Parameternyckelns längd Högst 64 tecken per nyckelnamn (t.ex. transaction_id).
Strängvärden Textparametrar kortas till 255 tecken för optimal databasprestanda.
Dataskydd Skicka inte personuppgifter som e-postadresser i klartext, riktiga namn eller lösenord som händelseparametrar.