Śledzenie pikseli na stronie obsługi pozakupowej

Uwaga

Skrypty śledzące to zaawansowane dostosowania, które nie są obsługiwane przez zespół pomocy technicznej Shopify. Wymagana jest znajomość języków projektowania stron internetowych, takich jak HTML, CSS, JavaScript i Liquid. Rozważ zatrudnienie eksperta Shopify, jeśli praca ze skryptami sprawia Ci trudności.

Jeśli w Twoim sklepie zainstalowana jest aplikacja, która dodaje stronę obsługi pozakupowej do procesu realizacji zakupu, funkcja śledzenia niestandardowych pikseli, której używasz w sklepie, może nie rejestrować niektórych zdarzeń śledzenia. Niestandardowe piksele śledzące dodawane do pola Dodatkowe skrypty w Twoim sklepie śledzą zdarzenia tylko na stronie statusu zamówienia, która pojawia się po stronie obsługi pozakupowej podczas realizacji zakupu. Jeśli klient opuści Twój sklep na stronie obsługi pozakupowej, zdarzenia na stronie statusu zamówienia nie będą śledzone.

Aby zapewnić prawidłowe rejestrowanie zdarzeń konwersji, możesz dodać skrypt, który śledzi zdarzenia na stronie obsługi pozakupowej. Ten skrypt może również śledzić dodatkowe zakupy dokonane na stronie obsługi pozakupowej, takie jak sprzedaż droższych produktów. Po dodaniu skryptu strony obsługi pozakupowej musisz dostosować skrypt strony statusu zamówienia, aby zdarzenia, które są już zarejestrowane przez skrypt strony obsługi pozakupowej, zostały zignorowane.

Sposób, w jaki w sklepie śledzone są zdarzenia należy zmienić tylko w przypadku używania niestandardowego piksela śledzącego. Na przykład, jeśli skonfigurujesz Google Analytics za pomocą opcji: Sklep online > Preferencje, zdarzenia będą rejestrowane poprawnie na stronie obsługi pozakupowej.

Uwagi

Dodatkowy skrypt strony obsługi pozakupowej jest podobny do dodatkowych skryptów strony statusu zamówienia. Występuje jednak kilka kluczowych różnic:

• Skrypt jest dodawany do strony obsługi pozakupowej, a nie do strony statusu zamówienia.
• Pole umożliwia tylko stosowanie kodu JavaScript. Kod Liquid nie jest akceptowany.
• Jedynym dozwolonym tagiem HTML jest <script>.
• Skrypt jest uruchamiany w środowisku testowym i nie jest zawarty na stronie głównej.
• Skrypt strony obsługi pozakupowej można dodać tylko wtedy, gdy w sklepie zainstalowana jest aplikacja, która dodaje stronę obsługi pozakupowej do procesu realizacji zakupu.

Uruchomienie skryptu w środowisku testowym zapewnia bezpieczeństwo skryptu i jego używanie zgodnie z przeznaczeniem.

Pomoc techniczna Shopify nie zapewnia wsparcia w zakresie skryptów strony obsługi pozakupowej. Jeśli będziesz potrzebować pomocy, możesz opublikować posty na stronie Społeczności Shopify lub zatrudnić eksperta Shopify.

Kompatybilność ze skryptami na stronie statusu zamówienia

Aby piksele prawidłowo śledziły wszystkie zdarzenia konwersji, skonfiguruj skrypty śledzące zarówno na stronie obsługi pozakupowej, jak i na stronie statusu zamówienia. W celu uniknięcia dwukrotnego zliczania zdarzeń konwersji, możesz użyć zmiennej Liquid post_purchase_page_accessed w skryptach uruchamianych na stronie statusu zamówienia.

Jeśli klient trafi na stronę obsługi pozakupowej, skąd przejdzie do strony statusu zamówienia, zmienna post_purchase_page_accessed zwróci wartość true (prawda). Jeśli klient nie wejdzie na stronę obsługi pozakupowej, zmienna zwróci wartość false (fałsz).

Możesz na przykład użyć poniższego formatu dla skryptów na stronie statusu zamówienia:

{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
   // insert your tracking script
</script>
{% endif %}

Dostępne API

Możesz użyć globalnych obiektów JavaScript, aby umożliwić skryptom śledzącym dostęp do danych, których potrzebują. Dostępne dane znajdują się w obiekcie window.Shopify .

Śledzenie zakupów dokonanych na stronie obsługi pozakupowej

Aby śledzić dodatkowe zakupy dokonane za pośrednictwem strony obsługi pozakupowej, możesz subskrybować zdarzenie Shopify.on.

Po dokonaniu subskrypcji przy każdym wprowadzeniu zestawu zmian pozakupowych wykonywane są następujące czynności:

• Twój program obsługi jest wywoływany z dwoma argumentami typu Order: order i outdated order.
• Obiekty globalne w obiekcie window.Shopify są aktualizowane, aby skrypty korzystały ze zaktualizowanych danych.

Programy obsługi z subskrypcją tego zdarzenia mogą mieć tylko 500 ms na uruchomienie. Pamiętaj o wcześniejszym załadowaniu wszystkich zależności, których możesz potrzebować.

Dodaj skrypt strony obsługi pozakupowej

1. Z panelu administracyjnego Shopify przejdź do opcji: Ustawienia > Realizacja zakupu.
2. W polu Dodatkowe skrypty obsługi pozakupowej wprowadź skrypt.
3. Kliknij opcję Zapisz.

Skrypt przykładowy

Możesz użyć poniższego podstawowego szablonu skryptu, który pomoże Ci stworzyć własny skrypt strony pozakupowej. W tym przykładowym skrypcie używana jest funkcjonalność Google Analytics do śledzenia wstępnej konwersji i wyjaśniony jest sposób śledzenia dodatkowych zakupów. Skrypt ten jest bardzo prosty i prawdopodobnie Twój własny skrypt będzie się od niego różnić.

Przykładowe pliki skryptów

Przykładowy skrypt dla strony statusu zamówienia:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // make sure the initial conversion isn't tracked twice
  {% if first_time_accessed == false or post_purchase_page_accessed == true %}
    return;
  {% endif %}
  // set up google analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');
  // track initial conversion
  var order = window.Shopify.order;

  gtag('event', 'purchase', {
    affiliation: 'My Shopify Store',
    transaction_id: Number(order.id).toString(),
    value: order.totalPrice,
    currency: order.currency,
    items: order.lineItems.map((item) => ({
      id: Number(item.id).toString(),
      name: item.title,
      category: item.product.type,
      price: item.price,
      quantity: item.quantity,
      variant: Number(item.variant.sku).toString(),
    })),
  });
})();
</script>

Przykładowy skrypt dla strony pozakupowej:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }

  // set up additional conversion tracking
  Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
    // identify which items were recently added, if any
    var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });

    var addedItems = newOrder.lineItems.filter(
      function (line) { return oldItems.indexOf(line.id) < 0; }
    );

    // no new items were added, so we skip conversion tracking
    if (addedItems.length === 0) {
      return;
    }

    // track additional purchase
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function (item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  });
})();
</script>

Referencje

Poniższa tabela zawiera definicje typów dla atrybutów, które są udostępniane dla dodatkowych skryptów obsługi pozakupowej za pomocą obiektu window.Shopify:

Pole	Definicja
window.Shopify
shop	Dane sklepu, w którym zostało złożone zamówienie.
order	Dane zamówienia.
pageUrl	Adres URL bieżącej strony.
wasPostPurchasePageSeen	Czy klient podczas realizacji zakupu wyświetlił stronę obsługi pozakupowej. Podczas renderowania po raz pierwszy wartością będzie false (fałsz), a w innych przypadkach, na przykład jeśli strona zostanie ponownie załadowana – true (prawda).
on(event: string, handler: function): void	Subskrybuje event. Obecnie obsługiwane jest tylko zdarzenie CheckoutAmended.
off(event: string, handler: function): void	Anuluje subskrypcję handler z danego event. Obecnie obsługiwane jest tylko zdarzenie CheckoutAmended.
Shop
id	Identyfikator sklepu.
currency	Waluta sklepu w formacie ISO 4217, na przykład USD. Aby uzyskać więcej informacji, zapoznaj się z shop.currency.
Order
id	Wewnętrzny identyfikator zamówienia.
number	Przedstawienie nazwy zamówienia w liczbach całkowitych, na przykład 1025.
checkoutToken	Wewnętrzny identyfikator realizacji zakupu.
customer	Klient powiązany z zamówieniem.
lineItem	Pozycje pojedyncze zamówienia.
subtotalPrice	Cena cząstkowa wszystkich pozycji w zamówieniu po zastosowaniu rabatów dla pozycji i koszyka. Suma częściowa nie obejmuje podatków (chyba że podatki są wliczone w cenę), kosztów wysyłki ani napiwków.
totalPrice	Łączna cena zamówienia.
currency	Kod ISO 4217 waluty zamówienia.
discounts	Suma rabatów zastosowanych w przypadku zamówienia.
Customer
id	Identyfikator klienta.
email	Adres e-mail klienta.
acceptsMarketing	Czy klient wyraził zgodę na marketing. Będzie mieć wartość true (prawda), jeśli klient wyrazi zgodę na marketing, a w przeciwnym razie wartość false (fałsz).
hasAccount	Czy adres e-mail klienta jest powiązany z kontem klienta. Będzie mieć wartość true (prawda), jeśli adres e-mail będzie podany na koncie klienta, a w przeciwnym razie – wartość false (fałsz). Aby uzyskać więcej informacji, zapoznaj się z customer.has_account.
firstName	Imię klienta.
lastName	Nazwisko klienta.
ordersCount	Łączna liczba zamówień złożonych przez klienta.
totalSpent	Całkowita kwota wydana przez klienta na wszystkie zamówienia.
LineItem
finalLinePrice	Łączna cena wszystkich pozycji w pozycji pojedynczej. Jest równa cenie line_item.final_price pomnożonej przez line_item.quantity.
finalPrice	Cena pojedynczej pozycji wraz ze wszystkimi kwotami rabatu na poziomie linii.
lineLevelTotalDiscount	Łączna kwota wszystkich rabatów zastosowanych w przypadku pozycji pojedynczej. Nie obejmuje rabatów, które są dodawane do koszyka.
optionsWithValues	Tablica wybranych wartości z opcji produktu pozycji. Aby uzyskać więcej informacji, zapoznaj się z line_item.options_with_values.
originalLinePrice	Łączna cena ilości pozycji uwzględnionych w wierszu przed zastosowaniem rabatów. Jest równa cenie line_item.original_price pomnożonej przez line_item.quantity.
originalPrice	Oryginalna cena pozycji pojedynczej przed zastosowaniem rabatów.
price	Cena jednostkowa pozycji pojedynczej. Cena odzwierciedla wszystkie rabaty zastosowane w przypadku pozycji. Dostępna tylko dla sklepów znajdujących się w Niemczech lub Francji.
product	Produkt pozycji pojedynczej.
properties	Tablica niestandardowych informacji dla pozycji, która została dodana do koszyka. Aby uzyskać więcej informacji, zapoznaj się z line_item.properties.
quantity	Ilość pozycji pojedynczej.
title	Tytuł pozycji pojedynczej. Aby uzyskać więcej informacji, zapoznaj się z line_item.title.
variant	Wariant pozycji pojedynczej.
Product
id	Identyfikator produktu.
type	Typ produktu.
ProductVariant
id	ID wariantu.
sku	Jednostka SKU wariantu.
CartDiscount
id	Wewnętrzny identyfikator aplikacji rabatowej.
code	Kod rabatu, jeśli go ma.
type	Typ rabatu. Możliwe wartości to: automatic, discount_code, manual i script.
amount	Całkowita kwota, o którą jest pomniejszona cena zamówienia w wyniku zastosowania rabatu.