Click Element i GTM: en svært nyttig variabel

Her har vi en av de innebygde klikkvariablene i Google Tag Manager som ved første øyekast kan virke lite nyttig.

Særlig hvis du har prøvd å bruke den basert på forhåndsvisningsmodus i GTM og det ikke har fungert.

Det er normalt, fordi denne modusen kan vise enkelte begrepsfeil som kan føre deg på villspor hvis du ikke setter deg godt inn i saken.

Derfor vil jeg i denne artikkelen snakke litt mer om denne variabelen, som kan redde oss ut av en knipe mer enn én gang.

Det finnes riktignok en litt mer teknisk del -den som handler om CSS-selektorer-, men jeg går ikke inn på de mest avanserte mulighetene funksjonen gir, bare de vanligste bruksområdene der jeg har hatt nytte av den.

Men la oss begynne fra starten.

Hva variabelen Click Element i GTM er: definisjon

Vel, det er en variabel som returnerer elementet en bruker klikker på når vedkommende navigerer på nettstedet.

Du hadde sannsynligvis allerede gjettet det bare ut fra navnet, men nå er det bekreftet.

Denne variabelen vises når en bestemt auto-listener i GTM er aktiv, noe den ikke alltid er. Når vi starter med en ny container, er den faktisk ikke aktiv, men slapp av: du vil straks se at det er ekstremt enkelt å aktivere den.

Når denne listeneren er aktiv og en bruker klikker på en lenke eller et element på nettstedet vårt, sendes informasjon om dette klikket til Data Layer. Mer konkret disse verdiene:

• gtm.element
• gtm.elementClasses
• gtm.elementTarget
• gtm.elementUrl
• gtm.elementId

Du kan kontrollere det i forhåndsvisningen:

Det fine er at du kan få tilgang til hver av dem gjennom forhåndsdefinerte variabler i GTM, som jeg forklarer nå.

En ting til: alle disse verdiene er tekststrenger, bortsett fra gtm.element, som er et objekt.

Som jeg sa i innledningen, kan vi noen ganger se noe slikt når vi ser på egenskapene i forhåndsvisningen:

Og nei, til tross for det du ser der, er det ikke en streng, men et objekt.

Et objekt som returnerer alle attributtene til elementet, for eksempel:

• Href: URL-en (hvis det er en lenke; ikke hvis det er et annet element)
• Title
• Elementets tekst

De vises ikke i forhåndsvisningen, men er tilgjengelige hvis vi trenger dem.

Bra, jeg vet ikke om du allerede har fått en idé om mulighetene denne variabelen gir ut fra det jeg har forklart så langt, men hvis ikke, viser jeg deg noen.

Viktigste bruksområder

I dag finnes det to hovedscenarioer der Click Element har vært svært nyttig for meg:

Det første er når du vil måle klikk på ett eller flere elementer på nettstedet ditt som ikke har noen ID eller noen class.

Dette er den mest åpenbare bruken og den jeg går nærmere inn på som eksempel i denne artikkelen.

Det andre er når du trenger å måle klikk på et element som inneholder flere underelementer.

Tenk på knappen for å legge i handlekurven i en ecommerce, der det er svært vanlig med en div som omslutter en span med ikonet og en annen span med knappeteksten.

Og det du vil måle er selvfølgelig klikket når brukeren klikker på en hvilken som helst av dem.

Uten å gå like mye i detalj som i forrige tilfelle forklarer jeg senere hvordan.

Hvordan bruke variabelen

Nå som vi vet hva den gjør, forklarer jeg hvordan du aktiverer denne variabelen slik at du kan begynne å bruke den.

Aktivering av variabelen

Det første er å aktivere den i GTM.

For å gjøre det går du til Variabler > Innebygde variabler og aktiverer den. Aktiver samtidig alle de andre Klikk-variablene også, siden de er ganske nyttige:

Bare dette er ikke nok, fordi listeneren vi snakket om i starten vil være avslått.

Aktivering av listeneren

Men å få den i gang er så enkelt som å opprette en trigger for klikk på lenke eller klikk på hvilket som helst element:

Bare ved å opprette den vil listeneren begynne å fungere.

Og for å kontrollere det trenger du bare å:

1. Aktivere forhåndsvisningsmodus.
2. Gå til nettstedet.
3. Klikke på en hvilken som helst lenke eller et hvilket som helst element, avhengig av triggeren vi har opprettet.

Når dette er gjort, kan du se variabelen fungere som på bildet i begynnelsen:

Bra, nå som jeg har forklart all teorien, går vi over til praksis.

Bruke Click Element-variabelen i GTM

Her ser du hvordan du bruker variabelen på de to bruksområdene jeg nevnte i starten.

#1. Menylenker uten ID eller Class

Si at dette ikke er vanlig: du vil tracke hvor mange klikk som skjer på ett eller flere elementer på nettstedet ditt, og når du skal sette det opp oppdager du at de verken har ID eller noen class du kan bruke.

Og ja, du kan be IT legge dem til og vente.

Eller du kan bruke Click Element allerede i dag.

Hvis du velger den andre veien, får du her et eksempel på hvordan du kan gjøre det.

1. Velg riktig CSS-attributt for triggeren

Jeg antar at du allerede har aktivert GTM sine forhåndsdefinerte Klikk-variabler og opprettet minst én Click Element- eller Click Link-trigger.

Hvis det stemmer, er det første vi skal gjøre å finne CSS-selektoren for elementet vi vil tracke klikket på.

Du har flere alternativer. Her er et par.

1.1 Finn CSS-selektoren med elementinspektøren i Chrome

For å bruke denne metoden er det lurt å ha i det minste grunnleggende kunnskap om CSS og HTML.

Egentlig er det smart å ha denne kunnskapen for digital analytics generelt, så jo tidligere du lærer det, desto bedre.

Når det er sagt, er systemet enkelt:

1. Høyreklikk på menyelementet vi vil tracke.
2. Velg "Inspiser" i hurtigmenyen i Chrome for å åpne Inspektøren.
3. Høyreklikk på den aktuelle HTML-taggen (det vil være en "a"-tag) og velg "Kopier selektor".

Sånn, ferdig.

1.2 Finn CSS-selektoren med en Chrome-utvidelse

Hvis du ikke har noen teknisk bakgrunn og den forrige løsningen forvirrer deg, kan du bruke denne Chrome-utvidelsen (klikk på bildet for å laste den ned):

Den kan hjelpe deg med å velge elementene som interesserer deg:

Det er en freemium, med betalte planer og krav om registrering med Google. Personlig foretrekker jeg derfor metoden over, men hvis du ikke kan noe HTML kan den hjelpe.

1.3 Test

Uansett hvilken av de to metodene du har brukt, er det lurt å sjekke at vi har valgt det vi er ute etter.

Og bare det vi er ute etter.

For å kontrollere det legger jeg til en class i elementinspektøren med det jeg har kopiert ved å klikke på "+"-ikonet til høyre, slik:

Det kan være noe som color: red !important eller noe lignende som background: red !important.

Noe iøynefallende som skiller seg tydelig ut når jeg ser på nettstedet og viser meg hva jeg har valgt. På den måten ser jeg om jeg har valgt det jeg vil ha, og bare det jeg vil ha.

I dette tilfellet ser jeg at selektoren min bare velger én av de tre menylenkene, så jeg må justere selektoren litt for å fange alle tre.

Her finnes ingen triks, så kanskje dette er et godt tidspunkt å skaffe seg de CSS-grunnkunnskapene hvis du ikke har dem…

I mitt tilfelle går jeg fra:

#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a

Til:

footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a

Det vil si at jeg har fjernet referansen til det første elementet i listen, og når jeg tester får jeg dette:

Det viser at det er selektoren jeg leter etter, og at jeg kan gå videre.

Viktig: denne selektoren er svært dårlig optimalisert. Den kunne vært finpusset og gjort mye, mye enklere, men jeg ville vise at det ikke er så komplisert å få en som fungerer, selv med svært lite HTML-kunnskap.

2. Opprett trigger

Med riktig selektor kopiert åpner vi GTM og går til Triggere > Ny og jeg oppretter en slik:

Forklaring av hvert felt:

• Navn: siden den er av typen Link Click, begynner jeg alltid med "LC -".
• Aktiveres ved: "Noen klikk på lenker". Logisk: vi vil at den bare skal utløses når en bruker klikker på lenkene i footermenyen.
• Variabel: Click Element, som er den vi snakker om.
• Matching: det er nyttig å vite at typen "matcher CSS-selektor" bare vises med denne innebygde variabelen eller med "Form Element". Ikke med noen av de andre forhåndsdefinerte.
• Verdi: jeg limer inn tekststrengen jeg kopierte og testet i forrige steg.

Vi lagrer.

3. Opprett GTM-taggen

I dette tilfellet vil vi tracke et klikkevent, så vi går til Tagger > Ny og velger et "GA4-event".

Vi konfigurerer den slik:

Jeg forklarer:

GA4-konfigurasjonstagg: jeg velger den generelle, der jeg har tracking-ID-en. Hvis du av en eller annen grunn ikke har den (hva gjør du da og ser på Click Element?), opprett den først.

Eventnavn: det du vil se i GA4. Det eneste rådet jeg kan gi her er å være nøye med navngivingen og holde den konsistent med resten av eventstrukturen.

Parametere: dette punktet er viktig. Jeg legger til "link text" fordi det er slik jeg skal skille klikkene på hver av menylenkene.

Hvis jeg ikke la det til, ville jeg hatt ett event som summerte klikkene på alle menylenkene, men jeg kunne ikke segmentert og sett antallet for hver enkelt.

Husk likevel å opprette den egendefinerte dimensjonen i GA4 hvis du vil bruke dataene i rapportene:

Trigger: vi velger den vi nettopp opprettet:

Når taggen er lagret, gjenstår bare å kontrollere at den fungerer som forventet.

4. Testing

Vi må sikre at alt fungerer riktig både på GTM-nivå og Analytics-nivå, så vi går gjennom begge.

GTM-forhåndsvisning

Vi aktiverer forhåndsvisningsmodus, går til nettstedet og klikker på lenkene.

Hvis alt har gått bra, ser vi at taggen utløses når den skal:

Viktig: du kan se to Link Click-events i forhåndsvisningen for hvert klikk du gjør på lenkene, slik det skjer hos meg:

Dette skyldes mest sannsynlig at du, som meg, har aktivert tracking av utgående klikk i den forbedrede målingen i GA4.

I praksis er det ikke noe problem, fordi taggen bare utløses på ett av tvillingklikkene, og dermed sendes bare ett event til Analytics, som er riktig.

Her kan du se at den ikke utløses på det andre:

Vi legger GTM til side midlertidig.

DebugView i GA4

Vi åpner GA4-propertyen vår og går til Administrasjon > DebugView.

Og klikker igjen på elementene på nettstedet som jeg vil tracke.

Da bør vi se noe slikt:

Det forteller oss at vi registrerer eventene riktig.

For å kontrollere at parameteren sendes, klikker vi på eventet og deretter på den aktuelle parameteren. Verdien foldes ut:

Alt ser riktig ut, men husk: hvis du ikke har en egendefinert dimensjon som samler inn verdien til denne parameteren, vil du ikke kunne se dataene i rapportene, uansett hvor tydelig denne visningen viser dem.

Forstått?

Da gjenstår bare å publisere GTM-containeren for å begynne å samle inn brukernes klikk.

#2. Klikk på grupperte elementer

La oss gå videre til det nest vanligste bruksområdet.

Se på dette eksempelet på en legg-i-handlekurv-knapp:

Dette er HTML-koden:

Som du ser, er strukturen en button som grupperer to i med ikonet og teksten.

Hvis jeg aktiverer GTM-forhåndsvisningen og klikker på knappen, får jeg avhengig av hvor nøyaktig jeg klikker dette (hvis jeg klikker på ikonet):

Eller dette (hvis jeg klikker på teksten):

Selv om du ikke kan lese det, ser du at det er forskjellig.

Men selvfølgelig vil jeg tracke klikk på hvilket som helst av elementene som utgjør knappen som ett.

Da har jeg to løsninger:

• Den enkle: opprette tre regler i GTM med tre ulike events og tre ulike triggere, én for hvert element.
• Den gode: bruke Click Element og en trigger som denne:

Når du velger "Matcher CSS-selektor" og legger inn selektoren som verdi:

• Class for knappen (".add-to-cart").
• Og den for child nodes (".add-to-cart *").

Blir klikk på hvilken som helst del av knappen (ikon, tekst) også registrert.

Den er god, ikke sant?

Ja, meeeen…

Anbefalinger

Å bruke triggere med CSS-selektorer innebærer en risiko.

Særlig hvis det ikke er du som styrer koden på nettstedet.

Årsaken?

Enkelt: utviklingsteamet kan når som helst gjøre en endring i koden som gjør at selektoren din slutter å fange elementet du vil ha. Det er mer sannsynlig på nettsteder som oppdateres kontinuerlig.

I mindre grad, men det kan også skje ved en oppdatering av temaet eller en plugin i CMS-et ditt.

Er Click Element altså ikke nyttig med denne konfigurasjonen?

Jo da, den er svært nyttig, men jeg vil at du skal være klar over den største ulempen.

På den andre siden, for de mer techie, bør du vite at utviklerkonsollen gir mye mer informasjon om denne variabelen av typen objekt.

For å se det trenger du bare å åpne konsollen og skrive "dataLayer":

Nå navigerer du til elementet og folder ut alle verdiene:

Bildet viser bare noen få, men det er veldig mange.

Herfra er det opp til deg og JavaScript å få tilgang til noen flere muligheter, for eksempel å se parent node:

Og hente class til parent node med gtm.element.parentElement.className gjennom en GTM Data Layer-variabel:

Eller også bruke gtm.element.firstChild.id for å få tilgang til ID for den første child node ved å følge samme fremgangsmåte.

Konklusjon

Click Element er sannsynligvis den kraftigste forhåndsdefinerte klikkvariabelen i GTM.

Den er også den vanskeligste å bruke riktig i starten.

Men den er verdt innsatsen, fordi den i enkelte scenarioer redder livet vårt.

Vel, det er kanskje litt overdrevet sagt, men den vil i hvert fall spare oss for tid.

Jeg håper disse grunnleggende begrepene gjør at du kan få nytte av den i prosjektene dine.