Monitorera Error 404/500 via GA4 | Steg för steg Guide

Monitorera Error 404/500 via GA4 och få mail-notiser

Har du någon gång tänkt;
“Jag ska bara kolla på min hemsida, det var längesen sist”
För att sen få en smärre chock när man inser att sajten ligger nere?

Det hände mig för några veckor sedan… inte kul när man jobbar “som ett proffs” med digital marknadsföring.. 🙃

Visst vore det väl bättre om man fick ett mail när det hände istället?

Det tyckte jag, så under semestern satte jag ihop en lösning för att få mail när hemsidan har error som är gratis genom att kombinera:

  • Javascript kod (Datalager-pushar mot GA4)
  • Google Tag Manager (GTM)
  • Google Analytics 4 (GA4)

Förhoppningsvis hjälper denna guide dig med att hålla koll så du slipper sätta kaffet i halsen när du ska kolla på din hemsida igen.

Innehållsförteckning

Varför monitorera error 404 & error 500?

Först och främst, låt oss gå igenom de olika error-koderna:

Vad är Error 404?

Det är enligt wikipedia “när webbsidan som efterfrågats inte finns eller inte kan hittas.”

Vad är Error 500?

Det är enligt wikipedia “när servern inte svarar som den borde”

Båda två är otroligt viktiga, oftast affärskritiska, för att ens webbplats ska hantera besökarna.

I värsta fall blir konsekvenserna utebliven försäljning och ett sämre upplevt varumärke (missköter man sin egen sajt så undrar man hur väl man blir behandlad som kund…)

I denna steg-för-steg guide visar jag hur du monitorerar/övervakar dina error 404 och error 500 genom gratisverktyg, för gratis är gött.

Översikt monitoreringslösning för GA4

Så här ser planen ut i stora drag:

  • Lägg till ett javascript som genom datalager-pushar skickar error-status till GA4
  • Ladda ner och skapa ett GA4 Event via Google Tag Manager (Du får taggarna)
  • Lägg till event- och målgruppsinställningar via GA4
  • Få mail-notis när din sida/sajt kraschat via GA4 Insikter

Lägg till ett javascript

Denna kod ska kopieras och sedan klistras in i din <HEAD> kod (på alla sidor):

<!-- Error Monitoring GA4 -->
<script>
(function() {
    fetch(window.location.href)
        .then(response => {
            if (!response.ok) {
                gtag('event', 'page_error', {
                    'status_code': response.status,
                    'url': window.location.href
                });
            }
        });
})();
</script>
<!-- Error Monitoring GA4 End -->

Klar?
Kanon, då är det dags att lägga till alla taggar, utlösare, och variabler i Google Tag Manager.

Ladda ner alla taggar, utlösare, och variabler nedan 👇

Följ steg-för-steg instruktioner för att övervaka 404/500 errors via GA4

  1. Ladda upp taggar, utlösare, och variabler
    • Ladda ner filen genom att fylla i din mailadressen ovan.
    • Ladda upp filen i Google Tag Manager → Administratör → Importera Behållare → Välj behållarfil → GTM-Error-Pages-Monitoring.json (Som du nyss laddat ner)
    • Välj vilken arbetsyta du vill ladda upp den på. (Vanligtvis väljer man “Befintlig” och ”Default”)
    • Viktigt! Välj
      • “Sammanfoga” och 
      • “Byt namn på motstridiga taggar, utlösare och variabler.”
        (Du kan alltid återgå och publicera en tidigare version om du råkat skriva över behållaren)
      • Klicka på “Visa detaljerade ändringar” för att dubbelkolla att allt stämmer
      • Klicka på Bekräfta om detaljerna ser korrekt ut
  2. Konfigurera GTM och GA4
    • Publicera GTM-behållaren

Lägg till event- och målgruppsinställningar via GA4

  1. Gå till GA4
  2. Gå till Admin → Custom Definitions → Custom Dimension
  3. Lägg till ny “custom dimension” med eventparameter-namnet:
    • status_code
  4. Lägg till målgrupp
    • Gå till Admin → Audiences → New Audience → Custom Audience
    • Lägg till eventnamnet “page_error”
    • Spara som “AU – Page Error”

5. Få mail-notis

  • Gå till GA4 → Home → View All Insights → Create
  • Lägg till inställningar enligt bilden nedan
  • Fyll i namn och mailadress att få notis skickad till dig

Tadaa!

Du har nu satt upp en monitorering för när sajten krashar!
Bra jobbat!

För krångligt?
Självklart kan jag även göra jobbet åt dig, hör av dig så löser vi något

Gör jobbet åt mig

För 5000 kr. ex moms

All feedback är välkommet, det är så man utvecklas 🙏
Om så, kontakta mig via jimmy@waernconsulting.com

/Jimmy Waern

Tags: ,