Testowanie niestandardowych pikseli
Po utworzeniu niestandardowego piksela musisz go przetestować, aby upewnić się, że piksel wysyła dane poprawnie, gdy w Twojej witrynie występują zdarzenia.
Możesz użyć narzędzia Shopify Pixel Helper, aby sprawdzić, czy zdarzenia piksela ładują się i czy zdarzenia Shopify zostały poprawnie zasubskrybowane. Shopify Pixel Helper umożliwia przetestowanie niestandardowego piksela w sklepie online w celu wyświetlenia zdarzeń odbieranych w czasie rzeczywistym wraz z danymi dotyczącymi tych zdarzeń.
Jeśli Twój niestandardowy piksel integruje się z platformą firmy zewnętrznej, która ma własne narzędzie do obsługi pikseli, możesz skorzystać z niego dodatkowo oprócz narzędzia Shopify Pixel Helper, aby sprawdzić, czy zdarzenia piksela są przetwarzane i odbierane przez platformę firmy zewnętrznej. Na przykład, jeśli dodasz niestandardowy piksel TikTok w swoim sklepie, możesz użyć zarówno narzędzia Shopify Pixel Helper, jak i TikTok Pixel Helper, aby przetestować swój piksel.
Narzędzia Shopify Pixel Helper możesz używać w tej samej sesji przeglądarki, co narzędzia do obsługi pikseli firmy zewnętrznej, aby przetestować zdarzenia dla obu platform jednocześnie.
Oto skrypt niestandardowego piksela, który będzie uruchamiał wszystkie standardowe zdarzenia w środowisku testowym i zapisywał dane zdarzenia w konsoli. Standardowe zdarzenia będą widoczne w narzędziu Shopify Pixel Helper. Ponadto możesz zapisać się na inne subskrypcje zbiorcze, all_events
, all_custom_events
i all_dom_events
, aby odkryć wszystko, co mogą zapewnić piksele internetowe. Więcej informacji znajduje się w interfejsie API pikseli internetowych.
Na tej stronie
Upewnij się, że piksel niestandardowy jest połączony
Przed przetestowaniem niestandardowego piksela upewnij się, że jest on podłączony.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Ustawienia > Zdarzenia klienta.
- Obok piksela, który chcesz przetestować, sprawdź, czy ma on status Połączono wyświetlany w kolumnie Status.
- Jeśli piksel nie jest połączony, kliknij ..., a następnie kliknij opcję Połącz.
Przetestuj niestandardowy piksel za pomocą narzędzia Shopify Pixel Helper
Po sprawdzeniu, czy niestandardowy piksel jest podłączony, możesz użyć narzędzia Shopify Pixel Helper, aby przetestować, czy niestandardowy piksel przesyła i odbiera dane sklepu. Jednocześnie można testować jeden niestandardowy piksel.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Ustawienia > Zdarzenia klienta.
- Kliknij niestandardowy piksel, który chcesz przetestować.
- Kliknij opcję Testuj, aby otworzyć niestandardowy piksel w witrynie w celu przetestowania.
-
Opcjonalnie: W zależności od ustawień zgody w sklepie i ustawień prywatności klienta niestandardowego piksela w oknie dialogowym Narzędzie do obsługi pikseli może wyświetlać się informacja Piksel oczekuje na zgodę. Aby kontynuować testowanie, wykonaj jedną z poniższych czynności:
- Zaakceptuj śledzenie na banerze plików cookie lub w preferencjach sklepu.
- Kliknij opcję Wyraź zgodę na kontynuację testu.
- Jeśli Twój piksel nadal się nie ładuje, sprawdź ustawienia prywatności klienta.
-
Aby sprawdzić, które zdarzenia są ładowane, wejdź na każdą stronę, dla której chcesz przetestować piksel, i przejrzyj okno dialogowe Narzędzie do obsługi pikseli, aby upewnić się, że zdarzenie zostało subskrybowane i funkcja wywołania zwrotnego została wykonana w sekcji Odebrane zdarzenia:
- Przejdź do nowej strony, aby przetestować zdarzenie page_viewed.
- Kliknij produkt, aby przetestować zdarzenie product_viewed.
- Dodaj produkt do koszyka, aby przetestować zdarzenie product_added_to_cart.
- Przejdź do strony realizacji zakupu, aby przetestować zdarzenie checkout_started.
- Wprowadź informacje o wysyłce na stronie realizacji zakupu, aby sprawdzić, czy zdarzenie checkout_shipping_info_submitted zastępuje zdarzenie checkout_started.
- Dokończ realizację zakupu, aby sprawdzić, czy zdarzenie checkout_completed zastępuje zdarzenie checkout_shipping_info_submitted. Dowiedz się więcej o składaniu zamówienia testowego.
W celu wyświetlenia danych odebranego zdarzenia kliknij przycisk Maksymalizuj, aby rozwinąć okno dialogowe narzędzia do obsługi pikseli.
Wyświetlanie sekcji Odebrane zdarzenia
Podczas sprawdzania w kroku 5, które zdarzenia są ładowane, w sekcji Odebrane zdarzenia w oknie dialogowym Narzędzie do obsługi pikseli wyświetli się jeden z następujących statusów:
- Zielona kropka wskazuje, że zdarzenie zostało pomyślnie subskrybowane i funkcja wywołania zwrotnego została wykonana.
- Czerwona kropka wskazuje, że zdarzenie zostało pomyślnie subskrybowane, ale funkcja wywołania zwrotnego nie została wykonana. Dowiedz się, jak rozwiązać problemy z niestandardowym pikselem.
- Pixel Helper wyświetla niewychwycone błędy, które wystąpiły na najwyższym poziomie lub w funkcji wywołania zwrotnego. Błędy najwyższego poziomu są wyświetlane po wczytaniu narzędzia Pixel Helper. Komunikaty o błędach funkcji wywołania zwrotnego są wyświetlane po kliknięciu opcji rozwijania dla wydarzenia z czerwoną kropką.
- Poniższy przykład kodu zawiera błąd funkcji wywołania zwrotnego i błąd najwyższego poziomu. W zależności od tego, gdzie znajduje się błąd najwyższego poziomu, piksel może częściowo działać.
Aby dowiedzieć się więcej o naprawianiu błędów JavaScript, odwiedź stronę Rozwiązywanie problemów z JavaScript.
Rozwiązywanie problemów z niestandardowym pikselem
Jeśli piksel nie ładuje się ani nie uruchamia podczas testowania, a dane zdarzeń i kod piksela zostały już sprawdzone pod kątem błędów, wypróbuj poniższe rozwiązania.
Sprawdź ustawienia prywatności klienta
Jeśli piksel nie ładuje się lub nie uruchamia podczas testowania, być może jego załadowanie uniemożliwiają ustawienia prywatności klienta.
W panelu administracyjnym Shopify przejdź do sekcji Ustawienia > Prywatność klienta, aby sprawdzić ustawienia prywatności klienta w panelu administracyjnym Shopify, które mogą mieć zastosowanie do Twojej sesji. W zależności od ustawień prywatności klienta, należy wykonać następujące kroki:
- Jeśli masz ustawienia prywatności klienta, które wymagają zgody w Twoim regionie, upewnij się, że taka zgoda została wyrażona za pośrednictwem banera plików cookie.
- Jeśli nie masz żadnych ustawień prywatności klienta, które blokują ładowanie piksela, wyczyść pliki cookie przeglądarki, aby zresetować baner plików cookie i wyrazić zgodę.
Jeśli korzystasz z narzędzia firmy zewnętrznej do zarządzania zgodą, skontaktuj się z zewnętrznym dostawcą w celu uzyskania pomocy.
Rozwiązywanie dodatkowych problemów
Jeśli nadal nie jest jasne, czy Twój niestandardowy piksel prawidłowo subskrybuje zdarzenie klienta, wypróbuj następujące metody rozwiązania tego problemu:
- Wyczyść pliki cookie w swojej przeglądarce.
- Je śli testujesz standardowe zdarzenie, zapoznaj się z opisami standardowych zdarzeń w dokumentacji dla programistów Shopify, aby upewnić się, że wykonujesz kroki wymagane do wyzwolenia zdarzenia.
Testowanie za pomocą narzędzia do obsługi pikseli firmy zewnętrznej
Zestaw SDK (Software Development Kit) piksela zawiera narzędzia, dzięki którym piksel może gromadzić informacje o zachowaniu klientów. Aby przetestować poniższe zachowania piksela i upewnić się, że zestaw SDK piksela działa zgodnie z oczekiwaniami, możesz użyć narzędzia do obsługi pikseli firmy zewnętrznej:
- Sprawdź, czy SDK piksela firmy zewnętrznej został załadowany
- Sprawdź, czy SDK piksela firmy zewnętrznej został zainicjowany i odbiera zdarzenia
Sprawdź, czy SDK piksela firmy zewnętrznej został załadowany
Kroki sprawdzania karty sieci zależą od przeglądarki internetowej, z której korzystasz. Na przykład, aby dowiedzieć się, jak sprawdzić kartę sieci w przeglądarce Google Chrome, zapoznaj się z dokumentacją Chrome dla programistów dotyczącą badania aktywności sieci.
Aby sprawdzić, czy zestaw SDK pikseli firmy zewnętrznej został załadowany, musisz najpierw pobrać kod dostawcy zewnętrznego dla adresu URL SDK, aby można go było dodać do kodu piksela. Aby uzyskać pomoc, skontaktuj się z zewnętrznym dostawcą pikseli.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Ustawienia > Zdarzenia klienta.
- Kliknij niestandardowy piksel, który chcesz przetestować.
- W sekcji Kod wprowadź SDK piksela dostarczony przez dostawcę zewnętrznego na końcu kodu piksela.
- Kliknij opcję Zapisz.
- Odwiedź swój sklep online, a następnie sprawdź kartę sieci, aby upewnić się, że pobierany jest adres URL SDK dostawcy zewnętrznego.
- Opcjonalnie: Jeśli SDK piksela firmy zewnętrznej się nie ładuje, sprawdź w środowisku testowym, czy nie wystąpiły błędy wykonania JavaScript. Na przykład w Chrome możesz wybrać określoną iFrame, aby przejrzeć dzienniki konsoli, a następnie zawęzić logi do określonego piksela, który testujesz. Aby dowiedzieć się więcej o sprawdzaniu błędów wykonania JavaScript w Chrome, zapoznaj się z dokumentacją Chrome dotyczącą debugowania JavaScript.
Jeśli SDK piksela firmy zewnętrznej nie ładuje się podczas testowania, skontaktuj się z zewnętrznym dostawcą pikseli, aby uzyskać pomoc.
Testowanie SDK piksela innego dostawcy
Sprawdź, czy SDK piksela firmy zewnętrznej został zainicjowany lub gromadzi zdarzenia, zapoznaj się dokumentacją zewnętrznego dostawcy pikseli.
Aby sprawdzić, czy SDK piksela gromadzi zdarzenia, możesz zostać poproszony o sprawdzenie karty sieci przeglądarki. Kroki sprawdzania karty sieci zależą od przeglądarki internetowej, z której korzystasz. Na przykład, aby dowiedzieć się, jak sprawdzić kartę sieci dla przeglądarki Google Chrome, zapoznaj się z dokumentacją Chrome dla programistów dotyczącą badania aktywności sieci.