Śledzenie pikseli na stronie obsługi pozakupowej

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.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo