Click Element w GTM: bardzo przydatna zmienna

Oto jedna z wbudowanych zmiennych kliknięcia w Google Tag Manager, która na pierwszy rzut oka może wydawać się mało przydatna.

Zwłaszcza jeśli próbowałeś używać jej na podstawie trybu podglądu GTM i nie zadziałało.

To normalne, ponieważ ten tryb może pokazywać pewne błędy pojęciowe które mogą wprowadzać w błąd, jeśli dobrze nie zgłębisz tematu.

Dlatego w tym artykule chcę opowiedzieć trochę więcej o tej zmiennej, która może nas wybawić z kłopotów niejeden raz.

To prawda, jest tu nieco bardziej techniczna część -ta związana z selektorami CSS-, ale nie będę wchodził w najbardziej zaawansowane możliwości tej funkcji, tylko w najczęstsze przypadki użycia, w których sam ją wykorzystywałem.

Ale zacznijmy od początku.

Czym jest zmienna Click Element w GTM: definicja

Otóż jest to zmienna, która zwraca element kliknięty przez użytkownika podczas przeglądania strony.

Prawdopodobnie domyśliłeś się tego już po samej nazwie, ale warto to potwierdzić.

Ta zmienna pojawia się, gdy określony auto-listener w GTM jest aktywny, a nie zawsze tak jest. W rzeczywistości przy nowym kontenerze nie jest aktywny, ale spokojnie: zaraz zobaczysz, że włączenie go jest niezwykle proste.

Gdy ten listener jest aktywny i użytkownik kliknie link lub element na naszej stronie, informacja o tym kliknięciu jest wysyłana do Data Layer. Konkretnie te wartości:

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

Możesz to sprawdzić w podglądzie:

Dobra wiadomość jest taka, że możesz uzyskać dostęp do każdej z nich za pomocą predefiniowanych zmiennych w GTM, jak zaraz wyjaśnię.

Jeszcze jedna uwaga: wszystkie te wartości są ciągami tekstowymi, z wyjątkiem gtm.element, który jest obiektem.

Problem polega na tym, że, jak mówiłem we wstępie, gdy oglądamy jego właściwości w podglądzie, czasami możemy zobaczyć coś takiego:

I nie, mimo tego, co tam widzisz, to nie jest string, lecz obiekt.

Obiekt, który zwraca wszystkie atrybuty elementu, na przykład:

• Href: URL (jeśli to link; przy innym elemencie nie)
• Title
• Tekst elementu

Nie są one pokazywane w podglądzie, ale pozostają dostępne jeśli ich potrzebujemy.

Dobrze, nie wiem, czy po tym, co dotąd wyjaśniłem, masz już obraz możliwości tej zmiennej, ale jeśli jeszcze nie, pokażę ci kilka.

Najważniejsze przypadki użycia

Obecnie są dwa główne scenariusze, w których Click Element był dla mnie bardzo przydatny:

Pierwszy to sytuacja, gdy chcesz mierzyć kliknięcia jednego lub kilku elementów swojej strony które nie mają żadnego ID ani żadnej class.

To najbardziej oczywisty przypadek i właśnie jego rozwinę jako przykład w tym artykule.

Drugi to sytuacja, gdy musisz mierzyć kliknięcie elementu który zawiera kilka podelementów.

Pomyśl o przycisku dodania do koszyka w ecommerce, gdzie bardzo często div obejmuje jeden span z ikoną i drugi span z tekstem przycisku.

I oczywiście interesuje cię zmierzenie kliknięcia, gdy użytkownik kliknie którykolwiek z nich.

Bez wchodzenia w tyle szczegółów co w poprzednim przypadku później wyjaśnię, jak to zrobić.

Jak używać zmiennej

Teraz, gdy wiemy, na czym polega, wyjaśnię, jak ją aktywować, żeby można było zacząć z niej korzystać.

Aktywacja zmiennej

Najpierw trzeba aktywować ją w GTM.

W tym celu przejdź do Zmienne > Zmienne wbudowane i ją włącz. Przy okazji włącz też wszystkie pozostałe zmienne Kliknięcia, bo są całkiem przydatne:

Samo to nie wystarczy, ponieważ listener, o którym mówiliśmy na początku, będzie wyłączony.

Aktywacja listenera

Ale uruchomienie go jest równie proste jak utworzenie triggera dla kliknięcia linku albo kliknięcia dowolnego elementu:

Samo jego utworzenie sprawi, że listener zacznie działać.

Aby to sprawdzić, wystarczy:

1. Włączyć tryb podglądu.
2. Przejść na stronę.
3. Kliknąć dowolny link lub dowolny element, zależnie od triggera, który utworzyliśmy.

Po wykonaniu tych kroków zobaczysz zmienną działającą jak na obrazku na początku:

Dobrze, skoro całą teorię mamy już za sobą, przejdźmy do praktyki.

Używanie zmiennej Click Element w GTM

Oto jak zastosować zmienną w dwóch przypadkach użycia, o których wspominałem na początku.

#1. Linki menu bez ID ani Class

Powiedz, że to nie jest częste: chcesz śledzić liczbę kliknięć jednego lub kilku elementów strony i dopiero przy konfiguracji odkrywasz, że nie mają ani ID, ani żadnej class, którą można wykorzystać.

I tak, możesz poprosić IT, żeby je dodało, i czekać.

Albo możesz użyć Click Element już dziś.

Jeśli wybierzesz tę drugą drogę, oto przykład, jak można to zrobić.

1. Wybrać właściwy atrybut CSS dla triggera

Zakładam, że masz już włączone predefiniowane zmienne Kliknięcia w GTM i utworzony co najmniej jeden trigger Click Element lub Click Link.

Jeśli tak, najpierw ustalimy selektor CSS elementu, którego kliknięcie chcemy śledzić.

Masz kilka opcji. Oto dwie.

1.1 Ustalić selektor CSS za pomocą inspektora elementów Chrome

Aby użyć tej metody, warto mieć przynajmniej podstawową znajomość CSS i HTML.

Właściwie w digital analytics ogólnie dobrze jest mieć tę wiedzę, więc im szybciej ją zdobędziesz, tym lepiej.

Poza tym system jest prosty:

1. Kliknij prawym przyciskiem myszy element menu, który chcemy śledzić.
2. Wybierz "Zbadaj" w menu kontekstowym Chrome, aby otworzyć Inspektor.
3. Kliknij prawym przyciskiem odpowiedni tag HTML (będzie to tag "a") i wybierz "Kopiuj selektor".

Gotowe, cała robota zrobiona.

1.2 Ustalić selektor CSS za pomocą rozszerzenia Chrome

Jeśli nie masz żadnego zaplecza technicznego i poprzednie rozwiązanie cię gubi, możesz użyć tego rozszerzenia Chrome (kliknij obraz, aby je pobrać):

Może pomóc ci wybrać interesujące cię elementy:

To rozszerzenie freemium, z płatnymi planami i wymagające rejestracji przez Google. Osobiście wolę więc poprzednią metodę, ale jeśli nie znasz HTML, może ci pomóc.

1.3 Test

Niezależnie od tego, którą z dwóch metod wybrałeś, warto sprawdzić, czy wybraliśmy to, co nas interesuje.

I wyłącznie to, co nas interesuje.

Aby to zweryfikować, dodaję class w inspektorze elementów z tym, co skopiowałem, klikając ikonę "+" po prawej, tak:

Może to być coś takiego jak color: red !important albo coś podobnego, na przykład background: red !important.

Coś rzucającego się w oczy, co przy sprawdzaniu strony mocno się wyróżni i pokaże mi, co zaznaczyłem. Dzięki temu widzę, czy wybrałem to, czego chcę, i tylko to, czego chcę.

W tym przypadku widzę, że mój selektor zaznacza tylko jeden z trzech linków menu, więc będę musiał lekko go zmodyfikować, aby objąć wszystkie trzy.

Tu nie ma trików, więc może to dobry moment, żeby nauczyć się tych podstaw CSS, jeśli jeszcze ich nie znasz…

W moim przypadku przechodzę od:

#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

Do:

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

Czyli usunąłem odwołanie do pierwszego elementu listy, więc po teście otrzymuję to:

Co wskazuje, że to selektor, którego szukam, i mogę iść dalej.

Ważne: ten selektor jest bardzo słabo zoptymalizowany. Można go dopracować i bardzo, bardzo uprościć, ale chciałem pokazać, że uzyskanie działającego nie jest tak trudne, nawet jeśli masz tylko minimalną wiedzę o HTML.

2. Utworzyć trigger

Po skopiowaniu prawidłowego selektora otwieramy GTM i przechodzimy do Triggery > Nowy i tworzę taki:

Wyjaśnienie każdego pola:

• Nazwa: ponieważ jest typu Link Click, zawsze zaczynam od "LC -".
• Uruchamia się przy: "Niektóre kliknięcia linków". Logiczne: chcemy, żeby uruchamiał się tylko wtedy, gdy użytkownik kliknie linki w menu footera.
• Zmienna: Click Element, o której właśnie mówimy.
• Dopasowanie: warto wiedzieć, że typ "pasuje do selektora CSS" pojawi się tylko przy tej zmiennej wbudowanej albo przy "Form Element". Przy żadnej innej predefiniowanej.
• Wartość: wklejam ciąg tekstowy skopiowany i przetestowany w poprzednim kroku.

Zapisujemy.

3. Utworzyć tag GTM

W tym przypadku, ponieważ chcemy śledzić zdarzenie kliknięcia, przechodzimy do Tagi > Nowy i wybieramy "Zdarzenie GA4".

Konfigurujemy je tak:

Wyjaśniam:

Tag konfiguracji GA4: wybieram ogólny, w którym mam ID śledzenia. Jeśli jakimś cudem go nie masz (to co robisz przy Click Element?), utwórz go najpierw.

Nazwa zdarzenia: ta, którą zobaczysz w GA4. Jedyna rada: dbaj o nazewnictwo i utrzymuj je w zgodzie z resztą swojego schematu zdarzeń.

Parametry: to ważny punkt. Dodaję "link text", ponieważ w ten sposób rozróżnię kliknięcia poszczególnych linków menu.

Gdybym go nie dodał, miałbym zdarzenie sumujące kliknięcia wszystkich linków menu, ale nie mógłbym segmentować i zobaczyć liczby dla każdego z nich.

Pamiętaj jednak, aby utworzyć wymiar niestandardowy w GA4, jeśli chcesz wykorzystać dane w raportach:

Trigger: wybieramy ten, który właśnie utworzyliśmy:

Po zapisaniu tagu pozostaje tylko sprawdzić, czy działa zgodnie z oczekiwaniami.

4. Testowanie

Musimy upewnić się, że wszystko działa prawidłowo zarówno po stronie GTM, jak i Analytics, więc sprawdzimy oba.

Podgląd GTM

Włączamy tryb podglądu, przechodzimy na stronę i klikamy linki.

Jeśli wszystko poszło dobrze, zobaczymy, że tag uruchamia się wtedy, kiedy powinien:

Ważne: możesz zobaczyć dwa zdarzenia Link Click w podglądzie dla każdego kliknięcia linku, tak jak dzieje się u mnie:

Najprawdopodobniej wynika to z tego, że, podobnie jak ja, masz włączone śledzenie kliknięć wychodzących w pomiarze rozszerzonym GA4.

W praktyce nie stanowi to żadnego problemu, ponieważ tag uruchamia się tylko przy jednym z bliźniaczych kliknięć, a więc do Analytics wysyłane jest tylko jedno zdarzenie, co jest prawidłowe.

Tutaj możesz zobaczyć, że przy drugim nie odpala:

Na chwilę zostawiamy GTM.

DebugView w GA4

Otwieramy naszą usługę GA4 i przechodzimy do Administracja > DebugView.

I ponownie klikamy elementy strony, które chcę śledzić.

Wtedy powinniśmy zobaczyć coś takiego:

Co wskazuje, że rejestrujemy zdarzenia prawidłowo.

Aby sprawdzić, czy parametr jest wysyłany, klikamy zdarzenie, a następnie odpowiedni parametr. Jego wartość się rozwinie:

Wszystko wygląda poprawnie, ale pamiętaj: jeśli nie masz wymiaru niestandardowego zbierającego wartość tego parametru, nie zobaczysz jego danych w raportach, choćby ten widok je pokazywał.

Jasne?

W takim razie pozostaje nam tylko opublikować kontener GTM aby zacząć zbierać kliknięcia użytkowników.

#2. Kliknięcia elementów grupowanych

Przejdźmy do drugiego najczęstszego przypadku użycia.

Spójrz na ten przykład przycisku dodania do koszyka:

To jego kod HTML:

Jak widać, struktura to button grupujący dwa i z ikoną i tekstem.

Jeśli włączę podgląd GTM i kliknę przycisk, zależnie od dokładnego miejsca kliknięcia otrzymam to (jeśli kliknę ikonę):

Albo to (jeśli kliknę tekst):

Choć nie możesz tego odczytać, widać, że są różne.

Ale oczywiście chcę śledzić kliknięcia dowolnego z elementów tworzących przycisk jako jedno.

Mam więc dwa rozwiązania:

• Łatwe: utworzyć w GTM trzy reguły z trzema różnymi zdarzeniami i trzema różnymi triggerami, po jednym dla każdego elementu.
• Dobre: użyć Click Element i triggera takiego jak ten:

Po wybraniu "Pasuje do selektora CSS" i wpisaniu jako wartości selektora:

• Class przycisku (".add-to-cart").
• Oraz jego węzłów potomnych (".add-to-cart *").

Kliknięcia w dowolnej części przycisku (ikona, tekst) również zostaną zarejestrowane.

Dobre, prawda?

Tak, aleeeee…

Zalecenia

Używanie triggerów z selektorami CSS ma swoje ryzyko.

Zwłaszcza jeśli nie ty zarządzasz kodem strony.

Powód?

Prosty: w każdej chwili zespół developerski może wprowadzić zmianę w kodzie która sprawi, że twój selektor przestanie obejmować element, którego potrzebujesz. To bardziej prawdopodobne na stronach, które są stale aktualizowane.

W mniejszym stopniu, ale może się też zdarzyć przy aktualizacji motywu lub któregoś pluginu w twoim CMS.

Czyli Click Element nie jest przydatny w tej konfiguracji?

Wręcz przeciwnie, jest bardzo przydatny, ale chcę, żebyś znał jego główną wadę.

Z drugiej strony, dla bardziej technicznych, warto wiedzieć, że konsola deweloperska dostarcza znacznie więcej informacji o tej zmiennej typu object.

Aby je zobaczyć, wystarczy otworzyć konsolę i wpisać "dataLayer":

Teraz przechodzisz do elementu i rozwijasz wszystkie wartości:

Obraz pokazuje tylko kilka, ale jest ich mnóstwo.

Od tego miejsca wszystko zależy od ciebie i JavaScript: możesz sięgnąć po dodatkowe możliwości, na przykład zobaczyć węzeł nadrzędny:

I uzyskać class jego węzła nadrzędnego za pomocą gtm.element.parentElement.className przez zmienną Data Layer w GTM:

Albo użyć gtm.element.firstChild.id aby uzyskać ID pierwszego węzła potomnego, stosując ten sam sposób.

Wniosek

Click Element jest prawdopodobnie najpotężniejszą predefiniowaną zmienną kliknięcia w GTM.

Jest też najtrudniejsza do poprawnego użycia na początku.

Ale warto, ponieważ w niektórych scenariuszach uratuje nam życie.

No dobrze, może to lekka przesada, ale przynajmniej oszczędzi nam czas.

Mam nadzieję, że dzięki tym podstawom będziesz potrafił wykorzystać ją w swoich projektach.