1. Strona główna
  2. Extra
  3. Samba API
  4. Personalizacja strony internetowej za pomocą Javascript API
  1. Strona główna
  2. Przewodniki Samby
  3. Personalizacja internetowa i kampanie powitalne
  4. Personalizacja strony internetowej za pomocą Javascript API
Searching...

Personalizacja strony internetowej za pomocą Javascript API

Spis treści

This post is also available in: Czeski Angielski

Samba Javascript API umożliwia twórcom stron internetowych integrację personalizacji bezpośrednio z układem strony e-sklepu.

Widżety ramek rekomendacyjnych

Jeśli wolisz łatwo osadzić nasz widget na swojej stronie bez zaawansowanych opcji edycji projektu, postępuj zgodnie z tym samouczkiem.

Przewodnik wdrażania

  1. Samba SmartPoint
    • Przed rozpoczęciem personalizacji stron internetowych zawsze upewnij się, że skrypt śledzący SmartPoint – Samba jest poprawnie zainstalowany na twoich stronach internetowych.
    • Można to sprawdzić w konsoli javascript, sprawdzając, czy obiekt diffAnalytics jest dostępny w zakresie globalnym.
    • Wszystkie skrypty, w tym smartPoint i metody personalizacji stron internetowych, powinny być zaimplementowane w tym samym miejscu – GTM lub backend platformy e-sklepu! W przeciwnym razie mogą wystąpić problemy z odpowiedzią personalizatora ze względu na asynchroniczne zachowanie GTM. Możesz łatwo zarządzać takim zachowaniem za pomocą naszej kolejki onload .
    • Skrypt śledzenia zamówień jest wymagany do oceny wydajności personalizacji stron internetowych.
  2. Integracja danych 
    • Wymagane jest, aby produkty były zintegrowane, ponieważ algorytm rekomendacji Samba działa w oparciu o nie.
    • Kanał zamówień jest wymagany dla rekomendatorów personalisedComplements i basketComplements .
    • Kanał klientów jest opcjonalny, ale zdecydowanie zalecamy jego integrację w celu uzyskania lepszej wydajności.
  3. Projektowanie widżetów
    • Przygotuj (lub zakoduj) projekt widżetu, który będzie dokładnie pasował do wyglądu Twojej witryny, tak aby użytkownik nawet nie wiedział, że jest to nasza wyróżniona usługa.
  4. Personalizacja strony internetowej za pomocą Javascript API
    • Wywołaj naszą metodę JS w swoim widgecie, aby dostarczyć wybranemu komponentowi nasze rekomendowane produkty do wyświetlenia.
      • Strona główna rekomendacja  – personalisedHomepage 
      • Szczegóły produktu („Inni klienci również dokonali zakupu”) – rekomendator personalisedComplements 
      • Szczegóły produktu („Może Ci się również spodobać”) – spersonalizowana rekomendacja personalisedSubstitutes 
      • Strona koszyka – rekomendator basketComplements 
    • Zobacz zaawansowane opcje zarządzania polityką prywatności.
  5. Ocena rezultatów
    • Skorzystaj z możliwości oznaczania widżetów w celu szybkiego porównania wydajności bezpośrednio w Sambie.

Javascript API

Przedmiot personalizacji

Wszystkie funkcje personalizacji są dostępne za pośrednictwem obiektu personalizacji, który jest instancjonowany przez wywołanie metody personalizatora w obiekcie diffAnalytics 

var yPers = diffAnalytics.personaliser("campaignName");

campaignName to ciąg znaków identyfikujący kampanię. Jest to przydatne, jeśli chcesz przetestować A/B różne style lub miejsca docelowe – na przykład: „prawy górny róg” lub »fantazyjny nagłówek«.

Obiekt personalizacji udostępnia następujące metody personalizacji strony:

  • personalisedComplements(params, callback)
    • Dla widżetów w szczegółach produktu.
    • Samba zarekomenduje produkty „inni klienci również kupili” w ramach strategii sprzedaży krzyżowej, które mogą być istotne dla produktu, który klient aktualnie przegląda.
  • personalisedSubstitutes(params, callback)
    • Dla widżetów w szczegółach produktu.
    • Samba zarekomenduje produkty tego samego typu, które klient aktualnie przegląda.
  • personalisedHomepage(params, callback)
    • Dla widżetów na stronie głównej.
    • Samba poleci produkty, którymi sam klient lub podobni klienci byli ostatnio zainteresowani.
  • basketComplements(params, callback)
    • Dla widżetów na stronie koszyka.
    • Samba zarekomenduje produkty, które mogą być przydatne dla klienta na podstawie zawartości koszyka.

Argument params jest obiektem json z parametrami specyficznymi dla każdej metody.

Argument callback jest funkcją składającą się z dwóch argumentów (obiektu błędu i wyniku personalizacji). Jeśli wywołanie personalizacji powiedzie się, argument error ma wartość null, a result zawiera wynik personalizacji. Jeśli wystąpił błąd lub backend nie zareagował wystarczająco szybko, argument błędu zawiera obiekt z komunikatem o błędzie, a wynik personalizacji ma wartość null.

personalisedComplements(params, callback)

params = { count: n } gdzie n to liczba produktów do zarekomendowania (Samba zawsze zwraca co najwyżej n rekomendacji, tj. można uzyskać mniej niż n produktów, jeśli w magazynie nie ma wystarczającej liczby produktów odpowiednich dla klienta).

callback = function(err, result) { ... }

result = { recommendation: productArray, encodedQueryParams: queryParams }

Elementy productArray mają następującą postać:

{
    "id": "product-167802",
    "name": "Name of the product",
    "price": 2131,
    "price_before": 5774,
    "formattedPrice": "2 131 Kč",
    "formattedPrice_before": "5 774 Kč",
    "image": "http://www.shop.com/product-167802-image1.png",
    "url": "https://www.shop.com/product-167802?yottly_online=default&yottly_recommender=personalised-complements",
    "originalUrl": "https://www.shop.com/product-167802",
    "brand": "A brand",
    "interactionParams": { productId: "product-167802", yottlyOnline: {campaign: "default", recommender: "personalised-substitutes"}}   
}

a wszystkie pola pochodzą z bieżącego pliku źródłowego produktu sklepu z następującymi wyjątkami:

  • Pole image może być adresem URL do usługi zmiany rozmiaru obrazu Samba.
  • Pole url  jest ozdobione parametrami zapytania zawierającymi dodatkowe kody śledzenia. Są one niezbędne, aby Samba mogła śledzić wydajność personalizacji. originalUrl nie zawiera tych dodatkowych parametrów.
  • formattedPrice i formattedPrice_before są zlokalizowanymi formami „price” i „price_before” zgodnie z ustawieniami regionu sklepu internetowego w Sambie.
    • PRICE_CATEGORY dla grupy klientów z różnymi cenami dotyczy tylko spersonalizowanych produktów w e-mailingu. Obecnie nie ma to zastosowania do personalizacji w rekomendacjach internetowych – zwracana jest tutaj tylko cena domyślna (taka sama dla wszystkich klientów).
  • Pola interactionParams i queryParams  – zobacz Ocena wyników po więcej informacji.

personalisedSubstitutes(params, callback)

Parametry i argumenty wywołania zwrotnego są takie same jak w przypadku metody personalisedComplements 

personalisedHomepage(params, callback)

Parametry i argumenty wywołania zwrotnego są takie same jak w przypadku metody personalisedComplements 

basketComplements(params, callback)

params = { count: n, content : [ "product-id-1", "product-id-2", ... ] }

gdzie n to liczba produktów do zarekomendowania, a content to aktualna zawartość koszyka odwiedzającego. Każdy identyfikator produktu musi identyfikować produkt z pliku danych produktu.

Argument wywołania zwrotnego jest taki sam jak w przypadku metody personalisedComplements 

Ocena wyników

Samba mierzy wydajność personalizacji pod względem współczynnika klikalności i przychodów. Dane te można znaleźć na głównym pulpicie.

  • Współczynnik klikalności jest mierzony automatycznie, jeśli używasz adresów URL produktów dostarczonych przez rekomendatora lub dołączasz parametry zapytania, jak opisano powyżej.
  • Aby zmierzyć wydajność przychodów, śledzenie zamówień musi zostać zaimplementowane poprzez wywołanie metody  order(orderInfo) bazowego obiektu  diffAnalytics ,gdy użytkownik złoży zamówienie (na przykład na stronie z podziękowaniem).
    • Samba wykorzystuje zastrzeżony model atrybucji, w którym zalicza tylko zamówione produkty, które zostały zarekomendowane danemu klientowi, a rekomendacja została kliknięta w ciągu ostatnich 7 dni.

Śledzenie kliknięć

Ogólnie rzecz biorąc, masz 3 możliwości poinformowania nas o interakcji z naszą rekomendacją:

  1. Użyj bezpośrednio pola url  ,które zawiera już nasze parametry śledzenia.
  2. Użyj własnego adresu url i dołącz do niego queryParams Samby.
    • queryParams zawiera ciąg znaków w postaci: "yottly_online=default&yottly_recommender=personalised-complements"
  3. Użyj własnego adresu url (lub originalUrl)  bez żadnych parametrów zapytania Samby i wywołaj funkcję diffAnalytics.productInteraction(interactionParams)

diffAnalytics.productInteraction(interactionParams)

  • Pole interactionParams służy do śledzenia w sytuacjach, gdy użytkownik wchodzi w interakcję z polecanym produktem nie poprzez bezpośrednie kliknięcie, ale poprzez javascript. Przykładem takiej interakcji może być sytuacja, w której użytkownik bezpośrednio dodaje polecany produkt do koszyka lub wyświetla szczegóły produktu bez opuszczania strony.
Sprawdź poprawność implementacji

Przejdź do konsoli przeglądarki, wybierz Network, a jedno z żądań save-action powinno zawierać productInteraction w załączniku zawierającym interactionParams za każdym razem, gdy odwiedzający kliknie polecany produkt przez Sambę. Zwróć uwagę na poprawną pisownię.

productinteraction

Przykłady

Szybki przykład

Wypróbuj go w swojej konsoli!

var yPers = diffAnalytics.personaliser("campaignName");
var result = 0
yPers.personalisedHomepage({count: 6}, function(err, data) {result=data})
result.recommendation
result.recommendation[1].interactionParams

Pełny przykład

Utwórz obiekt personalizacji z nazwą kampanii „campaignName” i pobierz 10 produktów do personalizacji strony głównej.

var yPers = diffAnalytics.personaliser("campaignName");
yPers.personalisedHomepage({ count: 10 }, function (err, result) {

    if (err) {

        // deal with an error

    }

    else { 

        // result: object { recommendation: [array of products], encodedQueryParams: queryParams}
        // result.recommendation: array of recommended products in following format:
        //     {
        //      "id": "product-167802",
        //      "name": "Name of the product",      
        //      "price": 2131,
        //      "price_before": 5774,
        //      "formattedPrice": "2 131 Kč",
        //      "formattedPrice_before": "5 774 Kč",
        //      "image": "http://www.shop.com/product-167802-image1.png",
        //      "url": "https://www.shop.com/product-167802?yottly_online=campaignName&yottly_recommender=personalised-homepage",
        //      "brand": "A brand"
        //      "interactionParams": { productId: "product-167802", yottlyOnline: {campaign: "campaignName", recommender: "personalised-homepage"}}
        //     }         
        // Use url of recommended products or, if you want, use only ID of products and attach queryParams to the product url     
      
        //If the product was added to cart without pageload or the user clicked on the recommended product and you did not use queryParams nor our url field
        //call diffAnalytics.productInteraction(interactionParams) with interactionParams from the recommended product (it is up to you to handle these parameters)
     } });

Pełny przykład GTM

Pełny przykład implementacji skryptów Samba za pośrednictwem GTM (pamiętaj, aby użyć rzeczywistej domeny śledzenia w skrypcie śledzenia).

 

<script src=”//yottlyscript.com/script.js?tp=1″>/script>

<script>
var yPers = diffAnalytics.personaliser(“campaignName”);
yPers.personalisedHomepage({ count: 10 }, function (err, result) {

     if (err) {
          // deal with an error
     }

     else {

     // result: object { recommendation: [array of products], encodedQueryParams: queryParams}
     // result.recommendation: array of recommended products in following format:
     // {
     // “id”: “product-167802”,
     // “name”: “Name of the product”,
     // “price”: 2131,
     // “price_before”: 5774,
     // “formattedPrice”: “2 131 Kč”,
     // “formattedPrice_before”: “5 774 Kč”,
     // “image”: “http://www.shop.com/product-167802-image1.png”,
     // “url”: “https://www.shop.com/product-167802?yottly_online=campaignName&yottly_recommender=personalised-homepage”,
     // “brand”: “A brand”
     // “interactionParams”: { productId: “product-167802”, yottlyOnline: {campaign: “campaignName”, recommender: “personalised-homepage”}}
     // }
     // Use url of recommended products or, if you want, use only ID of products and attach queryParams to the product url

     //If the product was added to cart without pageload or the user clicked on the recommended product and you did not use queryParams nor our url field
     //call diffAnalytics.productInteraction(interactionParams) with interactionParams from the recommended product (it is up to you to handle these parameters)

     }
});
</script>
 

 

This post is also available in: Czeski Angielski

Zaktualizowano na 25 kwietnia, 2025

Czy ten artykuł był pomocny?

Yes No

Artykuły powiązane