Händelsespårning

Vad är? 

  • Spårning av användarbeteende: Samlar in data om hur användare interagerar med din webbplats (t.ex. sidvisningar, klick, transaktioner)
     
  • 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 skickar data till Googles tjänster genom att skicka “händelser” (events). En händelse kan vara allt från en sidvisning till en specifik användarinteraktion, såsom ett knapptryck eller ett köp.

Använda gtag.js

  • gtag.js är ett JS-bibliotek från Google som används för att integrera och hantera Googles tjänster som Google Analtyics eller andra spårning- och analysverktyg
     
  • gtag är del av Google Tag Manager (GTM) ecosystem, men med gtag implementerar man direkt i js-koden, till skillnad från GTM som är ett UI för att hantera taggar och lägga till taggar utan att gå direkt in i koden.
     
  • Eftersom ni är så hajja på JS kör vi gtag.js!
     
  • Det ingår inte i uppgiften att lära sig GTM - men kika gärna om ni är intresserade

Officiell dokumentation gtag.js

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

Vänta 24-48 timmar...

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!

Obs! Kom ihåg debug mode

 // 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
      });
      
    }
  });

Valfritt

Testa annan händelsepårare som Facebook Pixel