Śledzenie e-commerce

Ten przewodnik opisuje, jak ręcznie zintegrować śledzenie e-commerce Trackboxx ze sklepem - niezależnie od tego, czy korzystasz z niestandardowego systemu, Shopify, Shopware, Magento czy innego sklepu. Dla WooCommerce dostępna jest oficjalna wtyczka, która automatycznie uruchamia wszystkie opisane tutaj zdarzenia.

Podstawowa logika: Co oznacza trackboxx('Purchase', [...])?

Zanim przejdziemy do poszczególnych wydarzeń, ważne jest, aby zrozumieć - doświadczenie pokazuje, że ten punkt jest najczęściej błędnie interpretowany:

Ważne: trackboxx('Purchase', [...]) jest brak pojedynczego zdarzenia, ale ogólne wywołanie dla wszystkich interakcji e-commerce. To, które zdarzenie jest faktycznie śledzone, jest określane przez parametr pierwszy obiekt w tablicy o jego typ:

• { type: 'ViewProduct' } - Strona szczegółów produktu
• { type: 'AddToCart' } - Produkt dodany do koszyka
• { type: 'ViewCart' } - Wyświetl stronę koszyka zakupów
• { type: 'order' } - Zamówienie zrealizowane

The 'Zakup' w wywołaniu funkcji odnosi się po prostu do kategorii akcji „e-commerce“ i zawsze pozostaje taka sama - niezależnie od tego, czy śledzisz widok produktu, dodanie do koszyka czy faktyczny zakup.

Cztery wydarzenia e-commerce w skrócie

1. viewProduct - strona szczegółów produktu

Wyzwalacz: Podczas wywoływania strony szczegółów produktu.
Minimalne dane: Nazwa produktu i cena jednostkowa.

<scenariusz>
trackboxx('Zakup', [
  { typ: 'ViewProduct' },
  { typ: 'produkt', nazwa: '%%PRODUCT_NAME%%', cena: 99.90 }
]);
</scenariusz>Język kodu: HTML, XML (xml)

Uwagi:

• cena = Cena jednostkowa iloczynu (numeryczna, kropka jako separator dziesiętny).
• Opcjonalne pola dodatkowe: sku, kategoria.
• W przypadku wariantów lub pakietów: prześlij pełną nazwę wariantu, w tym atrybuty (np. „T-shirt - czerwony, L“), aby raporty były spójnie agregowane.

2nd AddToCart - Produkt dodany do koszyka zakupów

Wyzwalacz: Po udanym „Proces “Dodaj do koszyka" - nie ślepy po kliknięciu.
Minimalne dane: Nazwa produktu i cena jednostkowa.

<scenariusz>
trackboxx('Zakup', [
  { typ: 'AddToCart' },
  { typ: 'produkt', nazwa: '%%PRODUCT_NAME%%', cena: 19.99 }
]);
</scenariusz>Język kodu: HTML, XML (xml)

Uwagi dotyczące czasu - w zależności od typu sklepu:

• Niestandardowe sklepy i koszyki AJAX: Wywołanie zdarzenia w wywołaniu zwrotnym akcji dodania do koszyka, a nie w procedurze obsługi kliknięcia. Oznacza to, że żadne zdarzenie śledzenia nie zostanie wygenerowane, jeśli przedmiot w ogóle nie trafi do koszyka z powodu kontroli zapasów, walidacji lub błędów sieciowych.
• Sklepy po stronie serwera z przekierowaniem: Wyzwól zdarzenie raz na następnej stronie po pomyślnym dodaniu.
• Prosta integracja za pomocą kliknięcia przycisku: dozwolone, ale tylko wtedy, gdy zapewnione jest, że kliknięcie faktycznie prowadzi do pomyślnego dodania (np. wyłączenie przycisku sprawdzania w przypadku wyprzedanych produktów).
• Deduplikacja: Wysyłaj AddToCart tylko raz na akcję - bez powielania dla przeładowania lub nawigacji wstecz.

3. viewCart - strona koszyka zakupów

Wyzwalacz: Podczas wywoływania strony koszyka zakupów.
Minimalne dane: Suma koszyków (kwota). Opcjonalnie: wszystkie dołączone produkty jako oddzielne obiekty.

<scenariusz>
trackboxx('Zakup', [
  { typ: 'ViewCart' },
  { typ: 'koszyk', kwota: 149.70 },
  { typ: 'produkt', nazwa: 'Produkt A', cena: 99.90 },
  { typ: 'produkt', nazwa: 'Produkt B', cena: 49.80 }
]);
</scenariusz>Język kodu: HTML, XML (xml)

Uwagi:

• kwota = całkowita kwota koszyka zakupów. Standard: Netto (odpowiada zachowaniu oficjalnej wtyczki WooCommerce).
• Jeśli Twój sklep pracuje z cenami brutto, wartości brutto są również dozwolone - decydującym czynnikiem jest Spójność w ramach wydarzenia: cart.amount i wszystkie product.price-Wartości muszą być obliczane na tej samej podstawie (wszystkie netto lub wszystkie brutto).
• Oddzielna pozycja w koszyku dla każdego produkt-obiekt.
• The cena na produkt odpowiada Suma pozycji (cena jednostkowa × ilość) - patrz sekcja „Logika ceny i ilość“.

4. zakup - realizacja zamówienia (strona z podziękowaniem)

Wyzwalacz: Na stronie potwierdzenia zamówienia po pomyślnym dokonaniu płatności - dokładnie raz na zamówienie.
Minimalne dane: Identyfikator zamówienia, łączna kwota, wszystkie zakupione produkty.

<scenariusz>
trackboxx('Zakup', [
  { typ: 'zamówienie', id: 'ORDER_ID', łącznie: 149.70 },
  { typ: 'produkt', nazwa: 'Produkt A', cena: 99.90 },
  { typ: 'produkt', nazwa: 'Produkt B', cena: 49.80 }
]);
</scenariusz>Język kodu: HTML, XML (xml)

Opcjonalnie - z kuponem: Jeden dodatkowy kupon za każdy wykorzystany kupon kupon-obiekt.

<scenariusz>
trackboxx('Zakup', [
  { typ: 'zamówienie', id: '12345', łącznie: 149.70 },
  { typ: 'kupon', nazwa: 'SUMMER10', zniżka: 10.00 },
  { typ: 'produkt', nazwa: 'Produkt A', cena: 99.90 },
  { typ: 'produkt', nazwa: 'Produkt B', cena: 49.80 }
]);
</scenariusz>Język kodu: HTML, XML (xml)

Uwagi:

• Podczas wydarzenia zakupu dostępne są brak poprzedzający znacznik zdarzenia, jak w przypadku ViewProduct lub AddToCart - znacznik porządek-obiekt identyfikuje samo zdarzenie.
• order.id = unikalny identyfikator zamówienia z systemu sklepu.
• order.total = całkowita wartość zamówienia (zalecana jest końcowa kwota brutto obejmująca wysyłkę i podatki, ale musi być zgodna z wartościami product.price).
• product.price = Suma pozycji (cena jednostkowa × ilość), a nie cena jednostkowa.
• Ochrona przed wielokrotnym odpaleniem (ochrona przed przeładowaniem), np. za pomocą flagi po stronie serwera lub znacznika sesji.

Logika ceny i ilość

Używany Trackboxx brak oddzielnego ilość-pole. Ilości są mapowane niejawnie poprzez cenę. Ta reguła jest wiążąca i powinna być zaimplementowana w ten sam sposób w każdej integracji:

Przykład: Trzy identyczne produkty o wartości 19,99 € każdy w koszyku są sprzedawane po cenie ViewCart oraz Zakup jak jeden produkt-obiekt z cena: 59,97 wysłane - nie jako trzy oddzielne obiekty i bez ilość-pole.

Kolejność obiektów w tablicy

Aby zapewnić czystą i spójną integrację, zalecamy następującą sekwencję obiektów:

1. Znacznik zdarzenia lub. porządek-obiekt (ViewProduct / AddToCart / ViewCart / porządek)
2. wózek-object (tylko dla ViewCart)
3. kupon-Przedmioty (tylko w przypadku zakupu, jeśli są dostępne)
4. produkt-obiekty

Najlepsze praktyki

• Deduplikacja: Wysyłaj każde zdarzenie tylko raz na rzeczywistą akcję - bez podwójnego śledzenia przeładowania, nawigacji wstecz lub zwrotów AJAX.
• Czas: ViewProduct oraz ViewCart podczas ładowania strony. AddToCart po potwierdzonym dodaniu. Zakup raz na stronie z podziękowaniem.
• Ceny i kwoty: Jak Liczba (nie ciąg znaków), z kropką jako separatorem dziesiętnym (np. 19.99 - nie "19,99").
• Spójność: Netto lub brutto to decyzja dla każdego sklepu - ale konsekwentnie dla cart.amount, product.price oraz order.total.
• Ochrona danych: Nigdy nie przekazuj danych osobowych - żadnych adresów e-mail, nazwisk, numerów klientów ani adresów. Szanuj zgodę.

Szybka lista kontrolna dla systemu sklepowego

• WooCommerce: Użyj oficjalnej wtyczki Trackboxx. Uruchamia ona wszystkie cztery zdarzenia (ViewProduct, AddToCart, ViewCart, Zakup) automatycznie - bez konieczności ręcznej integracji.
• Custom Shops: Po stronie serwera wstaw nazwę produktu, cenę i sumę jako zmienne w odpowiednim skrypcie inline.
• Shopify: Wstawianie fragmentów do szablonów (product.liquid, cart.liquid, Checkout-Thank-You-Page). Dla AddToCart dokowanie do wywołania zwrotnego powodzenia AJAX.
• Shopware / Magento: Dołącz do odpowiednich zdarzeń lub haków w motywie lub wtyczce - strona produktu, strona koszyka, zdarzenie dodania do koszyka, zdarzenie realizacji zamówienia.

Odniesienie: Minimalne warianty

ViewProduct (minimalny)

trackboxx('Zakup', [
  { typ: 'ViewProduct' },
  { typ: 'produkt', nazwa: 'Nazwa produktu 1', cena: 19.99 }
]);Język kodu: JavaScript (javascript)

AddToCart (minimalny)

trackboxx('Zakup', [
  { typ: 'AddToCart' },
  { typ: 'produkt', nazwa: 'Nazwa produktu 1', cena: 19.99 }
]);Język kodu: JavaScript (javascript)

ViewCart (minimalny)

trackboxx('Zakup', [
  { typ: 'ViewCart' },
  { typ: 'koszyk', kwota: 19.99 }
]);Język kodu: JavaScript (javascript)

Zakup (minimum)

trackboxx('Zakup', [
  { typ: 'zamówienie', id: 'ORDER_ID', całkowity: 19.99 },
  { typ: 'produkt', nazwa: 'Nazwa produktu 1', cena: 19.99 }
]);Język kodu: JavaScript (javascript)

Krótki przegląd: Najważniejsze zasady

• trackboxx('Purchase', [...]) jest ogólnym wywołaniem e-commerce, a nie zdarzeniem.
• Typ zdarzenia znajduje się w ładunku (typ-pole pierwszego obiektu), a nie w wywołaniu funkcji.
• AddToCart uruchamiają się po pomyślnym dodaniu - nie ślepo po kliknięciu.
• cart.amount domyślnie jako wartość netto; wartość brutto dozwolona, ale spójna w ramach zdarzenia.
• cena = Cena jednostkowa w ViewProduct / AddToCart, suma pozycji dla ViewCart / Zakup.
• Nie oddzielnie ilość-pole - ilości za pośrednictwem ceny.
• Zdarzenie zakupu na podstawie { type: 'order' } bez poprzedzającego znacznika zdarzenia.
• Ceny jako liczba z separatorem dziesiętnym, nigdy jako ciąg znaków.
• Brak danych osobowych w ładunku.