Så taggar du webbhändelser med GTM och GA4 enkelt tack vare AI

Att mäta händelser på en webbplats låter enkelt.

Men sedan öppnar du var och en av dina WordPress-mallar och börjar tänka på klick, knappar, moduler, transaktioner, formulär, menyer, CTAs, kort, banners, sidebars…

Och så skjuter du upp det till en annan dag.

För det är en sak att tänka “jag vill mäta vad som händer på min webbplats” och en helt annan att tagga en verklig webbplats ordentligt.

En webbplats med olika mallar.

Med moduler som upprepas i flera sektioner.

Med kort och flikar som ser likadana ut men skiljer sig åt på något sätt.

Med knappar som visuellt är identiska men fyller helt olika funktioner.

Och här, som på så många andra ställen, kan AI hjälpa dig ganska mycket.

Inte för att den ska bestämma din mätstrategi åt dig -det är fortfarande din sak, även om den också kan ge förslag- utan för att den kan göra nästan hela jobbet: 

• Granska mallar.
• Upptäcka liknande moduler och komponenter.
• Föreslå en återanvändbar struktur.
• Definiera en namngivning om du inte har din klar.
• Förbereda en GTM-container.
• Och till och med röra koden på din webbplats för att till exempel lägga till “data-”-attribut som gör mätningen enklare. 

Allt detta har jag just gjort på min egen webbplats, så jag berättar processen med mitt verkliga fall som exempel.

Jag har förberett mätningen av klick i de redaktionella modulerna på min webbplats (utvalda artiklar, rekommenderade, nyheter osv. på varje sida), men systemet fungerar för vilken händelse som helst.

Med detta sagt har vi två vägar här: den manuella och den automatiserade med AI.

Vi börjar med den enkla så att du ser hur snabb den är, och sedan, om du vill, kan du titta på allt arbete du har sluppit genom att lämna det till AI.

Väg 1: steg-för-steg-guide för att spåra händelser på din webbplats snabbt med AI

Vi börjar med den snabba och korta versionen.

Steg 1: be AI hjälpa dig att utforma strukturen

Om du har erfarenhet av analys kan du redan det här. Men om du inte har det, eller om du inte kan GA4, kan AI vara väldigt användbart.

För att göra det behöver du bara gå till ditt favoritverktyg (ChatGPT, Claude eller Gemini) och göra två saker i en prompt:

1. Lägg till fullständiga skärmdumpar (uppifrån och ned) av varje sektion på webbplatsen (startsida, kategorier, checkout osv.)
2. Förklara för den vad du vill.

Det vill säga: 

<em>“Jag vill mäta klick i huvudmodulerna på min webbplats. Innan vi rör kod, hjälp mig att definiera en händelsenamngivning och parametrar som kan återanvändas i GTM och GA4.</em>
Jag vill inte ha en händelse per modul. Jag vill ha en enda händelse med parametrar.

Mallarna jag har är:

- home

- kategori

- underkategori

- tagg

- post

Föreslå:

1. händelsenamn

2. minsta parametrar

3. tillåtna värden

4. verkliga exempel på dataLayer

5. dimensioner jag bör skapa i GA4”

Detta tvingar AI att tänka i struktur före kod.

Och det är precis det du vill åt, eftersom den kommer att föreslå en plan som i regel är ganska vettig. För om du börjar tagga en webbplats utan namngivning slutar du med Frankenstein-analys.

Bolla med AI tills du har strukturen klar och förstår varför du gör det så.

Steg 2: skicka din GTM-container till den

Och låt den göra nästan allt arbete:

1. Exportera projektets GTM-container och mata in den till AI.
2. Be den göra relevanta ändringar utifrån strategin som definierades i föregående punkt.
3. När den är klar laddar du ner den.
4. Du importerar den i GTM. AI kommer att säga om du ska slå ihop den med den som redan finns där uppe eller ersätta den.

Här kan vi ha blivit klara eller inte, beroende på hur AI tror att taggningsplanen ska utföras eller hur vi har bett den göra det.

Steg 3 (valfritt): skicka koden för dina mallar till AI

Om taggningen kräver att du lägger till data-attribut (jag förklarar vad de består av i avsnittet om manuell taggning) kan du skicka de verkliga mallarna för din webbplats till AI. Och det är här du verkligen sparar tid.

I WordPress kan det vara filer från det aktiva temat som:

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

Eller de som ditt tema använder.

Ladda upp dem och ge en konkret instruktion:

<em>“Här är de aktuella mallarna för min webbplats.</em>
Jag vill att du lägger till data-*-attribut på länkarna i huvudmodulerna för att mäta händelsen editorial_module_click.

Ändra inte designen.

Ändra inte CSS-klasser.

Ändra inte query-logik.

Ändra inte texter.

Lägg bara till analysattribut.

Använd dessa parametrar:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Returnera de kompletta korrigerade filerna och kontrollera PHP-syntaxfel.”

Se upp med detta: låt inte AI “förbättra” din mall.

AI tenderar att röra mer än nödvändigt om du inte begränsar den. Säg tydligt att den bara ska lägga till analysattribut. Inget mer.

När filerna är nedladdade och uppladdade till webbplatsen skulle vi sedan testa allt innan ändringarna publiceras och de nödvändiga anpassade dimensionerna skapas i GA4. 

Här nedanför förklarar jag allt, men först vill jag att du ser allt manuellt arbete vi har sparat genom att följa den här processen.

Väg 2: steg-för-steg-guide för att spåra manuellt händelserna på din webbplats

Nu tar vi den långa vägen, så att du förstår vad AI faktiskt har gjort.

Steg 1: bestäm vilken händelse du vill skapa

Först och främst: skapa inte tjugo händelser om du kan skapa en återanvändbar och genomtänkt.

I mitt fall ville jag mäta klick i webbplatsens redaktionella moduler, så jag skapade en enda händelse:

editorial_module_click

Men samma process fungerar för andra händelser:

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

Nyckeln är att tänka på om händelsen kan vara återanvändbar nu eller i framtiden. Om du till exempel vill mäta CTAs, skapa inte detta:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Skapa hellre cta_click och skilj varje klick med parametrar. Det är renare och mer skalbart.

Steg 2: definiera minsta parametrar

Det är aldrig nödvändigt att mäta allt, utan det viktiga. Det du faktiskt kommer att använda och som låter dig fatta beslut.

I mitt fall använde jag dessa parametrar för klick i redaktionella moduler:

• page_type
• module_type
• module_area
• link_url
• link_text

Översatt:

Parameter	Vad den visar
page_type	Typ av sida där klicket sker (home, kategori, underkategori, tagg eller artikel). Var och en har en annan struktur.
module_type	Typ av modul som klickades: nyheter, rekommenderat-sektion, senaste artiklar… Varje mall har en rejäl bunt sektioner.
module_area	Innehåll, sidebar, footer…
link_url	Länkens URL. Jag lade till den eftersom jag redan hade skapat variabeln; annars hade jag inte gjort det, eftersom jag vet att jag kommer att titta på den ganska lite.
link_text	Och den här ännu mindre

Exempel:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Cómo descargar listas largas de YouTube...

Med detta kan jag redan jämföra:

• Vilka sidor och sidtyper som genererar flest klick.
• Vilka zoner på sidan som genererar flest klick.
• Vilka moduler som genererar flest klick.

Mer än nog för att börja.

Steg 3: skapa en sluten namngivning

Det här är viktigt: låt inte varje händelse få ett namn som hittas på i stunden. Definiera slutna värden.

Till exempel, för page_type kan de vara:

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

Använd bara dem du behöver. I mitt fall:

• home
• category
• subcategory
• tag
• post

För module_area:

• main
• sidebar
• bottom
• footer
• post_footer

Och för module_type, definiera en lista enligt din webbplats.

I mitt fall var listan ganska lång, eftersom jag har ganska många olika moduler. Några var:

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

Om din webbplats är för tjänster skulle du kunna ha:

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

Eller, om det är en ecommerce:

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

Logiken är densamma, bara sammanhanget ändras, men metoden är densamma.

Steg 4 (valfritt): använd data-attribut i HTML

I mitt fall var detta en viktig del av systemet.

Jag hade kunnat försöka få GTM att hämta modulen som klickats via en konstig CSS-klass eller via knappens text, men i medelstora projekt är det skört: idag fungerar det, men om 3 månader ändrar du designen och då slutar det fungera, eftersom du inte minns hur du byggde händelsen.

Lösningen jag valde är att lägga till data-attribut direkt på de länkar eller knappar du vill mäta.

Exempel:

<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 detta bär själva länken redan den information du vill skicka. GTM behöver inte gissa något, bara läsa attributen.

Detta fungerar för nästan vilken händelse som helst:

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

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Begär offert

</a>

Eller för 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"

>

  Sko X

</a>

Ja, du lägger till mer kod, men det är en enkel, begriplig och skalbar lösning.

Steg 5: skapa en listener i GTM

Nu behöver du att Google Tag Manager lyssnar efter klick på länkar med ditt attribut.

Skapa en anpassad HTML-tagg.

Till exempel:

<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>

Den här listenern gör något väldigt enkelt:

1. Upptäcker klick.
2. Kontrollerar om länken har data-analytics-event.
3. Läser attributen.
4. Gör en dataLayer.push().
5. GTM använder den händelsen för att skicka data till GA4.

Det är inte mer mystiskt än så, bara att skriva det rätt. Och till detta kan du också använda AI.

Steg 6: skapa variablerna i GTM

I GTM, skapa datalager-variabler för att läsa parametrarna.

Till exempel:

GTM-variabel	Datalager-variabel
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

Alla är av typen Datalager-variabel.

Improvisera inte namn. Om du i listenern skickar module_type, ska variabeln i GTM läsa module_type. Inte module-type. Inte moduleType. Inte tipo_modulo.

Hellre lika. Exakt lika.

Steg 7: skapa triggern

Skapa en trigger för anpassad händelse.

Om din händelse heter:

editorial_module_click

Triggern ska lyssna på:

editorial_module_click

Om din händelse heter:

cta_click

Triggern ska lyssna på:

cta_click

Det verkar uppenbart, men många GTM-fel är helt enkelt namn som inte matchar.

I mitt fall var triggern:

• CE – Editorial Module Click
• Typ: Anpassad händelse
• Händelsenamn: editorial_module_click

Steg 8: skapa GA4-taggen

Skapa en GA4-händelsetagg.

Händelsenamn:

editorial_module_click

Eller den händelse du har bestämt.

Lägg till parametrarna:

GA4-parameter	GTM-värde
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}}

Och använd den anpassade händelsen du just skapade som trigger.

Med detta skickar GTM händelsen till GA4 varje gång någon klickar på en taggad länk.

Tester och nästa steg

Det spelar ingen roll vilken väg du har följt, här möts de. När allt är implementerat behöver du bara se till att allt fungerar som det ska.

Dessutom återstår det att röra en liten sak till i GA4.

Steg 1: testa innan du publicerar

Publicera inte i blindo:

1. Öppna GTM:s förhandsgranskning.
2. Klicka på flera moduler på webbplatsen.
3. Kontrollera att händelsen visas editorial_module_click (eller den händelse du har skapat).
4. Gå sedan in i GA4-taggen och kontrollera att parametrarna har värden (page_type, module_type…)

Om du ser tomma värden, kontrollera:

• Att HTML har data-attributen.
• Att listenern laddas.
• Att händelseattributet har rätt namn.
• Att GTM-variablerna läser samma namn som dataLayer skickar.
• Att triggern lyssnar på rätt händelse.

Fortsätt inte förrän detta fungerar. Här är GTM:s förhandsgranskning din vän. Använd den.

Steg 2: kontrollera DebugView

När du publicerar, kontrollera DebugView i GA4.

Du borde se din händelse komma in, men se upp: DebugView kan ibland dröja, uppdateras dåligt eller visa en annan session.

Därför, om du i tillägget Tag Assistant ser att hitten skickas korrekt, då går händelsen ut.

DebugView är användbar, men bli inte galen om den tar lite tid eller inte syns.

I mitt fall såg jag i Tag Assistant att händelsen skickades som hit till GA4, även om DebugView inte visade den på tidslinjen.

Det kan hända.

Steg 3: skapa anpassade dimensioner i GA4

För att avsluta, gå i GA4 till:

Administrera > Datavisning > Anpassade definitioner

Och skapa bara de dimensioner du verkligen kommer att använda. Det vill säga parametrarna för de händelser du ska analysera.

I mitt fall:

Namn	Omfång	Parameter
page_type	Händelse	page_type
module_type	Händelse	module_type
module_area	Händelse	module_area

Jag hade redan registrerat link_url och link_text som anpassade dimensioner från tidigare taggningar.

Steg 4: (valfritt) dokumentera namngivningen

Om projektet är stort är det nödvändigt att skapa en händelsetaggningsmatris ungefär som den här:

Händelse	Parameter	Möjliga värden	Vad den är till för
editorial_module_click	page_type	home, category, subcategory, tag	Typ av mall
editorial_module_click	module_type	featured, latest, sidebar_popular	Typ av modul
editorial_module_click	module_area	main, sidebar, bottom	Visuell zon

På så sätt, när du om två månader behöver lägga till en annan modul, uppfinner du inget nytt, utan följer bara systemet utan att behöva tänka om eller omplanera.

Och där är det, nu är vi klara.

Om du har följt den manuella vägen, grattis. Det har kostat dig lite.

Om du har följt AI-vägen undrar du kanske om du verkligen är klar. Och ja, svaret är ja. Lite överraskande, eller hur?

Typiska fel

Kom igen, låt oss samla ihop alla som nämnts här och som vi alla har drabbats av någon gång.

Skapa för många händelser

Fel:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Bättre cta_click   med parametrar.

Bero på CSS-klasser

Fel:

Om användaren klickar på .boton-verde-grande…

I morgon ändrar du designen och hej då mätning.

Bättre att lägga till data-attribut: data-analytics-event="cta_click"

Inte testa i GTM

Att publicera utan att testa är att spela roulette. Använd alltid Förhandsgranskning.

Registrera för många dimensioner i GA4

Gör inte varje parameter till en anpassad dimension.

Börja enbart med dem du ska använda för analys. Resten kan vänta och, om du ser att du verkligen behöver det, lägger du till det senare.

Byta namn mitt i processen

Om du använder module_type använd det alltid likadant.

Byt inte till:

• module-type
• moduleType
• tipo_modulo

Varken mitt i processen eller i framtiden. Det verkar som en bagatell, men det kommer att komplicera analysen när du jämför tidsperioder med båda händelserna..

Snabb sammanfattning och slutsatser

Låt oss gå igenom den manuella huvudprocessen, som är denna:

1. Definiera vad du vill veta.
2. Skapa en återanvändbar händelse.
3. Definiera få parametrar.
4. Lägg till data-*-attribut på viktiga länkar.
5. Använd AI för att granska och ändra mallar.
6. Skapa en listener i GTM.
7. Skapa datalager-variabler.
8. Skapa en trigger för anpassad händelse.
9. Skapa en GA4-tagg.
10. Testa i Tag Assistant.
11. Publicera.
12. Registrera bara de nödvändiga dimensionerna i GA4.

Och, som du har sett, är det mycket lätt att skala ner om du ber din vän ChatGPT om hjälp.

Detta, som skulle ta timmar att göra manuellt, har jag fått på lite mer än 30 minuter att fungera.  

Det känns som magi när du testar det. På riktigt.

Och jag lämnar dig med ett par rekommendationer för att avsluta:

Att mäta händelser handlar inte om att ha många eller alla data, utan om att få information för att fatta beslut. Och för det behöver du bara några.

AI ersätter inte ditt mätomdöme -det som säger vilka data du ska mäta- men den sparar en enorm mängd mekaniskt arbete och framför allt hjälper den dig att behålla konsekvens. 

Och detta, i stora projekt, är rent guld. Slösa inte bort det.