Odkrycia podczas Rozwoju Aplikacji Pixelowej na Shopify
Rozwój aplikacji pixelowej na Shopify może przynieść wiele niespodzianek. Zarządzanie pikselami na platformie Shopify obejmuje dwie metody: Piksele Niestandardowe i Piksele Aplikacji. Obie metody opierają się na zdarzeniach opisanych w dokumentacji Shopify i są wykonywane w środowisku testowym. Jednak różnice między tymi środowiskami mogą wpływać na wdrożenie i funkcjonalność aplikacji. Oto nasza podróż i wyzwania, z jakimi się spotkaliśmy podczas tworzenia aplikacji pixelowej na Shopify.
Różnice Między Pikselami Niestandardowymi a Pikselami Aplikacji
Podczas naszych badań odkryliśmy, że Shopify nie definiuje jasno różnic między dwoma środowiskami testowymi: ścisłym środowiskiem testowym dla Pikseli Web Aplikacji i środowiskiem testowym lex dla Pikseli Web Niestandardowych. W rezultacie testowanie zdarzeń w Pikselach Web Niestandardowych niekoniecznie oznacza, że będą one działać w Pikselach Web Aplikacji. Kluczowe różnice, które zidentyfikowaliśmy, to:
- Środowisko Testowe Lex: Umożliwia wstrzykiwanie zewnętrznego JavaScriptu i tworzenie obiektów skryptów na stronie.
- Ścisłe Środowisko Testowe: Nie pozwala na wstrzykiwanie zewnętrznego JavaScriptu ani tworzenie obiektów skryptów.
Problemy i Rozwiązania
Główne problemy, z jakimi się spotkaliśmy, wynikały z różnic w możliwościach wstrzykiwania skryptów między dwoma środowiskami testowymi. W środowisku lex, gdzie można wstrzykiwać zewnętrzne skrypty, nie wystąpiły istotne problemy z wdrożeniem. Jednak ścisłe środowisko testowe stanowiło znaczne wyzwanie z powodu braku możliwości wstrzykiwania zewnętrznych skryptów.
Przykład Problemu:
- Dostawcy pikseli często mają swoje skrypty, które wykonują akcje na stronie. Te skrypty mogą być wstrzykiwane i używane w środowisku lex, ale nie w środowisku ścisłym.
Rozwiązania Stosowane przez Inne Aplikacje:
- Inżynieria Wsteczna Bibliotek: Niektóre aplikacje wykonują żądanie fetch do określonego adresu zamiast używać oryginalnych skryptów. Jednak podejście to jest podatne na zmiany ze strony dostawcy skryptów, co może spowodować przestanie działania aplikacji.
- Wykorzystanie Klasy i ID w Szablonie Shopify: Inne aplikacje wstrzykują JavaScript, który nasłuchuje zdarzeń na przyciskach. Problemy tutaj obejmują brak dostępu do danych takich jak cena/ilość, brak wsparcia dla niestandardowych motywów oraz brak dostępu do procesu zakupu.
Nasze Rozwiązanie
Musieliśmy podejść do problemu kreatywnie, uwzględniając specyficzne wymagania naszych klientów oraz ograniczenia Shopify:
-
Wstrzykiwanie JavaScriptu na Stronie:
- Na stronach sklepu wstrzykiwaliśmy JavaScript, który ładował kod klienta i nasłuchiwał zmian w localStorage.
- Zdarzenie Shopify uruchamiałoby się i wypełniało localStorage danymi, na które nasz skrypt klienta następnie reagował.
-
Obsługa Procesu Zakupu:
- Checkout stanowił większe wyzwanie, ponieważ skrypty nie mogą być tam wstrzykiwane. Musieliśmy zakodować bezpośrednie żądanie do serwera klienta, co było jedynym sposobem na obsługę tego etapu procesu zakupu.
Przywileje Gigantów
Warto zauważyć, że jedyne firmy, które mogą wstrzykiwać swoje JavaScript do checkoutu, to Google i Facebook. Pozostali muszą znaleźć alternatywne rozwiązania, często wymagające kreatywności i inżynierii wstecznej.
Wnioski
Tworzenie aplikacji pixelowej na Shopify to proces pełen niespodzianek i wyzwań, szczególnie w obliczu różnic w środowiskach testowych i ograniczeń w wstrzykiwaniu skryptów. Dzięki naszym wysiłkom i kreatywnym rozwiązaniom udało nam się pokonać te przeszkody, zapewniając funkcjonalność aplikacji zarówno na stronach sklepu, jak i w checkout. Nasze doświadczenia podkreślają znaczenie ciągłego eksplorowania możliwości i elastycznego podejścia do rozwiązywania problemów.
