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);
});

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

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

Kroki:

1. Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Zdarzenia klienta.

2. Obok piksela, który chcesz przetestować, sprawdź, czy w kolumnie Status jest wyświetlany status Połączono.

3. Jeśli piksel nie jest połączony, wykonaj następujące czynności:

   1. Kliknij > Wyświetl szczegóły.
   2. Opcjonalnie: Przejrzyj i uaktualnij kod piksela, a następnie kliknij Zapisz.
   3. Kliknij opcję Połącz.
   4. W oknie dialogowym potwierdzenia kliknij opcję Połącz.

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

Po zweryfikowaniu, że niestandardowy piksel jest połączony, możesz użyć asystenta Shopify Pixel Helper, aby sprawdzić, czy piksel niestandardowy wysyła dane i odbiera dane z Twojego sklepu.

Przed użyciem asystenta Shopify Pixel Helper zapoznaj się z poniższymi uwagami:

• Za pomocą asystenta Shopify Pixel Helper możesz testować tylko 1 niestandardowy piksel w danym momencie.
• Podczas działania asystenta Shopify Pixel Helper nie można wprowadzać zmian w testowanym pikselu. Aby przetestować nowe zmiany, zapisz piksel, zamknij kartę asystenta Shopify Pixel Helper, a następnie otwórz go ponownie.
• Dzienniki zdarzeń są czyszczone po przejściu na nową stronę. Jeśli na przykład dodasz produkt do koszyka, a asystent Shopify Pixel Helper zarejestruje zdarzenie product_added_to_cart, ten dziennik zostanie wyczyszczony po przejściu na nową stronę produktu lub stronę koszyka.
• Asystent Shopify Pixel Helper nie ma przycisku zamykania. Aby zatrzymać testowanie, musisz zamknąć kartę otwartą przez asystenta Shopify Pixel Helper.
• Narzędzie Shopify Pixel Helper nie jest zgodne ze sklepami typu headless commerce ani sklepami chronionymi hasłem.
• Jeśli Twój sklep online jest chroniony hasłem, rozważ usunięcie hasła do sklepu online, aby użyć narzędzia Shopify Pixel Helper.

Kroki:

1. Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Zdarzenia klienta.

2. Kliknij niestandardowy piksel, który chcesz przetestować.

3. Kliknij Testuj, aby otworzyć niestandardowy piksel na swojej stronie internetowej w celu przeprowadzenia testu.

4. 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.

5. 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.

6. 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 zewnętrznego narzędzia do zarządzania zgodami, np. aplikacji z banerem plików cookie, narzędzie to musi synchronizować zgody z platformą Shopify za pomocą interfejsu API Customer Privacy API. Jeśli zgody nie są synchronizowane z platformą Shopify, Twój piksel może nie uruchamiać się nawet po wyrażeniu zgody przez klienta. Skontaktuj się z zewnętrznym dostawcą, aby upewnić się, że zgody są synchronizowane z platformą Shopify, lub aby uzyskać dodatkową pomoc techniczną.

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.

Jeśli zauważysz różnice w liczbie śledzonych zdarzeń po migracji ze starszej konfiguracji pikseli, zapoznaj się z sekcją Rozwiązywanie problemów po migracji.

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
• Testowanie, czy zewnętrzne SDK piksela jest zainicjowane i odbiera zdarzenia

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:

1. Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Zdarzenia klienta.

2. Kliknij niestandardowy piksel, który chcesz przetestować.

3. W sekcji Kod na końcu kodu piksela dodaj kod SDK piksela udostępniony przez dostawcę zewnętrznego.

4. Kliknij opcję Zapisz.

5. Odwiedź swój sklep online, a następnie sprawdź kartę Sieć, aby upewnić się, że adres URL SDK dostawcy zewnętrznego jest pobierany.

6. 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.