Händelsespårning

Händelsespårning

  • Spårning av användarbeteende: Samlar in data om hur användare interagerar med din webbplats (t.ex. sidvisningar, klick, transaktioner)
     
  • Konvertering: En viktig händelse om som du vill vill att användaren ska göra - målet med en webbsida eller app
     
  • På en e-handel: Ett köp eller att lägga en produkt i varukorgen
     
  • På en tjänste-sida: Att fylla i ett kontaktformulär, boka en demo

Google Analytics

Din webbplats behöver en tagg!

 

  • Integrering av flera Google-produkter: Du kan använda en enda tagg för att skicka data till flera Google-tjänster som Google Ads och Google Analytics.
     
  • gtag.js är en kodsnutt direkt på sidan som du själv lägger in. Bra för enkla implementationer. Officiell dokumentation gtag.js. Jag demonstrerar detta sätt!
     
  • GTM (Google Tag Manager) - ett verktyg där du kan styra alla tracking utan att röra koden. Du lägger en tagg i koden sedan gör man allt via GTM. Bra för mer avancerad tracking, flera events, teamarbete.

Installera gtag

Officiell dokumentation gtag.js

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Text

Text

Spårnings-ID för Google Analytics

1. Skapa Google Analytics 4 konto

https://analytics.google.com

2. Skapa egendom på GA4

Fyll i information för den webbplats du vill analysera händelsspårningar

Valfritt projekt, github pages, netlify...

3. Hämta gtag-taggen och lägg in den på din webbplats

<!-- Google tag (gtag.js) -->
<script async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXX');
</script>

G är för GA4 - om det står UA har du använt tidigare version

4. Börja se rapporter i GA4!

Gå till Startsidan eller Rapporter i vänstra menyn

Under Engagemang - Händelser kan du se default (inte custom events) som page_view, user_engament m fl

Dessa händelser trackas per default med gtag-en

5. Skapa egna custom events

från enkla till mer kreativa!

 // Custom Event Tracking - button click
  document.getElementById('my-button').
  addEventListener('click', function() {
  
    gtag('event', 'button_click', {
      'event_category': 'your_category',
      'event_label': 'your_label',
      'value': 1
    });
    
  });

Exempel i vanilla JS, men React går ju också givetvis bra!

Debug Mode i GA4 är ett läge där du kan testa din tracking utan att den räknas som riktig data.
Det är perfekt när du utvecklar och vill se att events fungerar innan du går live!

 // Custom Event Tracking - button click
  document.getElementById('my-button').
  addEventListener('click', function() {
  
    gtag('event', 'button_click', {
      'event_category': 'your_category',
      'event_label': 'your_label',
      'value': 1,
      'debug_mode': true
    });
    
  });

Adminstratör => Debug View

Ex användaren klickar extern länk

  // Custom Event Tracking - Användaren klickar länk och lämnar sidan
 const outboundLinks = document.querySelectorAll('a[href^="http"], a[href^="https"]');
 
  outboundLinks.forEach(function(link) {
    link.addEventListener('click', function(event) {
    
      gtag('event', 'outbound_link_click', {
        'event_category': 'your_category',
        'event_label': event.target.href,
        'value': 1,
        'debug_mode': true
      });
      
    });
  });
  }

Ex användaren scrollar halva sidan

// Custom Event Tracking - användaren scrollar halvvägs
  window.addEventListener('scroll', function() {
    let scrollThreshold = window.innerHeight * 0.5;
    let scrollPosition = window.scrollY || window.pageYOffset;

    if (scrollPosition > scrollThreshold) {
    
      gtag('event', 'scroll_event', {
        'event_category': 'your_category',
        'event_label': 'your_label',
        'value': 1,
        'debug_mode': true
      });
      
    }
  });

Juridiska aspekter

  • Enligt GDPR och svensk dataskyddslagstiftning måste webbplatser som använder cookies och spårningsobjekt (tracking) informera användare och erhålla samtycke innan data samlas in
     
  • Consent Mode v2 är Googles nya (och numera obligatoriska) sätt att hantera användarsamtycke för cookies och spårning — introducerat 2024 och fullt krav 2025

 

Juridiska aspekter ⚖️

  • Samtycke före tracking: Ingen data får samlas in innan användaren gett sitt samtycke
     
  • Tydlig information: Användare måste informeras om vilken spårning som samlas in  och varför
     
  • Möjlighet att neka: Användare måste kunna vägra cookies och tracking
     
  • Default-nekande: Tracking ska vara avstängd som standard tills samtycke ges

 

Händelspårning med gtag.js

By sandra-larsson

Händelspårning med gtag.js

  • 187

More from sandra-larsson