Testowanie pikseli niestandardowych

Po utworzeniu piksela niestandardowego musisz go przetestować, aby upewnić się, że wysyła dane prawidłowo, gdy w Twojej witrynie występują zdarzenia.

Możesz użyć narzędzia Shopify Pixel Helper, aby sprawdzić, czy zdarzenia piksela są ładowane i czy subskrypcja zdarzeń Shopify została prawidłowo skonfigurowana. Narzędzie to pozwala przetestować niestandardowy piksel w sklepie online, aby wyświetlić zdarzenia otrzymywane w czasie rzeczywistym wraz z danymi dla tych zdarzeń.

Jeśli niestandardowy piksel integruje się z zewnętrzną platformą, która ma własne narzędzie pomocnicze do pikseli, możesz użyć zewnętrznego narzędzia pomocniczego do pikseli oprócz narzędzia Shopify Pixel Helper, aby sprawdzić, czy zdarzenia piksela są przetwarzane i odbierane przez platformę zewnętrzną. Na przykład, jeśli dodasz do sklepu niestandardowy piksel TikTok, możesz użyć zarówno narzędzia Shopify Pixel Helper, jak i TikTok Pixel Helper, aby przetestować piksel.

Możesz używać narzędzia Shopify Pixel Helper w tej samej sesji przeglądarki, co zewnętrzne narzędzie pomocnicze do pikseli, aby jednocześnie testować zdarzenia dla obu platform.

Oto skrypt piksela niestandardowego, który uruchomi wszystkie zdarzenia standardowe w piaskownicy i zapisze dane zdarzenia w konsoli. Zdarzenia standardowe będą widoczne w narzędziu Shopify Pixel Helper. Ponadto możesz subskrybować inne subskrypcje zbiorcze: all_events, all_custom_events i all_dom_events, aby odkryć wszystkie możliwości, jakie dają piksele internetowe. Odwiedź stronę API pikseli internetowych, aby uzyskać więcej informacji.

analytics.subscribe("all_standard_events", event => {
   console.log("Event data ", event?.data);
});

Na tej stronie

Upewnij się, że piksel niestandardowy jest podłączony

Przed przetestowaniem piksela niestandardowego upewnij się, że jest on podłączony.

Kroki:

Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Zdarzenia klienta.
Obok piksela, który chcesz przetestować, sprawdź, czy w kolumnie Status jest wyświetlany status Połączono.
Jeśli piksel nie jest podłączony, kliknij ..., a następnie kliknij Połącz.

Testowanie piksela niestandardowego za pomocą narzędzia Shopify Pixel Helper

Gdy sprawdzisz, czy niestandardowy piksel jest podłączony, możesz użyć narzędzia Shopify Pixel Helper, aby sprawdzić, czy piksel niestandardowy wysyła i odbiera dane sklepu. Jednocześnie możesz testować tylko jeden piksel niestandardowy.

Kroki:

Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Zdarzenia klienta.
Kliknij niestandardowy piksel, który chcesz przetestować.
Kliknij Testuj, aby otworzyć niestandardowy piksel na swojej stronie internetowej w celu przeprowadzenia testu.
Opcjonalnie: W zależności od ustawień zgody w Twoim sklepie i ustawień prywatności klienta piksela niestandardowego w oknie dialogowym Pomocnik pikseli może pojawić się komunikat Piksel oczekuje na zgodę. Wykonaj jedną z poniższych czynności, aby kontynuować testowanie:
- Zaakceptuj śledzenie na banerze plików cookie sklepu lub w preferencjach.
- Kliknij opcję Udziel zgody, aby kontynuować test.
- Jeśli piksel nadal się nie ładuje, sprawdź ustawienia prywatności klienta.
Aby sprawdzić, które zdarzenia się ładują, odwiedź każdą stronę, na której chcesz przetestować piksel, i w oknie dialogowym Pomocnik pikseli sprawdź sekcję Otrzymane zdarzenia, aby upewnić się, że zdarzenie zostało pomyślnie zasubskrybowane i funkcja zwrotna zadziałała prawidłowo:
- Przejdź na nową stronę, 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 kasy, aby przetestować zdarzenie checkout_started.
- Wprowadź informacje o wysyłce przy realizacji zakupu, aby sprawdzić, czy zdarzenie checkout_shipping_info_submitted zastępuje zdarzenie checkout_started.
- Sfinalizuj 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.
Aby wyświetlić otrzymane dane zdarzenia, kliknij , aby rozwinąć okno dialogowe Pomocnika pikseli.

Przeglądanie sekcji Otrzymane zdarzenia

Gdy testujesz, które zdarzenia są ładowane w kroku 5, w sekcji Otrzymane zdarzenia okna dialogowego Pomocnik pikseli wyświetlany jest jeden z następujących statusów:

Zielona kropka oznacza, że zdarzenie zostało pomyślnie zasubskrybowane, a funkcja zwrotna zadziałała prawidłowo.
Czerwona kropka oznacza, że zdarzenie zostało pomyślnie zasubskrybowane, ale funkcja zwrotna nie powiodła się. Dowiedz się, jak rozwiązywać problemy z pikselem niestandardowym.
Pomocnik pikseli wyświetla nieprzechwycone błędy, które występują na najwyższym poziomie lub w funkcji zwrotnej. Błędy najwyższego poziomu są wyświetlane podczas ładowania pomocnika pikseli. Komunikaty o błędach funkcji zwrotnej są wyświetlane po kliknięciu w celu rozwinięcia zdarzenia oznaczonego czerwoną kropką.
Poniższy przykładowy kod zawiera błąd 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 działać częściowo.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Aby dowiedzieć się więcej o naprawianiu błędów JavaScript, zapoznaj się z sekcją Rozwiązywanie problemów z JavaScript.

Rozwiązywanie problemów z niestandardowym pikselem

Jeśli podczas testowania piksel nie ładuje się ani nie uruchamia, a dane zdarzeń i kod piksela zostały już sprawdzone pod kątem błędów, wypróbuj poniższe metody rozwiązywania problemów.

Sprawdź ustawienia prywatności klientów

Jeśli podczas testowania piksel nie ładuje się ani nie uruchamia, przyczyną mogą być ustawienia prywatności klientów, które uniemożliwiają jego załadowanie.

W panelu administracyjnym Shopify przejdź do opcji Ustawienia > Prywatność klientów, aby sprawdzić ustawienia prywatności klientów w panelu administracyjnym Shopify, które mogą mieć zastosowanie do Twojej sesji. W zależności od ustawień prywatności klientów wykonaj następujące kroki:

Jeśli masz ustawienia prywatności klientów, które wymagają zgody w Twoim regionie, upewnij się, że zgoda została udzielona za pośrednictwem banera plików cookie.
Jeśli nie masz żadnych ustawień prywatności klientów, które blokują ładowanie piksela, wyczyść pliki cookie przeglądarki, aby zresetować baner plików cookie i udzielić zgody.

Jeśli używasz narzędzia zewnętrznego do zarządzania zgodami, skontaktuj się z jego dostawcą w celu uzyskania pomocy technicznej.

Dodatkowe metody rozwiązywania problemów

Jeśli nadal nie jest jasne, czy niestandardowy piksel jest prawidłowo zasubskrybowany do zdarzenia klienta, wypróbuj następujące metody rozwiązywania problemów:

Wyczyść pliki cookie w przeglądarce.
Jeśli testujesz zdarzenie standardowe, zapoznaj się z opisami zdarzeń standardowych w dokumentacji dla programistów Shopify, aby upewnić się, że wykonujesz kroki wymagane do uruchomienia zdarzenia.

Testowanie za pomocą zewnętrznego pomocnika piksela

SDK (zestaw do tworzenia oprogramowania) piksela zawiera narzędzia umożliwiające pikselowi zbieranie informacji o zachowaniach klientów. Możesz użyć pomocnika piksela od dostawcy zewnętrznego, aby przetestować następujące zachowania piksela i upewnić się, że SDK piksela działa zgodnie z oczekiwaniami:

Testowanie, czy zewnętrzne SDK piksela jest załadowane

Kroki sprawdzania karty Sieć zależą od używanej przeglądarki internetowej. Aby na przykład dowiedzieć się, jak sprawdzić kartę Sieć w przeglądarce Google Chrome, zapoznaj się z dokumentacją Chrome dla programistów Sprawdzanie aktywności sieciowej.

Aby sprawdzić, czy zewnętrzne SDK piksela jest załadowane, musisz najpierw pobrać od zewnętrznego dostawcy kod adresu URL SDK, aby móc dodać go do kodu piksela. Aby uzyskać pomoc techniczną, skontaktuj się z zewnętrznym dostawcą piksela.

Kroki:

Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Zdarzenia klienta.
Kliknij niestandardowy piksel, który chcesz przetestować.
W sekcji Kod na końcu kodu piksela dodaj kod SDK piksela udostępniony przez dostawcę zewnętrznego.
Kliknij opcję Zapisz.
Odwiedź swój sklep online, a następnie sprawdź kartę Sieć, aby upewnić się, że adres URL SDK dostawcy zewnętrznego jest pobierany.
Opcjonalnie: Jeśli zewnętrzne SDK piksela nie ładuje się, sprawdź, czy w piaskownicy nie występują błędy wykonania JavaScript. Na przykład w przeglądarce Chrome możesz wybrać określoną ramkę iFrame, aby przejrzeć jej logi konsoli, a następnie zawęzić logi do konkretnego testowanego piksela. Aby dowiedzieć się więcej o sprawdzaniu błędów wykonania JavaScript w przeglądarce Chrome, zapoznaj się z jej dokumentacją Debugowanie kodu JavaScript.

Jeśli zewnętrzne SDK piksela nie ładuje się podczas testowania, skontaktuj się z zewnętrznym dostawcą piksela, aby uzyskać pomoc techniczną.

Inne testy zewnętrznego SDK piksela

Aby sprawdzić, czy zewnętrzne SDK piksela jest zainicjowane lub zbiera zdarzenia, zapoznaj się z dokumentacją zewnętrznego dostawcy piksela.

Aby sprawdzić, czy SDK piksela zbiera zdarzenia, może być konieczne sprawdzenie karty Sieć w przeglądarce. Kroki sprawdzania karty Sieć zależą od używanej przeglądarki internetowej. Aby na przykład dowiedzieć się, jak sprawdzić kartę Sieć w przeglądarce Google Chrome, zapoznaj się z dokumentacją Chrome dla programistów Sprawdzanie aktywności sieciowej.