Server-side tracking w Shopify: jak działa i jak go skonfigurować

Server-side tracking w Shopify oznacza, że każdy zakup trafia do Meta, TikTok i innych platform reklamowych z danych zamówień twojego sklepu, wysyłanych przez serwer, a nie tylko z piksela w przeglądarce kupującego. Shopify zgłasza każde opłacone zamówienie do aplikacji trackingowej przez webhook, a aplikacja wysyła je do Conversions API każdej platformy, dopasowane do kliknięcia w reklamę, które przyprowadziło kupującego.

Ten poradnik omawia elementy Shopify w tym przepływie: osadzenie aplikacji w motywie i app proxy, piksele w checkoucie, webhook orders/paid, dopasowanie zamówień, deduplikację, zgody i konfigurację w ROASaurus. Aby poznać ogólną ideę, najpierw przeczytaj czym jest server-side tracking.

Jak działa server-side tracking w Shopify

Kliknięcie i zakup dzieją się w różnych momentach i w różnych miejscach. Kliknięcie widać tylko w przeglądarce, na stronie docelowej. Opłacone zamówienie jest pewne tylko po stronie Shopify, gdy płatność zostanie zaksięgowana. Server-side tracking zapisuje pierwsze, czeka na drugie i je łączy.

Elementy Shopify: osadzenie aplikacji, app proxy, piksele i webhooki

Sklep Shopify daje aplikacji trackingowej cztery miejsca do pracy. Każde ma inne zadanie, a kompletna konfiguracja używa wszystkich czterech.

Osadzenie aplikacji w motywie i app proxy

Osadzenie aplikacji w motywie (theme app embed) to blok, który aplikacja dodaje do twojego motywu. Włączasz je w edytorze motywu, więc nie ma kodu do wklejania. Osadzenie ROASaurus ładuje skrypt na każdej stronie. Na stronie docelowej odczytuje click id, takie jak fbclid, ttclid i gclid, oraz parametry UTM i zapisuje je z first-party visitor id.

Skrypt wysyła swoje zdarzenia przez app proxy Shopify. App proxy przekazuje żądania ze ścieżki w twojej własnej domenie, takiej jak yourstore.com/apps/roasaurus, do serwera aplikacji. Dla przeglądarki jest to żądanie do twojej własnej strony, co może pomagać przeciw blokerom reklam, które blokują znane domeny trackingowe. Shopify usuwa nagłówek Cookie z żądań app proxy i nagłówek Set-Cookie z odpowiedzi, więc visitor id podróżuje wewnątrz samego zdarzenia, a nie w cookie.

Customer events i piksele w checkoucie

W checkoucie Shopify skrypty trackingowe działają jako piksele w sandboxie, a nie na samej stronie. Zarządzasz nimi w Settings › Customer events. Są dwa rodzaje. Piksele aplikacji (app pixels) przychodzą z aplikacją i działają w ścisłym sandboxie. Piksele niestandardowe (custom pixels) dodaje sprzedawca i działają w mniej ścisłym sandboxie, który może ładować skrypty stron trzecich, takie jak piksel Meta.

ROASaurus używa obu. Jego piksel aplikacji włącza się po zainstalowaniu aplikacji. Zgłasza do ROASaurus rozpoczęcie checkoutu, krok z danymi kontaktowymi i ukończony checkout. Opcjonalny piksel niestandardowy dodaje do checkoutu piksele przeglądarkowe Meta, TikTok, Snapchat, Pinterest i Reddit oraz wysyła konwersje Google Ads.

Webhooki zamówień

Webhook to wiadomość, którą Shopify wysyła do aplikacji, gdy coś dzieje się w sklepie. ROASaurus subskrybuje między innymi orders/paid i orders/create. Zamówienie w webhooku zawiera id zamówienia, wartość, pozycje zamówienia, dane klienta, tokeny koszyka i checkoutu, atrybuty koszyka oraz adres IP i przeglądarkę, z których złożono zamówienie. Pochodzi z serwerów Shopify, więc bloker reklam ani zamknięta karta nie mogą go zatrzymać.

Jak zamówienia są dopasowywane do kliknięć w reklamy

Webhook informuje ROASaurus, że zamówienie zostało opłacone. Aby wysłać użyteczną konwersję, ROASaurus musi też wiedzieć, który odwiedzający złożył zamówienie, bo rekord odwiedzającego zawiera click id. Próbuje poniższych powiązań po kolei, od najbardziej bezpośredniego do najmniej:

Atrybuty koszyka sprawiają, że w Shopify dopasowanie jest bezpośrednie. To pary klucz-wartość zapisane w koszyku, które Shopify kopiuje do zamówienia. Wartość zapisana na stronie produktu nadal tam jest, gdy webhook dociera, nawet jeśli kupujący zamknął stronę z podziękowaniem za wcześnie.

Jeden wyjątek: przyspieszone przyciski checkoutu, takie jak „Kup teraz”, pomijają koszyk. ROASaurus radzi je wyłączyć, żeby dodanie do koszyka było zawsze śledzone. Zamówienia złożone przez nie mogą nadal pasować przez token checkoutu.

Jedno zamówienie, od początku do końca

Oto co dzieje się przy pojedynczym zamówieniu z reklamy Meta, gdy zainstalowano piksel niestandardowy:

Kiedy zakup jest wysyłany: orders/paid czy orders/create

To, który webhook uruchamia wysłanie zakupu, zależy od tego, jak płacą twoi klienci. Wybierasz go jako typ checkoutu w Store settings.

ROASaurus wstrzymuje każdy zakup na krótki czas po nadejściu webhooka. W tym czasie zwykle dociera też zdarzenie ukończonego checkoutu z przeglądarki. Jego adres URL strony, adres IP i user agent są wtedy dodawane do zdarzenia z serwera, obok click id z rekordu odwiedzającego. Zamówienia, które Shopify oznacza jako testowe, są zapisywane, ale nie wysyłane do platform reklamowych.

Jak działa deduplikacja z pikselami w przeglądarce

Gdy piksele w przeglądarce działają obok zdarzeń z serwera, platforma dostaje każdy zakup dwa razy i musi zachować tylko jeden. Robi to za pomocą event id. ROASaurus nadaje obu kopiom zakupu to samo id, zbudowane z id zamówienia Shopify: order-6123456789012 dla zamówienia o id 6123456789012. To długi numer w adresie URL zamówienia w panelu administracyjnym, a nie nazwa zamówienia, taka jak #1042. Piksel checkoutu używa go dla Purchase z przeglądarki, a serwer dla zdarzenia Conversions API. Meta na przykład zachowuje jedną kopię, gdy nazwa zdarzenia i event id się zgadzają, a obie dotrą w ciągu 48 godzin.

Event id działa tylko między zdarzeniami, które go niosą. Jeśli inna aplikacja wysyła ten sam piksel, jej zdarzenia mają własne id, a platforma liczy zamówienie ponownie. W Shopify zwykle przyczyną jest kanał Facebook & Instagram połączony z tym samym pikselem, aplikacja TikTok oraz kod piksela wklejony do theme.liquid. Nasz poradnik o zduplikowanych zdarzeniach zakupu pokazuje, jak je znaleźć, a artykuł Zapobieganie podwójnemu liczeniu wymienia poprawki.

Zgoda przez Customer Privacy API Shopify

Customer Privacy API Shopify zapisuje wybór cookie każdego odwiedzającego. Wypełnia je twój baner cookie, niezależnie od tego, czy używasz własnego banera Shopify, czy aplikacji do zgód połączonej z API. Skrypty i piksele mogą wtedy zapytać, czy marketing jest dozwolony dla tego odwiedzającego.

Gdy opcja Respect visitor consent jest włączona, co jest domyślne w Store settings, skrypt sklepu ROASaurus i piksele checkoutu pytają API, zanim zaczną śledzić.

E-maile, numery telefonów, imiona i nazwiska oraz adresy są hashowane algorytmem SHA-256, zanim zostaną wysłane do platformy reklamowej. Ważne są jeszcze trzy szczegóły:

• Decyduje twój baner. ROASaurus stosuje się do tego, co zgłasza API. Jeśli API nie jest dostępne na stronie, ROASaurus traktuje odwiedzającego jako wyrażającego zgodę, więc sprawdź, czy twój baner jest z nim połączony.
• Strona docelowa zostaje przy zamówieniu. Shopify zapisuje adres strony docelowej z każdym zamówieniem i może on zawierać tagi kampanii i click id. ROASaurus używa go we własnych raportach atrybucji, także dla odwiedzających, którzy odmówili, i nie wysyła go do platform reklamowych.
• Wysłanie zamówienia to decyzja prawna. To, czy opłacone zamówienie odwiedzającego, który odmówił, w ogóle wolno wysłać, jest kwestią prawną dla twojego sklepu.

Nasz poradnik o Consent Mode v2 i RODO wyjaśnia zasady na ogólnym poziomie, a Zgody i prywatność zawiera szczegóły.

Jak skonfigurować server-side tracking w Shopify w ROASaurus

Wykonaj kroki konfiguracji w tej kolejności:

1. Zainstaluj aplikację

   Przejdź do Add a store, wybierz Shopify, wpisz swoją domenę .myshopify.com i kliknij Install app. Zatwierdź aplikację w Shopify. ROASaurus rejestruje webhooki zamówień i włącza swój piksel aplikacji.

2. Włącz osadzenie aplikacji w motywie

   Na stronie Tracking & platforms kliknij Open theme editor, włącz osadzenie aplikacji ROASaurus i zapisz.

3. Dodaj piksel checkoutu

   W Shopify admin przejdź do Settings › Customer events i dodaj piksel niestandardowy o nazwie ROASaurus. Ustaw jego uprawnienie na Not required, bo skrypt ROASaurus sam sprawdza wybór marketingowy odwiedzającego. Wklej fragment kodu z Tracking & platforms. Ten piksel jest potrzebny do pikseli przeglądarkowych w checkoucie i do Google Ads.

4. Połącz swoje platformy reklamowe

   W Tracking & platforms kliknij Add pixel dla każdej platformy albo Connect with Facebook dla Meta. Zostaw włączoną opcję ładowania także piksela w przeglądarce, jeśli chcesz mieć zdeduplikowane zdarzenia z przeglądarki.

5. Sprawdź ustawienia sklepu

   W Store settings wybierz typ checkoutu i zostaw włączoną opcję Respect visitor consent, jeśli sprzedajesz tam, gdzie wymagana jest zgoda.

6. Usuń innych nadawców

   W kanale Facebook & Instagram usuń ten piksel z ustawień udostępniania danych. Obniżenie poziomu udostępniania danych nie wystarcza, bo każdy poziom, w tym Standard, wysyła piksel Meta z przeglądarki. Jeśli aplikacja TikTok wysyła ten sam piksel, zatrzymaj to także tam i usuń kod piksela z motywu.

Fragment kodu piksela niestandardowego wygląda tak. Skopiuj go z Tracking & platforms, gdzie klucz twojego sklepu jest już wpisany. Poradnik konfiguracji Shopify zawiera te same kroki.

self.tl = this; document.head.appendChild(document.createElement('script')).src = 'https://app.roasaurus.com/c.js?k=YOUR_STORE_KEY';

Jak sprawdzić, czy działa

Przetestuj na jednym prawdziwym zamówieniu, zanim zaczniesz polegać na liczbach:

1. Otwórz swój sklep z ?roasaurus=connected na końcu adresu URL. Komunikat potwierdza, że skrypt działa.
2. Dla Meta wklej kod z Events Manager › Test events w pole Test event code piksela.
3. Złóż prawdziwe, tanie zamówienie i potem je zwróć. Zamówienia testowe Shopify nie są wysyłane.
4. W Event log wysyłka z serwera dla zamówienia jest pokazana jako sent dla każdej platformy, razem z odpowiedzią platformy.
5. W widoku testowym platformy sprawdź, czy Purchase z przeglądarki i z serwera mają ten sam event id: order- plus id zamówienia Shopify.
6. Potem usuń testowy kod zdarzenia.

Czego server-side tracking w Shopify nie naprawia

• Odrzucona zgoda. Zamówienia od odwiedzających, którzy odrzucili marketingowe cookie, są wysyłane, ale bez click id, więc platformy reklamowe dopasowują je gorzej.
• Limity cookie w Safari. Kupujący, który wraca po więcej niż 7 dniach, może wyglądać jak nowy odwiedzający. Subdomena trackingowa first-party utrzymuje zbieranie danych na twojej domenie, ale Safari nadal może ograniczać te cookie do 7 dni.
• Różnice w atrybucji. Każda platforma reklamowa nadal przypisuje sprzedaż według własnych okien i modeli. Aby porównywać kanały według jednego zestawu zasad, użyj własnej atrybucji.
• Inne aplikacje na tym samym pikselu. Event id łączą tylko te zdarzenia, które je współdzielą.

Naprawia za to zakupy, które się odbyły, ale nigdy nie dotarły do platformy reklamowej, bo zdarzenie z przeglądarki zostało utracone. Co ROASaurus wysyła do każdej platformy, opisują server-side tracking i integracja z Shopify.

Źródła

1. Shopify: Customer Privacy API
2. Shopify: Authenticate app proxies
3. Shopify Help Center: Manage your custom pixels
4. Shopify Help Center: Facebook data sharing
5. Meta: Handling Duplicate Pixel and Conversions API Events

W ROASaurus

• Pomoc: konfiguracja ROASaurus w Shopify
• Integracja ze Shopify
• Server-side tracking w ROASaurus
• Pomoc: zgody i prywatność

Czytaj dalej