Strona główna / Poradniki

Reguła kliknięcia w GTM, której nie zepsuje kolejne wdrożenie

Dlaczego skopiowany selektor CSS przestaje pasować, do których atrybutów warto się przywiązać i która klasa Tailwinda po cichu unieważnia selektor.

Opublikowano 10 sierpnia 2026

Większość pracy z GTM to to samo małe zadanie w kółko: coś na stronie ma stać się zdarzeniem. Otwierasz DevTools, klikasz przycisk prawym przyciskiem, Copy selector, wklejasz do reguły kliknięcia, publikujesz. Trzy tygodnie później reguła przestaje działać i nikt tego nie zauważa, dopóki miesięczny raport nie wyda się chudy.

Dlaczego skopiowane selektory butwieją

• Są pozycyjne. „Copy selector” daje ścieżkę w rodzaju div:nth-child(3) > div:nth-child(2) > button. Wystarczy jeden dodatkowy kontener gdziekolwiek nad przyciskiem i nic już nie pasuje.
• Nazwy klas są generowane. CSS modules, styled-components i podobne narzędzia tworzą nazwy typu Button_root__x7f2q, a skrót zmienia się razem z plikiem.
• Identyfikatory też. Frameworki emitują ember1234, ośmioznakowy ciąg szesnastkowy albo zwykłą liczbę — wszystko to powstaje na nowo przy kolejnym renderze.

Do czego się przywiązać, w tej kolejności

1. Do identyfikatora, jeśli jest prawdziwy. Identyfikator to najkrótszy możliwy selektor i nie bywa niejednoznaczny. Odrzuć go, jeśli zaczyna się od cyfry, zawiera ośmioznakowy ciąg szesnastkowy albo nosi prefiks frameworka — to nie są nazwy napisane, tylko wygenerowane.
2. Do atrybutu, który istnieje po to, żeby go używać. data-gtm, data-testid, name, aria-label. Ktoś umieścił je tam celowo; przeprojektowanie zmienia wygląd i zostawia je w spokoju. Jedno zastrzeżenie: jeśli wartość zawiera { albo cudzysłów, patrzysz na nieprzetworzony szablon, który jutro będzie inny.
3. Do klas, oszczędnie. Dwie, trzy sensowne, nigdy klasy stanu — hover, active, focus, valid, invalid pojawiają się i znikają w trakcie interakcji, więc selektor na nich oparty pasuje tylko czasami.

Pułapka Tailwinda

Nazwy klas Tailwinda zawierają znaki, które w CSS coś znaczą. hover:bg-blue-500 ma dwukropek, md:w-1/2 ma dwukropek i ukośnik. Wpisane do selektora bez escapowania dają nie „selektor, który nie pasuje”, tylko nieprawidłowy CSS — a reguła kliknięcia w GTM po prostu nigdy się nie uruchamia. Nigdzie nie ma żadnego błędu.

Po zaescapowaniu jest to .hover\:bg-blue-500 i działa. To najczęstszy powód, dla którego ręcznie napisany selektor nie robi nic na nowoczesnej stronie.

Zatrzymaj się, gdy tylko jest unikalny

Najlepszy selektor to najkrótszy, który pasuje do dokładnie jednego elementu na stronie. Każdy przodek dodany ponad to jest kolejnym elementem, który ktoś może przebudować. Sprawdzanie liczby dopasowań w trakcie budowania i zatrzymanie się w chwili, gdy spadnie do jednego, daje wynik znacznie trwalszy niż pełna ścieżka od body.

Element, który kliknąłeś, to nie element, który widzi GTM

Klikasz przycisk; przeglądarka zgłasza najgłębszy element pod kursorem, a to zwykle <span> z etykietą. Click Element w GTM to właśnie ten span. Reguła napisana pod przycisk uruchomi się więc tylko wtedy, gdy ktoś trafi w margines wokół tekstu.

Rozwiązaniem jest wejście do najbliższego naprawdę klikalnego przodka — <a>, <button> albo czegoś z role="button" — i zakotwiczenie się tam. Zmienna Click Element w GTM obsługuje matches CSS selector, który testuje kliknięty element względem selektora, a selektor potomków obejmuje dzieci automatycznie.

Wyciągnięcie wartości

Reguła kliknięcia zwykle potrzebuje też liczby: ceny z klikniętej karty. To oznacza zmienną Custom JavaScript, która znajduje element ceny względem klikniętego i parsuje tekst — i tu gryzie lokalizacja. 1.648,25 TL oraz $1,648.25 muszą oba stać się 1648.25, a naiwny parseFloat zamienia pierwsze w 1. Usuń wszystko, co nie jest cyfrą ani separatorem, a potem rozstrzygnij, który separator jest dziesiętny, patrząc na to, co po nim następuje.

Sprawdź przed publikacją

1. Kliknij element i potwierdź dokładnie jedno dopasowanie na stronie.
2. Kliknij rodzeństwo — inną kartę produktu, drugi przycisk w rzędzie — i potwierdź, że nie pasuje, chyba że tak zaplanowałeś.
3. Kliknij tekst wewnątrz elementu, nie tylko jego krawędź. To test, który wyłapuje problem najgłębszego elementu.
4. Przeładuj i powtórz. Wszystko, co pasowało tylko przed przeładowaniem, pasowało do generowanego markupu.

Powiązane poradniki

• Google Tag Gateway: sprawdzenie, czy naprawdę działa
• Gdy GA4 twierdzi, że ruch przyszedł skądinąd
• Śledzenie wewnątrz osadzonego widżetu