Implementera Custom Events

Vad är Custom Events?

Custom events är händelser som du manuellt spårar på din webbplats för att förstå användarnas beteende bättre. Till skillnad från automatisk spårning (som sidvisningar och sessioner) låter custom events dig spåra specifika affärsrelevanta interaktioner.

Tänk på custom events som digitala "anteckningar" om vad dina besökare gör på din webbplats. Medan Metrix automatiskt ser när någon besöker en sida, kan du med custom events också se när de klickar på en specifik knapp, fyller i ett formulär, eller tittar på en video.

Grundläggande implementering

Grundläggande syntax

När du vill spåra en händelse använder du denna enkla struktur:

window.metrix.track('h&auml;ndelse_namn', {
    egenskap1: 'v&auml;rde1',
    egenskap2: 'v&auml;rde2'
});

Det första argumentet är namnet på händelsen (till exempel "knapp_klickad"). Det andra argumentet är ett objekt med extra information om händelsen. Denna extra information hjälper dig att förstå sammanhanget - var klickade användaren, vilken knapp var det, vilken sida fanns de på?

Vanliga användningsfall

1. Knappklick

Ett av de vanligaste användningsområdena för custom events är att spåra när användare klickar på viktiga knappar på din webbplats. Detta kan vara registreringsknapper, köpknappar, eller nedladdningslänkar.

För att spåra knappklick behöver du först hitta knappen i din HTML-kod och sedan "lyssna" efter när någon klickar på den. När klicket sker skickar du ett custom event till Metrix:

// L&auml;gg till event listener p&aring; en knapp
document.getElementById('signup-button').addEventListener('click', function() {
    window.metrix.track('signup_button_clicked', {
        page: 'startsida',
        position: 'header'
    });
});

I detta exempel letar vi upp en knapp med ID "signup-button" och lägger till en "event listener" som körs varje gång någon klickar på knappen. Vi skickar med extra information om vilken sida klicket skedde på och var på sidan knappen finns. Detta hjälper dig senare att förstå vilka knappar som fungerar bäst.

2. Formulärinlämning

Formulär är ofta en viktig del av din webbplats - det kan vara kontaktformulär, registreringsformulär, eller enkäter. Genom att spåra när formulär skickas in kan du se hur väl dina formulär fungerar och om användare har problem med att fylla i dem.

Det är viktigt att spåra formulärinlämningar eftersom det visar hur många av dina besökare som faktiskt slutför den handling du vill att de ska göra:

document.getElementById('contact-form').addEventListener('submit', function(e) {
    window.metrix.track('form_submitted', {
        form_type: 'kontakt',
        fields_filled: 4,
        validation_errors: 0
    });
});

Här lyssnar vi efter när formuläret med ID "contact-form" skickas in. Vi spårar vilken typ av formulär det är, hur många fält som fylldes i, och om det fanns några valideringsfel. Denna information hjälper dig att förstå om formuläret är för långt eller för komplicerat för dina användare.

3. Videointeraktioner

Videos är ett kraftfullt sätt att engagera besökare på din webbplats, men det kan vara svårt att veta hur väl de fungerar. Genom att spåra videointeraktioner kan du se vilka videos som håller användarnas uppmärksamhet och vilka som de hoppar över.

Du kan spåra när videos startar, pausas, och slutförs. Detta ger dig värdefull insikt om ditt videoinnehåll:

// N&auml;r video startar
video.addEventListener('play', function() {
    window.metrix.track('video_played', {
        video_id: 'intro-video',
        video_title: 'Produktintroduktion',
        duration: video.duration
    });
});
 
// N&auml;r video pausas
video.addEventListener('pause', function() {
    window.metrix.track('video_paused', {
        video_id: 'intro-video',
        current_time: video.currentTime,
        progress_percent: Math.round((video.currentTime / video.duration) * 100)
    });
});

I dessa exempel spårar vi både när en video startar och när den pausas. När den startar loggar vi grundläggande information som ID, titel och längd. När den pausas spårar vi hur långt användaren kom, vilket hjälper dig att förstå vilka delar av videon som är mest intressanta.

4. E-handelshändelser

Om du driver en webbutik är det avgörande att förstå köpbeteendet hos dina kunder. Genom att spåra e-handelshändelser kan du se var i köpprocessen kunder hoppar av och vilka produkter som är mest populära.

De två viktigaste händelserna att spåra är när kunder lägger produkter i kundvagnen och när de slutför sina köp. Här är exempel på hur du implementerar denna spårning:

 // L&auml;gg till i kundvagn
function addToCart(productId, productName, price) {
    window.metrix.track('add_to_cart', {
        product_id: productId,
        product_name: productName,
        price: price,
        currency: 'SEK'
    });
}
 
// Slutf&ouml;r k&ouml;p
function purchaseCompleted(orderId, total, items) {
    window.metrix.track('purchase_completed', {
        order_id: orderId,
        total_amount: total,
        currency: 'SEK',
        items_count: items.length,
        payment_method: 'kort'
    });
}

Dessa funktioner anropar du från din befintliga e-handelskod. När någon klickar på "Lägg i kundvagn" anropar du addToCart() med produktinformation. När ett köp slutförs anropar du purchaseCompleted() med orderdetaljer. Detta ger dig data för att förstå vilka produkter som säljer bäst och hur stor genomsnittlig orderkvantitet är.

5. Sökfunktionalitet

Om din webbplats har en sökfunktion är det värdefullt att veta vad användarna söker efter. Detta hjälper dig att förstå vad de är intresserade av och om din sökfunktion ger relevanta resultat.

Genom att spåra sökningar kan du identifiera populära söktermer och förbättra både ditt innehåll och din sökfunktion:

 document.getElementById('search-form').addEventListener('submit', function(e) {
    const searchTerm = document.getElementById('search-input').value;
 
    window.metrix.track('search_performed', {
        search_term: searchTerm,
        category: 'produkter',
        results_count: getSearchResultsCount()
    });
});

I detta exempel lyssnar vi efter när sökformuläret skickas in. Vi hämtar vad användaren sökte efter och skickar det tillsammans med information om vilken kategori de sökte i och hur många resultat de fick. Funktionen getSearchResultsCount() skulle du behöva implementera själv baserat på hur din sökfunktion fungerar.

Avancerade exempel

Spåra tidsbaserade händelser

Ibland vill du inte bara veta att något hände, utan också hur länge det tog. Ett bra exempel är att mäta hur länge användare spenderar på att läsa en artikel eller titta på en produktsida.

Tidsbaserad spårning kräver att du sparar en starttid och sedan beräknar skillnaden när användaren lämnar sidan:

 // Sp&aring;ra hur l&auml;nge anv&auml;ndare l&auml;ser en artikel
let articleStartTime = Date.now();
 
window.addEventListener('beforeunload', function() {
    const timeSpent = Math.round((Date.now() - articleStartTime) / 1000);
 
    window.metrix.track('article_read_time', {
        article_id: 'artikel-123',
        time_spent_seconds: timeSpent,
        article_category: 'teknologi'
    });
});

Här sparar vi tiden när sidan laddas i articleStartTime. När användaren är på väg att lämna sidan (genom beforeunload-eventet) beräknar vi hur lång tid som gått och skickar den informationen. Detta hjälper dig att förstå vilket innehåll som engagerar användarna mest.

Spåra felhantering

JavaScript-fel på din webbplats kan påverka användarupplevelsen negativt utan att du märker det. Genom att spåra dessa fel automatiskt kan du upptäcka och åtgärda problem snabbare.

När ett JavaScript-fel inträffar skickar vi automatiskt information om felet till Metrix så att du kan se vilka fel som påverkar dina användare mest:

 window.addEventListener('error', function(e) {
    window.metrix.track('javascript_error', {
        error_message: e.message,
        file_name: e.filename,
        line_number: e.lineno,
        page_url: window.location.href
    });
});

Denna kod lyssnar efter alla JavaScript-fel på sidan och skickar detaljerad information om dem. Du får reda på felmeddelandet, vilken fil felet inträffade i, vilken rad, och på vilken sida. Detta gör det mycket lättare att spåra ner och lösa problem som påverkar dina användare.

A/B-testning

A/B-testning innebär att du visar olika versioner av din webbplats för olika användare för att se vilken version som fungerar bäst. För att kunna analysera resultaten behöver du spåra vilken version varje användare såg.

När du genomför A/B-tester måste du alltid logga vilken variant användaren exponerades för, så att du senare kan koppla deras beteende till rätt testgrupp:

 // Sp&aring;ra vilken variant anv&auml;ndaren ser
const abTestVariant = getABTestVariant(); // Din logik h&auml;r
 
window.metrix.track('ab_test_exposure', {
    test_name: 'header_design',
    variant: abTestVariant, // 'A' eller 'B'
    user_segment: 'new_visitor'
});

I detta exempel antar vi att du har en funktion getABTestVariant() som bestämmer vilken variant användaren ska se (detta skulle du implementera baserat på ditt A/B-test-verktyg). Vi spårar testets namn, vilken variant användaren fick, och eventuellt vilket användarsegment de tillhör. Detta låter dig senare analysera resultaten per variant.

Bästa praxis

1. Använd konsekvent namngivning

När du namnger dina custom events är det viktigt att vara konsekvent. Detta gör det mycket lättare att hitta och analysera data senare. En bra regel är att alltid använda samma namngivningskonvention genom hela din webbplats.

Rekommendationen är att använda "snake_case" (ord åtskilda med understreck) och beskrivande namn som tydligt förklarar vad händelsen representerar:

 // Bra - anv&auml;nd snake_case och beskrivande namn
window.metrix.track('newsletter_signup_completed', { ... });
 
// Undvik - inkonsekvent namngivning
window.metrix.track('NewsletterSignup', { ... });
window.metrix.track('newsletter-signup', { ... });

Genom att vara konsekvent slipper du senare förvirring när du analyserar data. Det blir också lättare för andra utvecklare i teamet att förstå och använda samma system.

2. Inkludera relevant kontext

När du spårar en händelse är det viktigt att inkludera tillräckligt med information för att händelsen ska vara användbar för analys. Tänk på vilka frågor du kan komma att vilja besvara i framtiden och inkludera data som hjälper dig att svara på dem.

Mer kontext ger dig möjlighet att göra djupare analyser och förstå mönster i användarnas beteende:

window.metrix.track('product_viewed', {
    product_id: '12345',
    product_name: 'Tr&aring;dl&ouml;sa h&ouml;rlurar',
    category: 'elektronik',
    price: 599,
    currency: 'SEK',
    page_section: 'featured_products',
    user_type: 'returning_customer'
});

I detta exempel inkluderar vi inte bara att en produkt visades, utan också vilken produkt, dess kategori, pris, var på sidan den visades, och vilken typ av användare som tittade på den. Detta låter dig senare analysera till exempel vilka produkter som är populärast bland nya kontra återkommande kunder.

3. Begränsa datamängden

Även om det är viktigt att inkludera relevant kontext, är det lika viktigt att inte inkludera för mycket eller irrelevant data. För mycket data kan göra dina analyser röriga och kan också påverka prestandan på din webbplats.

Fokusera på data som faktiskt hjälper dig att förstå användarnas beteende och undvik känslig information eller data som inte bidrar till analysen:

// Bra - endast relevant data
window.metrix.track('file_downloaded', {
    file_name: 'produktkatalog.pdf',
    file_size_kb: 2048,
    download_source: 'product_page'
});
 
// Undvik - f&ouml;r mycket data
window.metrix.track('file_downloaded', {
    // Inkludera inte k&auml;nslig eller irrelevant data
    user_email: 'user@example.com', // K&auml;nsligt
    browser_plugins: [...], // Irrelevant
    entire_page_html: '...' // F&ouml;r stort
});

Som regel: inkludera bara data som du faktiskt planerar att analysera och som hjälper dig att förstå användarnas beteende. Undvik personlig information och stora datamängder som kan påverka prestandan.

Felsökning

När du implementerar custom events kan det ibland vara svårt att veta om allt fungerar som det ska. Här är några verktyg och tekniker som hjälper dig att kontrollera att dina events skickas korrekt.

Aktivera debug-läge

Det första du bör göra när du testar din implementation är att aktivera debug-läge. Detta gör att alla events loggas till webbläsarens konsol så att du kan se exakt vad som skickas:

 // Aktivera debug f&ouml;r att se events i konsolen
window.metrix.debug(true);

När debug-läge är aktiverat kommer du att se detaljerad information i konsolen varje gång ett event skickas. Detta hjälper dig att verifiera att rätt data skickas vid rätt tidpunkter.

Kontrollera att events skickas

För att kontrollera att ditt tracking fungerar korrekt kan du använda Metrix inbyggda funktioner för att inspektera sessionen och testa events:

 // Kontrollera session-info
console.log(window.metrix.getSessionInfo());
 
// Testa ett event
window.metrix.track('test_event', { test: true });

Funktionen getSessionInfo() visar dig information om den aktuella sessionen, inklusive session-ID, om användaren är aktiv, och hur länge de varit på sidan. Detta hjälper dig att förstå om grundläggande tracking fungerar.

Sammanfattning

Custom events ger dig möjlighet att spåra specifika användarinteraktioner som är viktiga för ditt företag. Genom att implementera välgenomtänkta custom events kan du:

Förstå användarnas beteende bättre - Se exakt vad användarna gör på din webbplats, inte bara vilka sidor de besöker
Optimera konverteringsprocesser - Identifiera var i köpprocessen eller registreringsflödet användare hoppar av
Mäta framgången av specifika funktioner - Se hur väl nya funktioner eller designändringar fungerar
Fatta datadrivna beslut - Basera viktiga affärsbeslut på verklig användardata istället för gissningar

Kom ihåg att alltid testa dina implementeringar noggrant och använda beskrivande namn för både events och egenskaper. Med rätt implementation av custom events får du djupare insikter i hur din webbplats används och kan kontinuerligt förbättra användarupplevelsen.