Slik tagger du webhendelser med GTM og GA4 enkelt takket være KI

Å måle hendelser på et nettsted høres enkelt ut.

Men så åpner du hver eneste WordPress-mal og begynner å tenke på klikk, knapper, moduler, transaksjoner, skjemaer, menyer, CTAs, kort, bannere, sidebars…

Og så utsetter du det til en annen dag.

For det er én ting å tenke “jeg vil måle det som skjer på nettstedet mitt”, og noe helt annet å tagge et ekte nettsted skikkelig.

Et nettsted med ulike maler.

Med moduler som gjentas i flere seksjoner.

Med kort og faner som ser like ut, men som endrer seg på ett eller annet punkt.

Med knapper som visuelt er identiske, men som har helt ulike funksjoner.

Og her, som på mange andre områder, kan KI hjelpe deg ganske mye.

Ikke fordi den skal bestemme målestrategien din for deg -det er fortsatt din jobb, selv om den også kan komme med forslag- men fordi den kan gjøre nesten hele jobben: 

• Gå gjennom maler.
• Oppdage lignende moduler og komponenter.
• Foreslå en gjenbrukbar struktur.
• Definere en navngivning hvis du ikke har din egen klar.
• Klargjøre en GTM-container.
• Og til og med røre koden på nettstedet ditt for for eksempel å legge til “data-”-attributter som gjør målingen enklere. 

Alt dette har jeg nettopp gjort på mitt eget nettsted, så jeg forklarer prosessen med mitt reelle tilfelle som eksempel.

Jeg har klargjort måling av klikk i redaksjonelle moduler på nettstedet mitt (fremhevede artikler, anbefalte, nyheter osv. på hver side), men systemet fungerer for hvilken som helst hendelse.

Når det er sagt, har vi to veier her: den manuelle og den automatiserte med KI.

Vi starter med den enkle, så du ser hvor rask den er, og deretter kan du, hvis du vil, se alt arbeidet du har spart ved å overlate det til KI.

Vei 1: trinnvis veiledning for å spore hendelsene på nettstedet ditt raskt med KI

Vi begynner med den raske og korte versjonen.

Steg 1: be KI-en hjelpe deg med å designe strukturen

Har du erfaring med analyse, kan du dette allerede. Men hvis du ikke har det, eller ikke kjenner GA4, kan KI være svært nyttig.

For å gjøre det trenger du bare å gå til favorittverktøyet ditt (ChatGPT, Claude eller Gemini) og gjøre to ting i én prompt:

1. Legg ved fullskjermbilder (fra topp til bunn) av hver seksjon på nettstedet (forside, kategorier, checkout osv.)
2. Forklar hva du vil.

Altså: 

<em>“Jeg vil måle klikk i hovedmodulene på nettstedet mitt. Før jeg rører kode, hjelp meg med å definere en hendelsesnavngivning og parametere slik at det kan gjenbrukes i GTM og GA4.</em>
Jeg vil ikke ha én hendelse per modul. Jeg vil ha én enkelt hendelse med parametere.

Malene jeg har er:

- home

- category

- subcategory

- tag

- post

Foreslå:

1. hendelsesnavn

2. minimumsparametere

3. tillatte verdier

4. reelle dataLayer-eksempler

5. dimensjoner jeg bør opprette i GA4”

Dette tvinger KI-en til å tenke struktur før kode.

Og det er akkurat det som interesserer deg, fordi den vil foreslå en plan som som regel gir ganske god mening. For hvis du begynner å tagge et nettsted uten navngivning, ender du med en Frankenstein-analyse.

Sparr med KI-en til strukturen er klar for deg, og du forstår hvorfor den bør gjøres slik.

Steg 2: gi den GTM-containeren din

Og la den gjøre nesten hele jobben:

1. Eksporter GTM-containeren fra prosjektet og kast den over til KI-en.
2. Be den utføre de relevante endringene basert på strategien som ble definert i forrige punkt.
3. Når den er klar, laster du den ned.
4. Du importerer den i GTM. KI-en forteller deg om du må slå den sammen med den som ligger der fra før, eller erstatte den.

Her kan vi være ferdige, eller ikke, avhengig av hvordan KI-en mener, eller hvordan vi har bedt den, om å gjennomføre taggeplanen.

Steg 3 (valgfritt): send koden til malene dine til KI-en

Hvis taggingsoppsettet krever at du legger til data-attributter (jeg forklarer hva de er i delen om manuell tagging) kan du sende KI-en de faktiske malene fra nettstedet ditt. Og det er her du virkelig sparer tid.

I WordPress kan det være filer fra temaet du har aktivt, som:

• front-page.php
• category.php
• tag.php
• single.php
• functions.php

Eller de filene temaet ditt bruker.

Last dem opp og gi den en konkret instruksjon:

<em>“Jeg sender deg de nåværende malene for nettstedet mitt.</em>
Jeg vil at du legger til data-*-attributter på lenkene i hovedmodulene for å måle hendelsen editorial_module_click.

Ikke endre designet.

Ikke endre CSS-klasser.

Ikke endre query-logikk.

Ikke endre tekster.

Legg bare til analyseattributter.

Bruk disse parameterne:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Returner de komplette, korrigerte filene og sjekk PHP-syntaksfeil.”

Pass på dette: ikke la KI-en “forbedre” malen din.

KI har en tendens til å røre mer enn den bør hvis du ikke begrenser den. Si klart at den bare skal legge til analyseattributter. Ikke noe mer.

Når filene er lastet ned og lagt opp på nettstedet, gjenstår det å teste alt før vi publiserer endringene og oppretter de nødvendige egendefinerte dimensjonene i GA4. 

Her nedenfor forklarer jeg alt, men først vil jeg at du ser alt det manuelle arbeidet vi har spart ved å følge denne prosessen.

Vei 2: trinnvis veiledning for å spore manuelt hendelsene på nettstedet ditt

La oss ta den lange veien, slik at du forstår hva KI-en faktisk har gjort.

Steg 1: bestem hvilken hendelse du vil opprette

Først: ikke opprett tjue hendelser hvis du kan opprette én gjenbrukbar og gjennomtenkt hendelse.

I mitt tilfelle ville jeg måle klikk i redaksjonelle moduler på nettstedet, så jeg opprettet én enkelt hendelse:

editorial_module_click

Men samme prosess fungerer for andre hendelser:

• cta_click
• resource_download
• pricing_click
• affiliate_click
• lead_magnet_click
• video_module_click
• product_card_click
• internal_navigation_click

Nøkkelen er å tenke på om hendelsen kan være gjenbrukbar nå eller i fremtiden. Hvis du for eksempel vil måle CTAs, ikke opprett dette:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Lag heller cta_click og skill hvert klikk med parametere. Det er renere og mer skalerbart.

Steg 2: definer minimumsparameterne

Det er aldri nødvendig å måle alt, bare det viktige. Det du faktisk skal bruke, og som lar deg ta beslutninger.

I mitt tilfelle brukte jeg disse parameterne for klikk i redaksjonelle moduler:

• page_type
• module_type
• module_area
• link_url
• link_text

Oversatt:

Parameter	Hva den angir
page_type	Sidetypen der klikket skjer (home, category, subcategory, tag eller post). Hver av dem har en annen struktur.
module_type	Typen modul som ble klikket: nyheter, anbefalt-seksjon, seksjon for siste artikler… Hver mal har en god håndfull seksjoner.
module_area	Innhold, sidebar, footer…
link_url	URL-en til lenken. Jeg la den til fordi jeg allerede hadde variabelen opprettet; ellers ville jeg ikke gjort det, siden jeg vet at jeg kommer til å se lite på den.
link_text	Og denne enda mindre

Eksempel:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Slik laster du ned lange YouTube-lister...

Med dette kan jeg allerede sammenligne:

• Hvilke sider og sidetyper som genererer flest klikk.
• Hvilke områder på siden som genererer flest klikk.
• Hvilke moduler som genererer flest klikk.

Mer enn nok til å begynne med.

Steg 3: lag en lukket navngivning

Dette er viktig: ikke la hver hendelse få et navn som er funnet på i farten. Definer lukkede verdier.

For eksempel, for page_type kan de være:

• home
• category
• subcategory
• tag
• post
• page
• landing
• product
• checkout

Bruk bare dem du trenger. I mitt tilfelle:

• home
• category
• subcategory
• tag
• post

For module_area:

• main
• sidebar
• bottom
• footer
• post_footer

Og for module_type, definer en liste etter nettstedet ditt.

I mitt tilfelle var denne listen ganske lang, siden jeg har mange ulike moduler. Noen var:

• home_hero
• home_hero_side
• featured
• latest
• sidebar_popular
• sidebar_more
• bottom_cta_newsletter
• home_section_tecnologia
• home_section_ocio
• home_section_negocio

Hvis nettstedet ditt er for tjenester, kunne du hatt:

• hero_cta
• services_grid
• case_studies
• testimonials
• pricing_table
• contact_cta
• lead_magnet

Eller, hvis det er en ecommerce:

• product_card
• category_grid
• promo_banner
• recommended_products
• cart_cta
• checkout_step
• wishlist_button

Logikken er den samme, bare konteksten endres, men metoden er den samme.

Steg 4 (valgfritt): bruk data-attributter i HTML

I mitt tilfelle var dette en viktig del av systemet.

Jeg kunne ha prøvd å få GTM til å hente modulen som ble klikket via en rar CSS-klasse eller knappeteksten, men i mellomstore prosjekter er det skjørt: det fungerer i dag, men om 3 måneder endrer du designet og det slutter å fungere, fordi du ikke husker hvordan du satte opp hendelsen.

Løsningen jeg valgte, er å legge til data-attributter direkte på lenkene eller knappene du vil måle.

Eksempel:

<a
href="https://tudominio.com/articulo/"

  data-analytics-event="editorial_module_click"

  data-page-type="home"

  data-module-type="home_hero"

  data-module-area="main"

>

  Título del artículo

</a>

Med dette bærer selve lenken allerede informasjonen du vil sende. GTM trenger ikke å gjette noe, bare lese attributtene.

Dette fungerer for nesten hvilken som helst hendelse:

<em><a</em>
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Be om tilbud

</a>

Eller for en ecommerce:

<em><a</em>
href="/producto/zapatilla-x/"

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  Sneaker X

</a>

Ja, du legger til mer kode, men det er en enkel, forståelig og skalerbar løsning.

Steg 5: lag en listener i GTM

Nå trenger du at Google Tag Manager lytter etter klikk på lenker med attributtet ditt.

Opprett en tagg for egendefinert HTML.

For eksempel:

<em><script></em>
(function() {

  document.addEventListener('click', function(event) {

    var link = event.target.closest('a[data-analytics-event]');

    if (!link) {

      return;

    }

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: link.getAttribute('data-analytics-event') || '',

      page_type: link.getAttribute('data-page-type') || '',

      module_type: link.getAttribute('data-module-type') || '',

      module_area: link.getAttribute('data-module-area') || '',

      link_url: link.href || '',

      link_text: (link.innerText || link.textContent || '').trim()

    });

  });

})();

</script>

Denne listeneren gjør noe veldig enkelt:

1. Oppdager klikk.
2. Sjekker om lenken har data-analytics-event.
3. Leser attributtene.
4. Gjør en dataLayer.push().
5. GTM bruker den hendelsen til å sende data til GA4.

Det er ikke mer mystisk enn det, bare skriv det riktig. Og til dette kan du også bruke KI.

Steg 6: opprett variablene i GTM

I GTM oppretter du datalagsvariabler for å lese parameterne.

For eksempel:

GTM-variabel	Datalagsvariabel
DL – page_type	page_type
DL – module_type	module_type
DL – module_area	module_area
DL – link_url	link_url
DL – link_text	link_text

Alle er av typen Datalagsvariabel.

Ikke improviser navn. Hvis du sender module_type, må variabelen i GTM lese module_type. Ikke module-type. Ikke moduleType. Ikke tipo_modulo.

Helst likt. Nøyaktig likt.

Steg 7: opprett utløseren

Opprett en utløser for egendefinert hendelse.

Hvis hendelsen din heter:

editorial_module_click

Utløseren må lytte etter:

editorial_module_click

Hvis hendelsen din heter:

cta_click

Utløseren må lytte etter:

cta_click

Det virker åpenbart, men mange GTM-feil er rett og slett navn som ikke matcher.

I mitt tilfelle var utløseren:

• CE – Editorial Module Click
• Type: egendefinert hendelse
• Hendelsesnavn: editorial_module_click

Steg 8: opprett GA4-taggen

Opprett en GA4-hendelsestagg.

Hendelsesnavn:

editorial_module_click

Eller hendelsen du har bestemt deg for.

Legg til parameterne:

GA4-parameter	GTM-verdi
page_type	{{DL – page_type}}
module_type	{{DL – module_type}}
module_area	{{DL – module_area}}
link_url	{{DL – link_url}}
link_text	{{DL – link_text}}

Og bruk den egendefinerte hendelsen du nettopp opprettet som utløser.

Med dette vil GTM sende hendelsen til GA4 hver gang noen klikker på en merket lenke.

Testing og neste steg

Uansett hvilken vei du har fulgt, møtes de her. Når alt er implementert, må du bare forsikre deg om at alt fungerer som det skal.

I tillegg gjenstår det å røre en liten ting til i GA4.

Steg 1: test før du publiserer

Ikke publiser i blinde:

1. Åpne forhåndsvisningen i GTM.
2. Klikk på flere moduler på nettstedet.
3. Sjekk at hendelsen vises editorial_module_click (eller hendelsen du har opprettet).
4. Gå deretter inn i GA4-taggen og sjekk at parameterne har verdi (page_type, module_type…)

Hvis du ser tomme verdier, sjekk:

• At HTML-en har data-attributtene.
• At listeneren lastes.
• At hendelsesattributtet har riktig navn.
• At GTM-variablene leser det samme navnet som dataLayer sender.
• At utløseren lytter etter riktig hendelse.

Ikke fortsett før dette fungerer. Her er GTM-forhåndsvisningen vennen din. Bruk den.

Steg 2: sjekk DebugView

Når du publiserer, sjekk DebugView i GA4.

Du bør se hendelsen komme inn, men obs: DebugView kan noen ganger bruke tid, ikke oppdatere ordentlig eller vise deg en annen økt.

Derfor, hvis du i utvidelsen Tag Assistant ser at hit-et sendes korrekt, går hendelsen ut.

DebugView er nyttig, men ikke bli gal hvis den bruker litt tid eller ikke dukker opp.

I mitt tilfelle så jeg i Tag Assistant at hendelsen ble sendt som hit til GA4, selv om DebugView ikke viste den på tidslinjen.

Det kan skje.

Steg 3: opprett egendefinerte dimensjoner i GA4

Til slutt, i GA4, gå til:

Administrer > Datavisning > Egendefinerte definisjoner

Og opprett bare dimensjonene du faktisk skal bruke. Altså parameterne for hendelsene du skal analysere.

I mitt tilfelle:

Navn	Omfang	Parameter
page_type	Hendelse	page_type
module_type	Hendelse	module_type
module_area	Hendelse	module_area

Jeg hadde allerede registrert link_url og link_text som egendefinerte dimensjoner fra tidligere tagginger.

Steg 4: (valgfritt) dokumenter navngivningen

Hvis prosjektet er stort, er det helt nødvendig å lage en oversikt over hendelsestaggingen som ligner på denne:

Hendelse	Parameter	Mulige verdier	Hva den brukes til
editorial_module_click	page_type	home, category, subcategory, tag	Maltype
editorial_module_click	module_type	featured, latest, sidebar_popular	Modultype
editorial_module_click	module_area	main, sidebar, bottom	Visuelt område

Da trenger du ikke finne opp noe på nytt når du om to måneder må legge til en annen modul; du følger bare systemet uten å måtte tenke alt om igjen eller omformulere det.

Og det var det, nå er vi ferdige.

Hvis du fulgte den manuelle veien, gratulerer. Det har nok kostet deg litt.

Hvis du fulgte KI-veien, lurer du kanskje på om du virkelig er ferdig. Og ja, svaret er ja. Litt overraskende, ikke sant?

Typiske feil

Kom igjen, la oss samle alle de som er nevnt her, og som vi alle har lidd under en eller annen gang.

Opprette for mange hendelser

Feil:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Bedre cta_click   med parametere.

Å være avhengig av CSS-klasser

Feil:

Hvis brukeren klikker på .boton-verde-grande…

I morgen endrer du designet, og farvel måling.

Bedre å legge til data-attributter: data-analytics-event="cta_click"

Ikke teste i GTM

Å publisere uten å teste er å spille rulett. Bruk alltid Forhåndsvisning.

Registrere for mange dimensjoner i GA4

Ikke gjør hver parameter til en egendefinert dimensjon.

Start utelukkende med dem du skal bruke til analyse. Resten kan vente, og hvis du ser at du virkelig trenger det, legger du det til senere.

Endre navn midt i prosessen

Hvis du bruker module_type bruk det alltid på samme måte.

Ikke bytt til:

• module-type
• moduleType
• tipo_modulo

Verken midt i prosessen eller i fremtiden. Det virker som en bagatell, men det vil komplisere analysen når du sammenligner tidsperioder med begge hendelsene..

Rask oppsummering og konklusjoner

La oss gå gjennom den generelle manuelle prosessen, som er denne:

1. Definer hva du vil vite.
2. Opprett en gjenbrukbar hendelse.
3. Definer få parametere.
4. Legg til data-*-attributter på viktige lenker.
5. Bruk KI til å gjennomgå og endre maler.
6. Opprett en listener i GTM.
7. Opprett datalagsvariabler.
8. Opprett en utløser for egendefinert hendelse.
9. Opprett en GA4-tagg.
10. Test i Tag Assistant.
11. Publiser.
12. Registrer bare de nødvendige dimensjonene i GA4.

Og som du har sett, kan dette svært enkelt reduseres hvis du ber vennen din ChatGPT om hjelp.

Dette, som ville tatt timer å gjøre manuelt, tok meg litt over 30 minutter å få operativt.  

Det føles som magi når du prøver det. Virkelig.

Og jeg avslutter med et par anbefalinger:

Å måle hendelser handler ikke om å ha mange eller alle dataene, men om å få innsikt for å ta beslutninger. Og til det trenger du bare noen få.

KI erstatter ikke målekriteriet ditt -det som forteller deg hvilke data du skal måle- men den sparer deg for en enorm mengde mekanisk arbeid og, fremfor alt, hjelper deg med å holde konsistens. 

Og det, i store prosjekter, er rent gull. Ikke sløs det bort.