Poniższy artykuł przedstawia implementację Pixela przez Menedżera tagów, w czterech podstawowych krokach. Proces implementacji wymaga podania takich informacji jak klucz API, kod kraju oraz zgody na użycie plików cookie.
Dodaj szablon GLAMI Pixel do swojego obszaru roboczego
Na początku, należy dodać szablon GLAMI Pixel do obszaru roboczego. Można go znaleźć w Galerii szablonów społeczności, dostępnej pod poniższym linkiem:
GLAMI Pixel składa się z czterech Tagów:
| PageView | Wywoływany na każdej podstronie |
| ViewContent | Wywoływany, gdy użytkownik odwiedzi kartę produktu lub kategorii |
| AddToCart | Wywoływany, gdy użytkownik doda produkt do koszyka |
| Transaction | Wywoływany po zakończeniu transakcji |
- Aby utworzyć nowy Tag, należy przejść do zakładki „Tagi” i wybrać opcję „Nowy”.
- Każdy Tag składa się z dwóch części: Konfiguracji taga, która określa, co dany tag ma wykonać oraz Reguły, która określa kiedy tag ma zostać uruchomiony.
GLAMI Pixel - PageView (zdarzenie 1/4)
Pierwszy Tag należy nazwać „GLAMI Pixel — PageView”, a jako typ wybrać „GLAMI Pixel”.
Każdy nowy Tag, wymaga kilku podstawowych informacji:
- API key - Klucz znajduje się w Dashboardzie GLAMI. Należy przejść do ustawień i wybrać GLAMI Pixel
- Country code - Jest to dwuliterowy kod określający kraj. Można go znaleźć na poniższej stronie: https://www.iban.com/country-codes.
Przykłady: Czechy -> CZ, Włochy -> IT, Rumunia -> RO - Cookie consent value - Zmienna zawierająca zgodę plików Cookie.
- Track type - Zmienna określająca, który z czterech Tagów jest właśnie zakładany.
Następnie, potrzebna jest reguła. Dla pierwszego Taga można użyć jednej z domyślnych reguł - „All Pages”. Ta reguła zapewni, że Pixel uruchomi się na każdej podstronie.
GLAMI Pixel - ViewContent (zdarzenie 2/4)
Drugi Tag należy nazwać „GLAMI Pixel — ViewContent”, a jako typ wybrać „GLAMI Pixel”.
Ponownie, należy uzupełnić podstawowe informacje:
- API key - Klucz znajduje się w Dashboardzie GLAMI. Należy przejść do ustawień i wybrać GLAMI Pixel
- Country code - Jest to dwuliterowy kod określający kraj. Można go znaleźć na poniższej stronie: https://www.iban.com/country-codes.
Przykłady: Czechy -> CZ, Włochy -> IT, Rumunia -> RO - Cookie consent value - Zmienna określająca zgodę na użycie plików Cookie.
- Track type - Zmienna określająca, który z czterech Tagów jest właśnie zakładany.
ViewContent wymaga dwóch dodatkowych informacji:
- Content type — Określa czy Tag dotyczy karty produktu, czy całej kategorii.
- Product IDs - ITEM_ID obserwowanego produktu. Podane ID powinno być zgodne z ID w feedzie produktowym.
Następnie, należy stworzyć nową regułę.
- Typ reguły - „Page View - Window Loaded”.
- Zaznacz opcję „Some Window Loaded Events”.
- Wybierz „Page URL” oraz „contains”.
Ostatnia część zależy od strony sklepu. Powinna to być fraza, która jest obecna w URL każdej karty produktu. Przykłady:
- „product” - https://MyWebsite.com/product/35256.html
- „item” - https://MyWebsite.com/item/donna/shoes/123
Reguły oraz ścieżki zmiennych warstwy danych, które widać na filmie są jedynie przykładami i muszą być dostosowane do indywidualnej strony.
GLAMI Pixel - AddToCart (zdarzenie 3/4)
Trzeci Tag należy nazwać “GLAMI Pixel - AddToCart”, a jako typ wybrać “GLAMI piXel”.
Ponownie, należy uzupełnić podstawowe informacje:
- API key - Klucz znajduje się w Dashboardzie GLAMI. Należy przejść do Ustawień i wybrać GLAMI Pixel
- Country code - Jest to dwuliterowy kod określający kraj. Można go znaleźć na poniższej stronie: https://www.iban.com/country-codes.
Przykłady: Czechy -> CZ, Włochy -> IT, Rumunia -> RO - Cookie consent value - Zmienna określająca zgodę na użycie plików Cookie.
- Track type - Zmienna określająca, który z czterech Tagów jest właśnie zakładany.
AddToCart wymaga czterech dodatkowych informacji:
- Product IDs - ITEM_ID dodanego produktu.
- Product names - Nazwa dodanego produktu.
- Product price - Cena dodanego produktu.
- Product price currency - Waluta, w której podana jest cena.
Ponieważ wyświetlenie koszyka jest często opcjonalne, reguła uruchamiająca tag powinna działać już w momencie dodania produktu do koszyka.
Może zostać do tego użyta reguła: „Click - All Elements”.
Reguły oraz ścieżki zmiennych warstwy danych, które widać na filmie są jedynie przykładami i muszą być dostosowane do indywidualnej strony.
GLAMI Pixel - Transaction (zdarzenie 4/4)
Ostatni Tag należy nazwać „GLAMI Pixel - Transaction”, a jako typ wybrać „GLAMI pixel”.
Ponownie, należy uzupełnić podstawowe informacje::
- API key - Klucz znajduje się w Dashboardzie GLAMI. Nalezy przejść do Ustawień i wybrać GLAMI Pixel
- Country code - Jest to dwuliterowy kod określający kraj. Można go znaleźć na poniższej stronie: https://www.iban.com/country-codes.
Przykłady: Czechy -> CZ, Włochy -> IT, Rumunia -> RO - Cookie consent value - Zmienna określająca zgodę na użycie plików Cookie.
- Track type - Zmienna określająca, który z czterech Tagów jest właśnie zakładany.
Transaction wymaga pięciu dodatkowych informacji:
- Transaction ID - Numer identyfikacjyny transakcji.
- Order value - Całkowita wartość transakcji.
- Order currency - Waluta, w której podana jest wartość transakcji.
- Product names - Nazwy zakupionych produktów.
- Product IDs - Numery identyfikacyjne zakupionych produktów.
Reguła może być utworzona analogicznie do taga ViewContent.
- Typ reguły - „Page View - Window Loaded”.
- Zaznacz opcję „Some Window Loaded Events”.
- Wybierz „Page URL” oraz „contains”.
Ostatnia część zależy od strony sklepu. Powinna to być fraza, która jest obecna w URL każdej karty produktu. Przykłady:
- „thank_you” - https://MyWebsite.com/order/thank_you
- „orderreceived” - https://MyWebsite.com/orderreceived/24625
Reguły oraz ścieżki zmiennych warstwy danych, które widać na filmie są jedynie przykładami i muszą być dostosowane do indywidualnej strony.
Gratulacje!
GLAMI Pixel został zaimplementowany. Aby kod zadziałał na stronie sklepu, kontener GTM musi zostać opublikowany.
Zalecane jest sprawdzenie poprawności Pixela przy pomocy trybu podglądu i debugowania.
Jak sprawdzić poprawność implementacji?
Aby w bieżącym obszarze roboczym włączyć tryb podglądu i debugowania:
- W prawym górnym rogu obszaru roboczego kliknij Podgląd.
- Wpisz adres URL swojej witryny.
- Niektóre strony lub witryny mogą nie działać prawidłowo z powodu dodatkowego parametru debugowania dodanego do adresu URL. Jeśli tak się stanie, możesz odznaczyć pole wyboru „Umieść sygnał debugowania w adresie URL”.
- Kliknij: Połącz. Witryna otworzy się w nowym oknie, a w prawym dolnym rogu zostanie podany jej stan Połączono.
- Wróć na kartę Tag Assistant i kliknij Dalej, aby uzyskać dostęp do interfejsu debugowania.
Górny pasek nawigacyjny zawiera opcje uzyskiwania dostępu do informacji o tagach, zmiennych i warstwie danych. Na lewym pasku nawigacyjnym Podsumowanie wyświetlana jest lista zdarzeń.
- Tagi: kliknij „Tagi” i sprawdź, które tagi się uruchomiły, a które nie. Kliknij dany tag, aby zobaczyć jego właściwości i powiązane reguły. Po wybraniu zdarzenia w lewej kolumnie widoczny jest na karcie „Tagi” stan jego tagów.
-
Zmienne: na karcie „Zmienne” wyświetlane są szczegółowe informacje o zmiennych w wybranym zdarzeniu, łącznie z typem zmiennej, rodzajem zwracanych danych i otrzymaną wartością. Wybierz zdarzenie na pasku nawigacyjnym po lewej stronie, by wyświetlić stan zmiennych w momencie uruchomienia zdarzenia.
- Warstwa danych: na karcie Warstwa danych wyświetli się obiekt komunikatu powiązanego z wybranym zdarzeniem dokładnie w takiej postaci, w jakiej przekazano go do warstwy danych, oraz wygląd warstwy danych po zakończeniu transakcji komunikatu. Na pasku nawigacyjnym po lewej stronie wybierz zdarzenie, aby wyświetlić stan warstwy danych w momencie uruchomienia zdarzenia.
FAQ
Czy mogę zainstalować kilka wersji Pixela na jednej domenie?
Nie. Google Tag Manager pozwala na zainstalowanie jednej instancji Pixela na jednej domenie.
Jak stworzyć nową zmienną?
W tym przykładzie, zostanie stworzona zmienna "Transaction ID".
Na początku, należy wejść w zakładkę “Zmienne” oraz wybrać opcję “Nowa”. Można ją nazwać “Transaction ID”, a jako typ zmiennej wybrać “Zmienna warstwy danych”. W nazwie warstwy danych, należy podać ścieżkę do tej informacji w warstwie danych. Np.: "ecommerce.transaction_id"
Jak sprawdzić warstwę danych?
Nalezy wejść w tryb Podglądu i debugowanie kontenerów oraz wybrac zakładkę "Warstwa danych".
W tym miejscu, widoczne są informacje zapisane w warstwie danych.
Więcej informacji dostępne jest w artykule Google Support, dostępnym pod poniższym linkiem: https://support.google.com/tagmanager/answer/6107056
Czy muszę implementowć wszystkie zdarzenia?
Nie. Zalecane jest zaimplementowanie wszystkich zdarzeń, ponieważ dostarczją one dane wykorzystywane do optymalizacji kampanii. Jednak do podtsawowego działania Pixela, wymagane są jedynie zdarzenia PageView oraz Purchase
Czy muszę podłączyć wszystkie zmienne?
Nie. Zalecane jest podłączenie wszystkich zmiennych, ponieważ dostarczją one dane wykorzystywane do optymalizacji kampanii.
Dlaczego potrzebna jest zgoda na wykorzystanie plików Cookie?
Parametr zgody umożliwia witrynom dostosowanie zachowania GLAMI Pixel na podstawie statusu zgody użytkownika na pliki cookie. Jeśli zgoda istnieje (wartość 1) lub parametr nie jest ustawiony, GLAMI przetwarza dane w całości. Jeśli nie ma zgody (wartość 0), dane będą przetwarzane anonimowo, bez wykorzystania danych o konkretnym użytkowniku.
GLAMI Pixel ma kluczowe znaczenie dla optymalnego funkcjonowania sklepu internetowego GLAMI. Dlatego teraz obsługuje parametr Consent, za pomocą którego partnerski sklep internetowy przekazuje GLAMI informacje o tym, czy użytkownik wyraził zgodę na tworzenie analitycznych plików cookie.