sandra-larsson
Educator Fullstack Developer Javascript at Chas Academy
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
Installera gtag
<!-- 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
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
Händelspårning med gtag.js
By sandra-larsson
