Click Element i GTM: en mycket användbar variabel

Här har vi en av de inbyggda klickvariablerna i Google Tag Manager som vid första anblick kan verka ganska oanvändbar.

Särskilt om du har försökt använda den utifrån GTM:s förhandsgranskningsläge och det inte har fungerat.

Det är normalt, eftersom det här läget kan visa vissa begreppsmässiga fel som kan leda dig fel om du inte läser på ordentligt.

Därför vill jag i den här artikeln prata lite mer om den här variabeln, som kan rädda oss ur knipan mer än en gång.

Det finns visserligen en lite mer teknisk del -den som handlar om CSS-selektorer-, men jag går inte in på de mest avancerade möjligheterna, utan bara de vanligaste användningsfallen där jag har haft nytta av funktionen.

Men vi börjar från början.

Vad variabeln Click Element i GTM är: definition

Det är en variabel som returnerar det element som en användare klickar på när personen navigerar på webbplatsen.

Du hade förmodligen redan gissat det bara av namnet, men nu är det bekräftat.

Den här variabeln visas när en viss auto-listener i GTM är aktiv, vilket den inte alltid är. När vi börjar med en ny container är den faktiskt inte aktiv, men lugn: du kommer snart att se att den är extremt enkel att slå på.

När denna listener är aktiv och en användare klickar på en länk eller ett element på vår webbplats, skickas information om klicket till Data Layer. Mer exakt dessa värden:

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

Du kan kontrollera det i förhandsgranskningen:

Det fina är att du kan komma åt vart och ett av dem genom fördefinierade variabler i GTM, som jag förklarar nu.

En sak till: alla dessa värden är textsträngar, förutom gtm.element, som är ett objekt.

Som jag sa i inledningen kan det hända att vi ibland ser något sådant här när vi tittar på dess egenskaper i förhandsgranskningen:

Och nej, trots vad du ser där är det inte en sträng utan ett objekt.

Ett objekt som returnerar alla attribut för elementet, till exempel:

• Href: URL:en (om det är en länk; inte om det är ett annat element)
• Title
• Elementets text

De visas inte i förhandsgranskningen men är åtkomliga om vi behöver dem.

Bra, jag vet inte om du redan har fått en uppfattning om den här variabelns möjligheter utifrån det jag har förklarat hittills, men annars ger jag dig några exempel.

Viktigaste användningsfallen

I dag finns det två huvudsakliga scenarier där Click Element har varit mycket användbar för mig:

Det första är när du vill mäta klick på ett eller flera element på din webbplats som inte har något ID eller någon class.

Det här är den mest uppenbara användningen och den jag utvecklar som exempel i den här artikeln.

Det andra är när du behöver mäta klick på ett element som innehåller flera underelement.

Tänk på knappen för att lägga till i varukorgen i en ecommerce, där det är mycket vanligt med en div som omsluter en span med ikonen och en annan span med knapptexten.

Och det du vill mäta är förstås klicket när användaren klickar på någon av dem.

Utan att gå in på lika mycket detalj som i det föregående fallet förklarar jag senare hur.

Så använder du variabeln

Nu när vi vet vad den gör förklarar jag hur du aktiverar den här variabeln så att du kan börja använda den.

Aktivera variabeln

Det första är att aktivera den i GTM.

För att göra det går du till Variabler > Inbyggda variabler och aktiverar den. Passa samtidigt på att aktivera alla andra Klick-variabler också, eftersom de är ganska användbara:

Det här räcker inte, eftersom den listener vi pratade om i början kommer att vara avstängd.

Aktivera listenern

Men att starta den är så enkelt som att skapa en trigger för klick på länk eller klick på valfritt element:

Bara genom att skapa den börjar listenern fungera.

Och för att kontrollera det räcker det att:

1. Aktivera förhandsgranskningsläget.
2. Gå till webbplatsen.
3. Klicka på valfri länk eller valfritt element beroende på triggern vi har skapat.

När du har gjort det kan du se variabeln fungera som på bilden i början:

Bra, nu när jag har berättat all teori börjar vi med praktiken.

Använda GTM-variabeln Click Element

Här ser du hur du använder variabeln i de två användningsfall som jag nämnde i början.

#1. Menylänkar utan ID eller Class

Säg att det här inte är vanligt: du vill tracka hur många klick som sker på ett eller flera element på din webbplats och när du ska göra det upptäcker du att de varken har ID eller någon class du kan använda.

Och ja, du kan be IT lägga till dem och vänta.

Eller så kan du använda Click Element redan i dag.

Om du väljer den andra vägen får du här ett exempel på hur du kan göra.

1. Välj rätt CSS-attribut för triggern

Jag utgår från att du redan har aktiverat GTM:s fördefinierade Klick-variabler och skapat minst en Click Element- eller Click Link-trigger.

Om så är fallet är det första vi ska göra att ta reda på CSS-selektorn för det element vars klick vi vill tracka.

Du har flera alternativ. Här är två.

1.1 Ta reda på CSS-selektorn med Chromes elementinspektör

För att använda den här metoden är det bra att ha åtminstone grundläggande kunskaper i CSS och HTML.

Egentligen är det bra att ha dessa kunskaper för digital analytics i allmänhet, så ju tidigare du lär dig dem desto bättre.

Med det sagt är systemet enkelt:

1. Högerklicka på det menyelement som vi vill tracka.
2. Välj "Inspektera" i Chromes snabbmeny så att Inspektören öppnas.
3. Högerklicka på motsvarande HTML-tag (det är en "a"-tag) och välj "Kopiera selektor".

Klart, allt är gjort.

1.2 Ta reda på CSS-selektorn med en Chrome-tillägg

Om du saknar teknisk bakgrund och tycker att föregående lösning är rörig kan du använda det här Chrome-tillägget (klicka på bilden för att ladda ner det):

Det kan hjälpa dig att välja de element som intresserar dig:

Det är ett freemium, med betalplaner och krav på registrering med Google. Personligen föredrar jag därför den tidigare metoden, men om du inte kan något om HTML kan det hjälpa.

1.3 Testa

Oavsett vilken av de två metoderna du följde är det bra att kontrollera att vi har valt det vi vill ha.

Och bara det vi vill ha.

För att kontrollera lägger jag till en class i elementinspektören med det jag kopierade genom att klicka på "+"-ikonen till höger, så här:

Det kan vara något som color: red !important eller något liknande som background: red !important.

Något iögonfallande som sticker ut ordentligt när jag granskar webbplatsen och visar vad jag har valt. Då ser jag om jag har valt det jag vill och bara det jag vill.

I det här fallet ser jag att min selektor bara väljer en av de tre menylänkarna, så jag måste justera selektorn lite för att fånga alla tre.

Här finns inga knep, så kanske är det ett bra tillfälle att skaffa de där CSS-grunderna om du inte har dem…

I mitt fall går jag från:

#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

Till:

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 vill säga, jag har tagit bort referensen till det första objektet i listan och när jag testar får jag detta:

Det visar att det är selektorn jag letar efter och att jag kan fortsätta.

Viktigt: den här selektorn är väldigt dåligt optimerad. Den skulle kunna förbättras och göras mycket, mycket enklare, men jag ville visa att det inte är så svårt att få fram en som fungerar även om du bara har ytterst lite HTML-kunskap.

2. Skapa trigger

Med rätt selektor kopierad öppnar vi GTM och går till Triggers > Ny och jag skapar en så här:

Förklaring av varje fält:

• Namn: eftersom den är av typen Link Click börjar jag alltid med "LC -".
• Aktiveras vid: "Vissa klick på länkar". Logiskt: vi vill att den bara ska aktiveras när en användare klickar på länkarna i footermenyn.
• Variabel: Click Element, som är den vi pratar om.
• Matchning: det är bra att veta att typen "matchar CSS-selektor" bara visas med den här inbyggda variabeln eller med "Form Element". Inte med någon av de andra fördefinierade.
• Värde: jag klistrar in textsträngen som jag kopierade och testade i föregående steg.

Vi sparar.

3. Skapa GTM-taggen

I det här fallet vill vi tracka ett klickevent, så vi går till Taggar > Ny och väljer ett "GA4-event".

Vi konfigurerar den så här:

Jag förklarar:

GA4-konfigurationstagg: jag väljer den allmänna, där jag har tracking-ID:t. Om du av någon anledning inte har den (vad gör du då och tittar på Click Element?) ska du skapa den först.

Eventnamn: det namn du kommer att se i GA4. Det enda rådet jag kan ge här är att vara noga med namngivningen och hålla den konsekvent med resten av eventstrukturen.

Parametrar: den här punkten är viktig. Jag lägger till "link text" eftersom det är så jag skiljer klicken på de olika menylänkarna åt.

Om jag inte lade till det skulle jag ha ett event som summerar klicken på alla menylänkar, men jag skulle inte kunna segmentera och se antalet för varje länk.

Kom också ihåg att skapa den anpassade dimensionen i GA4 om du vill använda datan i rapporter:

Trigger: vi väljer den som vi precis skapade:

När taggen är sparad återstår bara att kontrollera att den fungerar som förväntat.

4. Testning

Vi måste se till att allt fungerar korrekt både på GTM-nivå och Analytics-nivå, så vi granskar båda.

GTM-förhandsgranskning

Vi aktiverar förhandsgranskningsläget, går till webbplatsen och klickar på länkarna.

Om allt har gått bra ser vi att taggen aktiveras när den ska:

Viktigt: du kan se två Link Click-events i förhandsgranskningen för varje klick du gör på länkarna, precis som jag gör:

Det beror med största sannolikhet på att du, liksom jag, har aktiverat tracking av utgående klick i GA4:s förbättrade mätning.

I praktiken är det inget problem, eftersom taggen bara aktiveras vid ett av de två tvillingklicken och därför skickas bara ett event till Analytics, vilket är korrekt.

Här ser du att den inte aktiveras vid det andra:

Vi lämnar GTM tillfälligt.

DebugView i GA4

Vi öppnar vår GA4-property och går till Administration > DebugView.

Och klickar igen på de element på webbplatsen som jag vill tracka.

Då bör vi se något i stil med detta:

Det visar att vi registrerar eventen korrekt.

För att verifiera att parametern skickas klickar vi på eventet och sedan på motsvarande parameter. Dess värde fälls ut:

Allt verkar korrekt, men kom ihåg: om du inte har en anpassad dimension som registrerar värdet för den parametern kan du inte se datan i rapporterna, även om den här vyn visar den.

Förstått?

Då återstår bara att publicera GTM-containern för att börja samla in användarnas klick.

#2. Klick på grupperade element

Nu tar vi det näst vanligaste användningsfallet.

Titta på det här exemplet på en lägg-i-varukorgen-knapp:

Det här är dess HTML-kod:

Som du kan se är strukturen en button som grupperar två i med ikonen och texten.

Om jag aktiverar GTM:s förhandsgranskning och klickar på knappen får jag, beroende på exakt var jag klickar, det här (om jag klickar på ikonen):

Eller det här (om jag klickar på texten):

Även om du inte kan läsa det ser du att det är annorlunda.

Men jag vill förstås tracka klicken på vilket som helst av de element som bygger upp knappen som ett enda.

Så jag har två lösningar:

• Den enkla: skapa tre regler i GTM med tre olika events och tre olika triggers, en för varje element.
• Den bra: använda Click Element och en trigger som denna:

När du väljer "Matchar CSS-selektor" och anger selektorn som värde:

• Knappens class (".add-to-cart").
• Och dess child nodes (".add-to-cart *").

Registreras även klick på vilken del av knappen som helst (ikon, text).

Den är bra, eller hur?

Ja, meeeen…

Rekommendationer

Att använda triggers med CSS-selektorer innebär en risk.

Särskilt om det inte är du som hanterar webbplatsens kod.

Anledningen?

Enkelt: utvecklingsteamet kan när som helst göra en ändring i koden som gör att din selektor slutar fånga det element du vill ha. Det är mer sannolikt på webbplatser som uppdateras kontinuerligt.

I mindre utsträckning, men det kan också hända vid en uppdatering av temat eller något plugin i ditt CMS.

Är Click Element alltså inte användbar med den här konfigurationen?

Jo, absolut, den är väldigt användbar, men jag vill att du ska känna till dess största nackdel.

Å andra sidan, för de mer techie, kan det vara bra att veta att utvecklarkonsolen ger betydligt mer information om den här variabeln av objekttyp.

För att se den behöver du bara öppna konsolen och skriva "dataLayer":

Nu navigerar du till elementet och fäller ut alla värden:

Bilden visar bara några få, men det finns massor.

Därifrån är det upp till dig och JavaScript att komma åt några ytterligare möjligheter, som att se parent node:

Och hämta dess parent node-class med gtm.element.parentElement.className via en GTM Data Layer-variabel:

Eller också använda gtm.element.firstChild.id för att komma åt ID för den första child node enligt samma metod.

Slutsats

Click Element är förmodligen den kraftfullaste fördefinierade klickvariabeln i GTM.

Det är också den svåraste att använda rätt i början.

Men den är värd besväret, eftersom den i vissa scenarier räddar livet på oss.

Ja, det är kanske lite överdrivet sagt, men åtminstone sparar den tid åt oss.

Jag hoppas att du med de här grunderna kan få verklig nytta av den i dina projekt.