Niestandardowy kod JavaScript – zmienna, która nada elastyczność i precyzję twoim tagom w GTM

Google Tag Manager posiada wiele użytecznych typów zmiennych, z których wygodnie można korzystać bez potrzeby sięgania po języki programowania. Kliknięcie w button o określonej klasie CSS, czy zawierający konkretny tekst może być otagowane za pomocą wbudowanych zmiennych. Co jednak w sytuacji, gdy chcemy mierzyć kliknięcie w jeden z wielu elementów o takiej samej klasie albo wywoływać zdarzenie wtedy, gdy w konkretnym miejscu na stronie wyświetli się dany tekst? Wówczas z pomocą przychodzi zmienna typu „Niestandardowy kod JavaScript”.

Co to jest Niestandardowy kod Javascript w GTM?

Gdy wybierzesz ten typ zmiennej z listy dostępnych w GTM zmiennych, otworzy Ci się okienko z prostym edytorem kodu. W tym okienku możesz używać kodu javascript. Niestandardowy kod Javascript ma jednak pewne reguły:

  • Niestandardowy kod Javascript to funkcja anonimowa, która zwraca pewną wartość.
  • Nie możemy używać standardu ES6 (czyli przykładowo zamiast let czy const stosujemy var)
  • Jeżeli chcemy użyć w naszej funkcji odniesienia do zmiennej wbudowanej GTM, używamy „podwójnych wąsów” (na przykład {{Click ID}} to zmienna typu Click ID)

Jeżeli powyższe wymagania nic Ci nie mówią, nie przejmuj się. Postaram się w miarę ludzkim językiem wyjaśnić, jak taką zmienną utworzyć, bez zagłębiania się w teorię.

Tworzymy Niestandardowy kod Javascript

Wezmę jako przykład zadanie, w którym chcemy mierzyć ilość poprawnie wysłanych formularzy kontaktowych. W tym zadaniu wysłanie formularza nie powoduje zmiany adresu URL ani przeładowania strony. Wskaźnikiem poprawnego wysłania jest pojawienie się na stronie tekstu z podziękowaniem. Tego typu sytuacja występuje dość często we współczesnych formularzach kontaktowych.

Na samym początku tworzymy w okienku zmiennej Niestandardowy kod Javascript funkcję anonimową:

function() {
  // tutaj będzie zawartość funkcji
}

Następnie przechodzimy do badania kodu użytego na stronie internetowej. Wysyłamy formularz kontaktowy, aby przyjrzeć się, jak wygląda struktura DOM fragmentu z podziękowaniem. W tym celu klikamy na tekście z podziękowaniem prawym przyciskiem myszy i wybieramy „Zbadaj” aby otworzyć konsolę przeglądarki.

Po otwarciu drzewka DOM w konsoli przeglądarki możemy sprawdzić, jaką klasę lub ID ma kontener, w którym zawarte jest podziękowanie za wysłanie formularza. Będzie nam to potrzebne do dalszych kroków.

W moim przykładzie fragment odpowiedzialny za wyświetlenie komunikatu z podziękowaniem wygląda tak:

<div class="wpforms-confirmation-container-full wpforms-confirmation-scroll" id="wpforms-confirmation-28">
  <p>Dziękuję za wysłanie formularza. Skontaktuję się wkrótce.</p>
</div>

Selekcja elementów na stronie za pomocą javascript

Zagadnienie selekcji elementów na stronie za pomocą js najłatwiej będzie wyjaśnić na praktycznym ćwiczeniu. Jeśli masz otwartą konsolę przeglądarki, przejdź teraz do zakładki „Console”. Możliwe, że wyświetlają się tam różne komunikaty. Na samym dole, pod ewentualnymi komunikatami, napisz słowo „document” (bez cudzysłowów). Wciśnij enter. Po tym zabiegu powinno Ci się wyświetlić możliwe do rozszerzenia drzewko. Gdy je rozszerzysz, zobaczysz całą strukturę strony, na której obecnie jesteś. Proste? No to idziemy dalej.

Żeby wybrać konkretny element ze struktury dokumentu, musimy wybrać typ selektora. Mamy do dyspozycji między innymi poniższe metody:

  • getElementById(‚id’) – wybiera element o podanym id
  • getElementsByTagName(‚tag’) – wybiera elementy danego typu (np ul, li, div itp)
  • querySelector(‚.klasa’) – wybiera element o podanym selektorze (np. klasie CSS)
  • querySelectorAll(‚.klasa’) – wybiera wszystkie elementy o podanym selektorze (np. klasie CSS)

QuerySelector i QuerySelectorAll

Ja najczęściej korzystam z querySelector lub querySelectorAll. Oba te selektory pozwalają na wyszukanie w strukturze html elementu o podanej klasie. Pierwszy z nich wykorzystywany jest w sytuacji, gdy na stronie jest tylko jeden element ostylowany daną klasą. Drugi natomiast wyłapuje wszystkie elementy o danej klasie. Jeżeli skorzystamy z querySelector a stronie mamy więcej niż jeden element z daną klasą, to zostanie wybrany tylko pierwszy z nich.

Jeżeli używamy querySelectorAll i chcemy wybrać tylko jeden konkretny element o danej klasie, możemy w nawiasach kwadratowych podać jego numer. Licząc elementy zaczynamy od 0. Zatem, jeżeli chcemy wybrać np 3 element, to użyjemy querySelectorAll(‚.nazwa-klasy’)[2]

Zarówno w przypadku querySelector jak i querySelectorAll musimy pamiętać o tym, by nazwę klasy podać z kropką na początku. Zarówno kropkę jak i nazwę klasy należy dodatkowo objąć cudzysłowem.

Dla przypomnienia jeszcze raz podaję, jak wygląda struktura html po wysłaniu formularza w moim zadaniu:

<div class="wpforms-confirmation-container-full wpforms-confirmation-scroll" id="wpforms-confirmation-28">
  <p>Dziękuję za wysłanie formularza. Skontaktuję się wkrótce.</p>
</div>

Potwierdzenie wysłania jest zawarte w kontenerze (div) o dwóch klasach. Mogę w querySelector zawrzeć je obie, rozdzielając je przecinkiem. Żeby się upewnić, że zostanie wybrany właściwy element, w konsoli wpisuję poniższy kod:

document.querySelector('.wpforms-confirmation-container-full, .wpforms-confirmation-scroll')

Zauważ, że selektor jest umieszczony po obiekcie document. W javascript taki zapis oznacza, że dla obiektu document stosujemy metodę (kropka) querySelector. Mówiąc po ludzku, selektor wyszukuje elementy o podanych mu klasach w całym dokumencie HTML.

Pójdźmy o krok dalej. Założenie było takie, że na stronie wyświetli się konkretny komunikat. Natomiast na ten moment mamy uchwycony cały kontener. Chcemy zatem wejść do tego kontenera i wybrać zawarty w nim tekst. Możemy to zrobić w następujący sposób:

document.querySelector('.wpforms-confirmation-container-full, .wpforms-confirmation-scroll').innerText

Po wpisaniu powyższego kodu w konsoli (oczywiście z właściwymi klasami) i wciśnięciu enter, konsola powinna zwrócić nam tekst wyświetlany w kontenerze.

Piszemy Niestandardowy kod Javascript

Ponieważ nasz kod selektora robi się długi, zapiszemy go w zmiennej, by łatwiej było z niego korzystać:

var searchedString = document.querySelector('.wpforms-confirmation-container-full, .wpforms-confirmation-scroll').innerText

Tak jak pisałam wyżej, Niestandardowy kod Javascript w GTM nie obsługuje standardu ES6. Dlatego używamy var a nie const czy let.

Mamy już wszystkie elementy potrzebne do skonstruowania Niestandardowego kodu Javascript. Zanim go napiszemy, zwróćmy uwagę na pewną ważną w programowaniu kwestię a mianowicie możliwość ponownego użycia danej funkcji. Moglibyśmy bowiem w naszym Niestandardowym kodzie Javascript zamieścić porównanie, które sprawdzałoby, czy zawarty w zmiennej searchedString tekst jest równy pewnemu ciągowi znaków albo zawiera słowo „Dziękuję”. Wówczas funkcja zwracałaby „true”. Następnie utworzylibyśmy regułę, która sprawdza, czy funkcja zwróciła true i wtedy odpalała jakiś tag. Pod względem programistycznym jest to możliwe. Jednakże nasza funkcja stałaby się wtedy „jednorazowa”. Jeśli w przyszłości na danej witrynie pojawi się inny formularz, który po poprawnym wysłaniu wyświetla np. tekst „Formularz wysłany”, wtedy musielibyśmy utworzyć nową funkcję ze stosownymi warunkami albo rozbudować naszą pierwotną funkcję o kolejne warunki.

Dlatego proponuję pozostawić funkcję w prostej formie. Zadaniem takiej funkcji będzie jedynie zwracanie tekstu zawartego w kontenerze a resztą zajmie się już GTM. Wówczas, gdy rozbudujemy stronę o kolejne formularze, dodamy lub zmodyfikujemy jedynie reguły GTM-a.

Nasz Niestandardowy kod Javascript będzie mieć zatem formę:

function() {
	var searchedString = document.querySelector('.wpforms-confirmation-container-full, .wpforms-confirmation-scroll').innerText;
	return searchedString;
}

Wpisujemy powyższy kod (oczywiście z właściwymi klasami) do pola w zmiennej Niestandardowy kod Javascript. Możemy już zamknąć konsolę przeglądarki. Nie będzie nam już potrzebna. Od tej pory będziemy korzystać z konsoli GTM.

Konsola GTM

Konsola to chyba najbardziej użyteczne narzędzie w całym GTM. Pozwala nam na testowanie naszych tagów przed ich wdrożeniem na produkcję. Aby przejść do trybu testowania, który umożliwia korzystanie z konsoli, przejdź do widoku tagów. Następnie na samej górze kliknij przycisk „Podgląd”.

Aby skorzystać z konsoli, odśwież stronę na której masz zaimplementowany kontener GTM. Konsola powinna pojawić się na dole strony.

W naszym przykładzie będziemy korzystać z zakładki „Variables”. Znajdziesz ją w górnym menu konsoli GTM. W zakładce tej widać wszystkie zmienne, jakie mamy utworzone w GTM oraz wartości jakie zwracają przy różnych zdarzeniach. Przechodząc przez kroki w części „Summary” po lewej stronie będziesz widzieć, jaką wartość zwracają twoje zmienne przy kolejnych zdarzeniach na stronie.

Po wysłaniu formularza utworzona przez Ciebie zmienna powinna zwrócić tekst z podziękowaniem. Jeżeli formularz ładuje komunikat dynamicznie (bez przeładowania strony) konieczne może być utworzenie reguły „Widoczność elementu”, która sprawdzi, czy na stronie pojawił się wybrany element. Po sparametryzowaniu tej reguły, w konsoli GTM powinniśmy zobaczyć, co zwraca nasza funkcja po wysłaniu dynamicznego formularza.

Reguła i tag

Żeby móc korzystać z naszej zmiennej Niestandardowy kod Javascript, musimy utworzyć odpowiednią regułę i tag, który ta reguła uruchomi.

Wybór reguły zależy od typu formularza kontaktowego, z którym mamy do czynienia.

Jeśli po wysłaniu formularza strona nie przeładowuje się, a do adresu URL nie dochodzą żadne parametry i jedynym widocznym potwierdzeniem sukcesu jest komunikat na stronie, najlepiej będzie użyć reguły „Widoczność elementu”. W moim przykładzie mogłabym w tej regule jako metodę wyboru wybrać selektor arkusza CSS i podać jako selektor nazwę klasy kontenera z podziękowaniem. Następnie wybrałabym Niektóre zdarzenia związane z widocznością. Utworzona przez nas w tym ćwiczeniu zmienna powinna spełniać wybrany przez nas warunek. Na przykład zawierać ciąg znaków „Dziękuję”.

Jeżeli wysłanie formularza powoduje przeładowanie strony, możemy skorzystać z reguły „Wyświetlenie strony – element DOM dostępny”. Jako warunek podajemy, by nasza zmienna typu Niestandardowy kod Javascript zawierała ciąg znaków np. „Dziękuję”.

Teraz pozostaje już tylko konfiguracja tagu i testy, czy tag odpala się wtedy kiedy powinien (i tylko wtedy).

2 thoughts on “Niestandardowy kod JavaScript – zmienna, która nada elastyczność i precyzję twoim tagom w GTM”

  1. A co jeśli mamy stronę z kilkoma oknami o tej samej klasie i chcemy uzyskać wynik zależny od tego, które okno zostanie kliknięte? Ustawienie na sztywno cyfry nie wchodzi w grę. Jak to rozwiązać?

    1. Trudno odpowiedzieć bez obejrzenia strony i jej kodu ale gdy miałam tego typu sytuację to ustawiłam jako etykietę zdarzenia w GA tytuł kliknietego elementu (innerText), który w każdym elemencie był inny. Generalnie trzeba znaleźć coś, co rozróżnia elementy.

Zostaw komentarz

Twój adres email nie zostanie opublikowany.