...

Shopify - Checkout Extensibility i problemy z raportowaniem konwersji

Shopify i update checkoutu

W lutym 2023 roku Shopify ogłosił, że checkout.liquid zostaje wycofany, a platforma przechodzi na nową, bardziej zaawansowaną podstawę Checkout Extensibility. To rozwiązanie zapewnia większe bezpieczeństwo, wydajność oraz możliwość dostosowania za pomocą aplikacji.  Właściciele sklepów na shopify powinni zwrócić uwagę na dwie daty. 

Harmonogram obowiązkowych aktualizacji

  • 13 sierpnia 2024: Termin na aktualizację stron Informacje, Wysyłka i Płatności. Automatyczne aktualizacje rozpoczną się 6 stycznia 2025, a wszelkie dostosowania checkout.liquid dla tych stron zostaną utracone.

  • 28 sierpnia 2025: Termin na aktualizację stron Podziękowanie i Status zamówienia, w tym aplikacji używających tagów skryptów oraz dodatkowych skryptów.

Jeżeli próbowałeś/aś kiedyś wprowadzać zmiany w procesie składania zamówienia, to zapewne wiesz, że możliwości są bardzo ograniczone i ograniczają się jedynie do zmian kolorów czy dodania swojego logo. Z jednej strony jest to wada, z drugiej Shopify chciał mieć pewność z poprawności działania sklepu oraz utrzymania wysokiego poziomu konwersji. Ecommerce jednak ciągle ewoluje i największa platforma sprzedażowa również potrzebuje zmian.

Edytor Checkoutu Shopify: Nowe Możliwości Personalizacji i Optymalizacji Procesu Zakupu

Wraz z wprowadzeniem Checkout Extensibility Shopify zyskało narzędzie, które umożliwia łatwą i wizualną edycję procesu checkoutu. Dzięki nowemu Edytorowi Checkoutu właściciele sklepów mogą teraz dostosować doświadczenie zakupowe do potrzeb swoich klientów, poprawiając konwersje oraz efektywność sprzedaży.

Co to jest Edytor Checkoutu i jak działa?

Edytor Checkoutu to narzędzie dostępne dla sklepów, które przeszły na Checkout Extensibility. Pozwala ono na graficzną edycję strony checkoutu, co znacząco ułatwia proces personalizacji bez potrzeby pisania kodu. Narzędzie to można znaleźć w dwóch miejscach:

  1. Ustawienia > Checkout – pozwala na tworzenie różnych wersji checkoutu i ich wymienianie w zależności od potrzeb testowych lub produkcyjnych.
  2. Kanały sprzedaży > Sklep online > Szablony > Dostosuj – umożliwia szybkie i intuicyjne modyfikowanie checkoutu w szablonach sklepu.

Dzięki temu narzędziu możesz testować różne wersje procesu zakupowego i optymalizować go pod kątem najlepszych wyników. Nowością jest także możliwość tworzenia wersji testowych dla wersji produkcyjnych i eksperymentalnych, co pozwala na ciągłą optymalizację doświadczenia użytkownika.

Integracja z Aplikacjami Shopify i Rozszerzeniami

Edytor Checkoutu ułatwia także integrację z aplikacjami dostępnymi w Shopify App Store, które rozszerzają możliwości checkoutu. Dzięki temu, możesz w prosty sposób dodać nowe funkcjonalności do swojego sklepu, takie jak:

  • Moduły do poprawy wskaźników e-commerce: Aplikacje, które wspierają takie metryki jak CRO (Conversion Rate Optimization), AOV (Average Order Value), LTV (Customer Lifetime Value) czy ROAS (Return on Ad Spend).
  • Widgety: Zainstalowane aplikacje mogą dostarczać dodatkowe widżety, które można łatwo dodać do checkoutu za pomocą metody drag&drop.

Shopify Pixels Manager: Precyzyjna Analiza i Marketing

Nowym dodatkiem w procesie checkoutu jest Shopify Pixels Manager, który pozwala na łatwiejsze zarządzanie pikselami śledzącymi zachowanie użytkowników podczas zakupów. Piksele to fragmenty kodu, które pomagają zbierać dane o klientach, co umożliwia prowadzenie efektywnych kampanii marketingowych oraz analizy zachowań użytkowników. Dzięki temu zyskujesz pełną kontrolę nad danymi, zapewniając zgodność z przepisami dotyczącymi prywatności.

Dodatkowo, deweloperzy mogą rozbudowywać aplikacje i wprowadzać własne rozwiązania w tym zakresie, co pozwala na jeszcze lepsze śledzenie działań klientów i dostosowanie komunikacji marketingowej.

Nowe Narzędzia dla Programistów

Dla zaawansowanych użytkowników i programistów, Shopify wprowadziło nowe narzędzia umożliwiające bardziej zaawansowane modyfikacje procesu checkoutu.

Branding API: Dzięki temu narzędziu możesz zmieniać wygląd checkoutu, dostosowując szczegóły takie jak formularze, typografia czy grafiki. Możliwość personalizacji całego procesu składania zamówienia zapewnia spójność wizualną sklepu, co przekłada się na pozytywne doświadczenia użytkowników.

Checkout UI Extensions: Rozszerzenia UI umożliwiają tworzenie unikalnych modułów wizualnych, które mogą być dodawane do poszczególnych kroków checkoutu. To pozwala na dodanie takich funkcji jak:

  • Dosprzedaż dodatkowych produktów.
  • Moduł subskrypcji.
  • Zbieranie dodatkowych danych od klientów, np. wpisywanie życzeń do prezentów.
  • Formularze z dodatkowymi opcjami, np. pakowanie na prezent lub wysyłka na inny adres.
  • Kody rabatowe z informacją o terminie ich ważności.

 

Web Pixel App Extension: Dzięki tej funkcji deweloperzy mogą tworzyć własne piksele śledzące działania użytkowników, co umożliwia lepszą personalizację i optymalizację procesu checkoutu w czasie rzeczywistym.

Shopify Functions API: Użytkownicy planu Shopify Plus, którzy zaktualizowali checkout, mogą teraz tworzyć własną logikę procesów zakupowych, na przykład:

    • Dostosowanie płatności: Ukrywanie metod płatności na podstawie parametrów użytkownika.
    • Tworzenie zniżek: Przesuwanie granic tradycyjnych zniżek dostępnych w Shopify.
    • Tworzenie zestawów produktów: Możliwość tworzenia nowych produktów z połączenia kilku innych.

Post-Purchase Extension: Nowe Możliwości Po Zakupie

Rozszerzenie Post-Purchase Extension (na razie w fazie beta) pozwala na personalizowanie strony wyświetlanej po zakończeniu procesu zakupu, zanim klient zobaczy standardowe podziękowanie. Kilka pomysłów na wykorzystanie tego etapu:

  • Up-selling i cross-selling: Dosprzedaż dodatkowych produktów, które mogą zainteresować klienta.
  • Ankiety i prośby o feedback: Zbieranie opinii po zakupie.
  • Kupony zniżkowe na kolejne zakupy.
  • Programy lojalnościowe: Zapisywanie klientów do programu lojalnościowego.

Shopify checkout - A konwersje Google Ads/Analitycs

Wprawdzie istnieje Aplikacja od Google umożliwiająca śledzenie zakupów Google&Youtube. Ale skoro tu jesteś, to wiesz, że nie działa prawidłowo i nie rejestruje wszystkich konwersji. Zapewne wiesz już też, że twój Google Tag Manager nie ma dostępu do checkoutu. Dzieje się tak dlatego, że nowy checkout jest otwierany w trybie Sandbox. Żeby dodać kod Tag Managera po aktualizacji, należy użyć nowej funkcjonalności jaką są „Zdarzenia Klienta”. To właśnie tam powinniśmy dodać DataLayer oraz zaczytać GTM’a. Podgląd Tag Managera wciąż nie będzie dostępny na kroku zakupowym, ale dane wciąż tam są i możemy je wykorzystać.

Najlepszym rozwiązaniem w tej sytuacji jest  korzystanie ze śledzenia server-side. Pozwala ono na precyzyjne liczenie zdarzeń zakupu oraz dostanie się do dwóch interesujących nas zdarzeń: rozpoczęcie płatności oraz zakup. Problemem mogą się okazać consent mode i ciasteczka first party, dlatego że w teori checkout nie znajduje się na naszej witrynie, tylko bezpośrednio na shopify. Ale przy odrobinie pomysłowości, jesteśmy w stanie „dobić” Consent Mode bezpośrednio w Tag Managerze oraz załatwić sprawę ciastek google. Pomocny w tej kwesti może się okazać ten tutorial – oczywiście nie zalecamy wykonywać takich rzeczy, jeżeli nie masz doświadczenia.

Tak skonstruwane śledzenie zapewnia najlepsze dane i zapewnia pokrycie zdarzeń w GA4 na poziomie 90%-95%.

Seraphinite AcceleratorBannerText_Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.