Wszystkie kolekcje
Silnik rekomendacji produktowych
Wdrożenie samodzielne: Backend - REST API
Instrukcja wdrożenia samodzielnego: Backend - REST API
Instrukcja wdrożenia samodzielnego: Backend - REST API
M
Napisane przez Martyna Woźniszczuk
Zaktualizowano ponad tydzień temu

Rozwiązanie to podobnie jak wdrożenie po NPM (https://howto.quarticon.com/pl/articles/6264987-wdrozenie-samodzielne-frontend-pwa-npm-api ) w całości odbywa się po stronie klienta. Różnica jest taka, że wdrożenie po API z racji niejawnych kluczy dostępowych musi odbyć się po stronie backendu.

Szczegółowe informacje o API, znajdziesz w dokumentacji:

PL: https://docs.quarticon.com/storeapi/dokumentacja/

EN: https://docs.quarticon.com/storeapi/documentation/

Spis treści:

Czego potrzebujesz przed rozpoczęciem wdrożenia

Aby móc rozpoczac wdrożenie potrzebujesz przygotowanego konta w systemie QuarticOn.

Konto musi posiadać:

  • ustawiony i sprawdzony katalog produktowy (więcej o przygotowaniu katalogu znajdziesz tutaj)

    Podczas wgrywania katalogu chętnie wspomożę Cię nasz zespół. Plik XML, najlepiej w formie Google Merchant, może zawierać dodatkowe dane, np. oceny produktów, ranking, dodatkowe id wykorzystywane do dodawania do koszyka, dlatego nasz zespół wspomoże Cię w przekazaniu tych wartości do naszego systemu, aby potem można było je wykorzystać podczas generowania rekomendacji.

    Instrukcję stworzenia feeda w formacie znajdziesz w artykule Jak wygenerować feed produktowy dla Google Shopping?, instrukcję implementacji katalogu produktowego znajdziesz zaś w artykule Implementacja feeda XML do katalogu w panelu QuarticOn.

  • przygotowane ramki z ustawionymi logikami rekomendacji
    (więcej o logikach i strategiach rekomendacji znajdziesz w artykule Strategie rekomendacji oraz Strategie rekomendacji, wprowadzenie)

Przed rozpoczęciem prac potrzebujesz na początku dwóch zmiennych:

  • CUSTOMER_SYMBOL – ciąg znaków identyfikujący Twoje konto w systemie QuarticOn,

  • API-KEY – klucz do API, umożliwiający autoryzację w naszym systemie,

  • QDPI – identyfikatory ramek, które będzie trzeba przekazać podczas pobierania rekomendacji.

CUSTOMER_SYMBOL otrzymasz od swojego opiekuna QON. Jeśli nie posiadasz konta w naszym systemie albo po prostu masz pytania, skontaktuj się z naszym działem sprzedaży.

Główne założenia wymagane do prawidłowego działania Systemu Rekomendacji QuarticOn

  1. Katalog produktów jest niezbędny do tego aby wyświetlać rekomendacje.

    1. Domyślnie katalog jest odświeżany co 24h (najczęściej wykorzystywanym katalogiem jest ten w formacie XML zgodny z Google Merchant)

    2. Przygotuj katalog w formacie XML z produktami oraz niezbędnymi danymi, oraz przekaż go opiekunowi, aby został on uruchomiony na Twoim koncie.

  2. Przekazywane do nas ID PRODUKTÓW muszą być zgodne z tymi w katalogu produktów.

  3. Aby system uczył się, potrzebujemy abyś dostarczał/a nam wszystkie zachowania użytkownika:

    1. wyświetlenia karty produktu (proces implementacji opisany niżej)

    2. kliknięcia w nasze ramki rekomendacyjne (proces implementacji opisany niżej)

    3. produkty zakupione przez klienta (proces implementacji opisany niżej)

Przykładowa ścieżka zachowania użytkownika na stronie

Poszczególne etapy są opisane niżej. Tu przedstawiamy przykładową ścieżkę użytkownika.

  1. Użytkownik wchodzi na stronę główną

    1. na stronie głównej użytkownik widzi ramkę rekomendacyjną pod tytułem np. Wybrane dla Ciebie lub Bestesellery

  2. Użytkownik wchodzi na kartę produktu

    1. do systemu QON zostaje wysłana informacja o wyświetleniu produktu który użytkownik odwiedził.
      ​https://docs.quarticon.com/storeapi/dokumentacja/#operation--track-event-post

    2. https://docs.quarticon.com/storeapi/dokumentacja/#definition-EventProductView

  3. Użytkownik klika w ramkę rekomendacji QON wyświetlającą produkty podobne

    1. do systemu QON zostaje wysłana informacja o kliknięciu w produkt
      ​https://docs.quarticon.com/storeapi/dokumentacja/#operation--track-event-post

    2. https://docs.quarticon.com/storeapi/dokumentacja/#definition-EventClick

  4. Użytkownik dodaje do koszyka produkt kliknięty z ramki QON

  5. Użytkownik dokonuje zakupu tego produktu

    1. System QON dostaje informację o dokonanej transakcji
      ​https://docs.quarticon.com/storeapi/dokumentacja/#operation--track-event-post

    2. https://docs.quarticon.com/storeapi/dokumentacja/#definition-EventTransaction

W przypadku gdy zakup został dokonany po kliknięciu w ramkę rekomendacji, produkt ten zostanie potraktowany jako zakup dzięki QON.

Zakup dokonany w ciągu 24h od momentu kliknięcia w rekomendację jest traktowany jako zakup z rekomendacji QON.

Proces implementacji krok po kroku

1 .Przygotuj ramki rekomendacyjne

Nasz zespół przygotuje dla Ciebie ramki zgodnie z naszymi best practice – wtedy ten krok możesz pominąć.

Możesz natomiast dostosować ramki do własnych potrzeb już na etapie późniejszej współpracy tzn. dodać nowe ramki, zmienić im logiki itp. Pomocny będzie artykuł Dodawanie ramek rekomendacji.

O tym, jakie rekomendacje na jakiej stronie proponujemy, poczytasz tutaj, a tutaj z kolei znajdziesz opisy poszczególnych strategii.

Aby dodać nową ramkę rekomendacji należy przejść do zakładki Rekomendacje i wybrać przycisk Dodaj widget. Zostaniesz przekierowany do edytora, który składa się z czterech etapów:

  1. Wskaż miejsce dla rekomendacji w sklepie

  2. Ustawienia widgetu (zaawansowane kierowanie ramki - pominiemy w instrukcji)

  3. Wybierz strategie rekomendacji produktów

  4. Kreator drag&drop

  5. Podsumowanie

Wskaż miejsce dla rekomendacji w sklepie

Struktura miejsc dla ramek jest wstępnie zdefiniowana przez nasz system i wygląda następująco:

Powyższy układ został przez nas opracowany na bazie wieloletnich doświadczeń z klientami i sprawdzonych przez nas metod. Miejsca ramek mogą zostać zmodyfikowane przez użytkownika, jednak zalecamy, aby od początku zarządzania rekomendacjami trzymać się określonej hierarchii wyznaczonych miejsc rekomendacji.

Nazwy stron i miejsc na stronach oznaczają wstępnie zakładaną pozycję, gdzie zostanie wywołana ramka rekomendacji. Przykładowo, jeżeli Twoim celem jest dodanie ramki na karcie produktu pod krótkim opisem produktu, ale przed sekcją dodatkowych informacji o produkcie, zalecamy wykorzystanie placementu STRONA PRODUKTU -> Middle.

W ramach jednego placementu możesz zdefiniować kilka ramek rekomendacji. Spowoduje to losowe wybieranie ramek przy każdorazowym wywołaniu placementu, do którego są przypięte. W zakładce Wskaż miejsce dla rekomendacji w sklepie należy wybrać miejsce w zdefiniowanej strukturze, w którym dana ramka ma się pojawić.

Wybór strategii rekomendacji

W kolejnej zakładce Wybierz strategię rekomendacji produktu dostępnych jest 12 predefiniowanych strategii rekomendacji. Po najechaniu kursorem na strategię, pojawi się jej krótki opis. Wybierz jedną z nich i zdecyduj jakie produkty mają zostać wyświetlone użytkownikowi.
​

Poniżej przedstawiamy nasze best practice strategii rekomendacji:

Pamiętaj!

Opisane praktyki nie muszą sprawdzić się u każdego klienta, ponieważ każda branża rządzi się swoimi prawami i może okazać się, że zoptymalizowanie działania silnika rekomendacji w Twoim sklepie wymaga przetestowania innych ustawień. Powyższy schemat jest jedynie propozycją, jesteśmy otwarci na Twoje sugestie.

Kreator drag&drop

W przypadku wdrożenia poprzez API, kreator nie będzie wykorzystywany, gdyż to Ty decydujesz o wyglądzie swoich rekomendacji. Nazwij swoją ramkę tak, aby wiedzieć, gdzie on się znajduje i przejdź dalej do kolejnego etapu, klikając Dalej.

Podsumowanie

Sprawdź podsumowanie i zapisz ramkę.

Instrukcję powtórz dla wszystkich ramek, które chcesz zamieścić na swojej stronie.

Ramki można edytować, przesuwać, deaktywować – więcej szczegółów znajdziesz w tym artykule.

2. Zaimplementuj wysyłanie Informacji o odwiedzinach karty produktu

Do wysłania informacji o produkcie wykorzystamy Endpoint https://rest.quartic.pl/store/track/event , który przyjmie jako eventType eventProductView. Endpoint szerzej opisany jest tutaj.
​
W momencie, gdy użytkownik wejdzie na stronę produktu (niezależnie czy trafi tam z wyszukiwarki, strony głównej czy ramki QON) wysyłamy o tym informację do QON.

Dlaczego warto wysyłać ten event zawsze gdy użytkownik odwiedza stronę produktu? Ponieważ im szerzej znamy historię użytkownika na stronie, tym lepsze rekomendacje możemy mu serwować :)

W zależności od tego w jakiej technologii kod jest implementowany, przedstawiamy poniżej przykłady wykonania requestu (w poniższych przykładach zostały użyte zmockowane zmienne).

Przykłady kodu:

JAVASCRIPT:

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");


var raw = JSON.stringify({
  "customer": "CUSTOMER_SYMBOL",
  "eventType": "eventProductView",
  "timestamp": 1687957025,
  "cookie": "USER_IDENTIFIER",
  "productId": "PRODUCT_ID"
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://rest.quartic.pl/store/track/event", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

NODE.JS:

const axios = require('axios');
let data = JSON.stringify({
  "customer": "CUSTOMER_SYMBOL",
  "eventType": "eventProductView",
  "timestamp": 1687957025,
  "cookie": "USER_IDENTIFIER",
  "productId": "PRODUCT_ID"
});

let config = {
  method: 'post',
  url: 'https://rest.quartic.pl/store/track/event',
  headers: { 
    'x-api-key': 'YOUR_API_KEY', 
    'Content-Type': 'application/json'
  },
  data : data
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});

PHP:

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://rest.quartic.pl/store/track/event',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS =>'{
  "customer": "CUSTOMER_SYMBOL",
  "eventType": "eventProductView",
  "timestamp": 1687957025,
  "cookie": "USER_IDENTIFIER",
  "productId": "PRODUCT_ID"
}',
  CURLOPT_HTTPHEADER => array(
    'x-api-key: YOUR_API_KEY',
    'Content-Type: application/json'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

BASH:

curl --location 'https://rest.quartic.pl/store/track/event' \
--header 'x-api-key: YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data '{
  "customer": "CUSTOMER_SYMBOL",
  "eventType": "eventProductView",


  "timestamp": 1687957025,
  "cookie": "USER_IDENTIFIER",
  "productId": "PRODUCT_ID"
}'

3. Zaimplementuj wysyłanie Informacji o zakupach

Do wysłania informacji o produkcie, wykorzystamy Endpoint https://rest.quartic.pl/store/track/event , który przyjmie jako eventType eventTransaction. Endpoint szerzej opisany jest tutaj.

W momencie, gdy użytkownik dokona transakcji, niezależnie od sposobu płatności, wyślij całe zamówienie do QON. Jeśli dodajesz produkty gratisowe o cenie 0, lub inne promocyjne produkty do wielu zamówień, można je pominąć, gdyż mogą zaburzyć statystyki zakupowe.

JAVASCRIPT:

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "customer": "CUSTOMER_SYMBOL",
  "transactionId": "TRANSACTION_ID",
  "basket": [
    {
      "productId": "6666333",
      "price": 130,
      "quantity": 2
    },
    {
      "productId": "42445",
      "price": 930,
      "quantity": 2
    }
  ],
  "eventType": "eventTransaction",
  "userId": "LOGGEDIN_USER_ID",
  "timestamp": 1482840417,
  "cookie": "USER_IDENTIFIER"
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://rest.quartic.pl/store/track/event", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

NODEJS:

const axios = require('axios');
let data = JSON.stringify({
  "customer": "CUSTOMER_SYMBOL",
  "transactionId": "TRANSACTION_ID",
  "basket": [
    {
      "productId": "6666333",
      "price": 130,
      "quantity": 2
    },
    {
      "productId": "42445",
      "price": 930,
      "quantity": 2
    }
  ],
  "eventType": "eventTransaction",
  "userId": "1",
  "deviceId": "android-12",
  "timestamp": 1482840417,
  "cookie": "USER_IDENTIFIER"
});

let config = {
  method: 'post',
  maxBodyLength: Infinity,
  url: 'https://rest.quartic.pl/store/track/event',
  headers: { 
    'x-api-key': 'API-KEY', 
    'Content-Type': 'application/json', 
  },
  data : data
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
  
});

PHP:

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://rest.quartic.pl/store/track/event',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS =>'{
  "customer": "CUSTOMER_SYMBOL",
  "transactionId": "TRANSACTION_ID",
  "basket": [
    {
      "productId": "6666333",
      "price": 130,
      "quantity": 2
    },
    {
      "productId": "42445",
      "price": 930,
      "quantity": 2
    }
  ],
  "eventType": "eventTransaction",
  "userId": "1",
  "deviceId": "android-12",
  "timestamp": 1482840417,
  "cookie": "USER_IDENTIFIER"
}',
  CURLOPT_HTTPHEADER => array(
    'x-api-key: API-KEY',
    'Content-Type: application/json'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

4. Zaimplementuj ramki rekomendacji na swojej stronie

Aby rozpocząć proces samej implementacji, musisz wybrać ramkę do implementacji i posiadać jej placementID. PlacementId to nasz unikalny identyfikator ramki. Znajdziesz go przechodząc do zakładki Rekomendacje -> Widgety (https://cp.quarticon.com/upseller/myPlacements).

Proces implementacji opiszemy na przykładzie ramki Wybrane dla Ciebie na stronie głównej:

Kolorem, zaznaczyliśmy jej placementId – to właśnie jego potrzebujemy do implementacji.

Nasz placementId to: _qS_2tj3o. Możemy zarówno przekazać _qS_2tj3o, jak i samo 2tj3o, gdyż system rozpozna oba identyfikatory.

Request po rekomendacje

W celu pobrania rekomendacji, skorzystamy z endpointu: https://rest.quartic.pl/store/recommendation oraz metody GET, zatem spreparowany link możemy również otworzyć w przeglądarce. Endpoint szerzej opisany jest tutaj.

Budując zapytanie, musimy przekazać kilka niezbędnych zmiennych:

  • customer – Twój customerSymbol

  • placementId – identyfikator ramki, który zwróci produkty z odpowiednią logiką ustawioną w panelu

  • cookie lub deviceId – identyfikator użytkownika lub jego urządzenia

Dodatkowe parametry, które nie są wymagane:

  • userId – ID zalogowanego usera

  • filterProduct – ID produktu, do którego mają być serwowane rekomendacje (dotyczy logik Podobne, Cross-selling, Cross-selling koszyk)

  • filterCategory – filtr kategorii zgodny z tym, który jest w katalogu; pozwala zwrócić produkty tylko z danej kategorii; stosowany głównie na stronach kategorii

  • deduplicate – true, aby wyraźnie poprosić o zdeduplikowaną treść w przypadku wielu rekomendacji na jednej stronie

  • requestId – unikatowy identyfikator żądania (używany do deduplikacji rekomendacji); musi być użyty razem z parametrem "deduplicate" (dozwolone znaki: [a-z0-9A-Z-_])

Przykładowe wywołania:

JAVASCRIPT:

var requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://rest.quartic.pl/store/recommendation?customer=CUSTOMER_SYMBOL&placementId=PLACEMENT_ID&cookie=USER_IDENTIFIER", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

NODE:

const axios = require('axios');

let config = {
  method: 'get',
  maxBodyLength: Infinity,
  url: 'https://rest.quartic.pl/store/recommendation?customer=CUSTOMER_SYMBOL&placementId=PLACEMENT_ID&cookie=USER_IDENTIFIER',
  headers: { }
};

axios.request(config)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});

PHP:

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://rest.quartic.pl/store/recommendation?customer=CUSTOMER_SYMBOL&placementId=PLACEMENT_ID&cookie=USER_IDENTIFIER',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'GET',
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

Odpowiedź z API

W odpowiedzi zwrócony zostanie JSON z produktami:

{
    "status": "OK",
    "timestamp": 1688037828,
    "qrId": null,
    "duplicatesCount": 0,
    "data": [
        {
            "id": "198464",
            "title": "Example product title",
            "image": "https://example.com.pl/media/catalog/product/cache/ab49daceb272271aaf5653f0616d75be/4/f/4fss22tfshf037-81s-w-01-main.jpg",
            "description": "sizes_2",
            "url": "https://rec.quartic.pl/c.php?c=6d3e333af980102c&ci=68112&p=198464&pid=4&qdpi=lqr2&qrid=ad_649d69c4d611d&ss=rtb_24618&url=aHR0cHM6Ly80Zi5jb20ucGwvbGVnaW5zeS1rb2xhcmtpLXRyZW5pbmdvd2Utc3p5Ymtvc2NobmFjZS1kYW1za2llLTRmLXgtYW5hLWxld2FuZG93c2thLTRmczJ0ZnNoZjAzNy04MXMuaHRtbA%3D%3D&k=6543234567",
            "price": "79,99",
            "priceOld": "129,99",
            "custom1": "https://example.com.pl/media/catalog/product/cache/ab49daceb272271aaf5653f0616d75be/4/f/4fss22tfshf037-81s-w-02-mini.jpg",
            "custom2": "",
            "custom3": "",
            "custom4": "",
            "status": true,
            "trackingString": "eyJjIjoiNmQzZTMzM2FmOTgwMTAyYyIsImNpIjoiNjgxMTIiLCJwIjoiMTk4NDY0IiwicGlkIjoiNCIsInFkcGkiOiJscXIyIiwicXJpZCI6ImFkXzY0OWQ2OWM0ZDYxMWQiLCJzcyI6InJ0Yl8yNDYxOCJ9"
        }
        ....
    ]
}

Teraz wystarczy, że produkty te zostaną opakowane w HTML i umieszczone na stronie np. w taki sposób:

lub taki:

Pamiętaj, że integrując się poprzez API, to, jak będą wyglądały ramki, zależy od Ciebie.

Możesz zdecydować, aby każda ramka wyglądała inaczej lub, opierając się na swoich ramkach na stronie, odwzorować je w taki sposób, aby niczym różniły się od natywnych ramek znajdujących się na stronie.

Tytuły Twoich ramek również zależą od Ciebie, dlatego wdrażając się w ten sposób, masz największą swobodę.

5. Zaimplementuj ramki rekomendacji na pozostałych stronach

Sposób implementacji na innych stronach jest taki sam jak w powyższym przykładzie.

Dopuszczone znaki: [a-z0-9A-Z\-_,!|].

Filtry należy przekazać jako encodeURI, tzn. tak, aby znaki specjalne były zamienione na ich odpowiedniki z %:

  • "kategoria_1|kategoria_2" muszą być przekazane jako :

  • "kategoria1%7Ckategoria2"

Różnice są nastomiast w użytym filtrowaniu. Rekomendujemy poniższy sposób implementacji:

  • Strona kategorii, podkategorii, marki

    • przekaż do parametru rekomendacji filtr kategorii jako filterCategory:
      ​fliterCategory=CATEGORY_ID – zwróci tylko produkty z kategorii o podanym ID

      • kategoria1,kategoria2,kategoria3 – system wybierze produkty, które należą do: kategoria1 ORAZ kategoria2 ORAZ kategoria3

      • kategoria1|kategoria2|kategoria3 – system wybierze produkty, które należą do: kategoria1 LUB kategoria2 LUB kategoria3

      • !kategoria1 – system wybierze produkty, które NIE należą do: kategoria1

      • !kategoria1,kategoria2 – system wybierze produkty, które NALEŻĄ do: kategoria2, ale NIE należą do kategoria1

      • !kategoria1,kategoria2|kategoria3 – system wybierze produkty, które NALEŻĄ do: kategoria2 LUB kategoria3 ORAZ NIE należą do kategoria1

  • Strona produktu, koszyka
    Implementacja tego rozwiązania dotyczy rekomendacji z logikami Produkty Podobne, Cross-selling oraz Cross-selling koszyk, Up-selling; w przypadku pozostałych logik parametr zostanie pominięty

    • przekaż do konfiguracji ramki ID oglądanego produktu lub produktów, które znajdują się w koszyku

      • przekaż do requestu filterProduct

        • filterProduct=ID_PRODUKTU

        • filterProduct=IDPRODUKTU_1,ID_PRODUKTU_2

Powyższe filtrowania można ze sobą łączyć.

Możesz na karcie produktu wyświetlać produkty tylko z konkretnej kategorii lub produkty z wykluczonej kategorii.

Należy mieć na uwadze to, że w takich przypadkach silnik rekomendacji nie zawsze znajdzie wymaganą liczbę produktów spełniających warunki dopasowania do rekomendacji.

6. Identyfikacja transakcji z rekomendacji

Identyfikacja transakcji jako ta dokonana z rekomendacji QON jest możliwa na dwa sposoby:

  • przeklik poprzez c.php, który wygenerowany jest automatycznie z systemu i zwrócony w kluczu url w rekomendacjach:
    ​

    {
        "id": "198464",
        "title": "Example product title",
        "image": "https://example.com.pl/media/catalog/product/cache/ab49daceb272271aaf5653f0616d75be/4/f/4fss22tfshf037-81s-w-01-main.jpg",
        "description": "sizes_2",
        // wygenerowany link z przeklikiem
        "url": "https://rec.quartic.pl/c.php?c=6d3e333af980102c&ci=68112&p=198464&pid=4&qdpi=lqr2&qrid=ad_649d69c4d611d&ss=rtb_24618&url=aHR0cHM6Ly80Zi5jb20ucGwvbGVnaW5zeS1rb2xhcmtpLXRyZW5pbmdvd2Utc3p5Ymtvc2NobmFjZS1kYW1za2llLTRmLXgtYW5hLWxld2FuZG93c2thLTRmczJ0ZnNoZjAzNy04MXMuaHRtbA%3D%3D&k=6543234567",
        
        "price": "79,99",
        "priceOld": "129,99",
        "custom1": "https://example.com.pl/media/catalog/product/cache/ab49daceb272271aaf5653f0616d75be/4/f/4fss22tfshf037-81s-w-02-mini.jpg",
        "custom2": "",
        "custom3": "",
        "custom4": "",
        "status": true,
        "trackingString": "eyJjIjoiNmQzZTMzM2FmOTgwMTAyYyIsImNpIjoiNjgxMTIiLCJwIjoiMTk4NDY0IiwicGlkIjoiNCIsInFkcGkiOiJscXIyIiwicXJpZCI6ImFkXzY0OWQ2OWM0ZDYxMWQiLCJzcyI6InJ0Yl8yNDYxOCJ9"
    }

  • dzięki zdarzeniu: eventClick

UWAGA: większość integracji może się odbyć – dzięki przeklikowi – bez wysyłania do systemu Quarticon eventClick.

Wdrożenie poprzez przeklik przez c.php

W przypadku tej metody jedyne, co musisz wykonać, to do kodu HTML do TAGów a w atrybucie href przekazać link, który znajduje się w kluczu url.
​

<a href="https://rec.quartic.pl/c.php?c=6d3e333af980102c&ci=68112&p=198464&pid=4&qdpi=lqr2&qrid=ad_649d69c4d611d&ss=rtb_24618&url=aHR0cHM6Ly80Zi5jb20ucGwvbGVnaW5zeS1rb2xhcmtpLXRyZW5pbmdvd2Utc3p5Ymtvc2NobmFjZS1kYW1za2llLTRmLXgtYW5hLWxld2FuZG93c2thLTRmczJ0ZnNoZjAzNy04MXMuaHRtbA%3D%3D&k=6543234567">
    <picture>
    ....
    </picture>
</a>

Kliknięcie w element spowoduje przejście na stronę, która zarejestruje kliknięcie, a następnie przekieruje na stronę docelową. To wszystko :)

Wdrożenie poprzez eventClick

Kiedy eventClick jest przydatny?

W przypadkach, kiedy chcesz wykorzystać silnik rekomendacyjny na przykład w aplikacji mobilnej (wykonanie przeklików jest tu problematyczne z racji opierania aplikacji na Aktywnościach) albo mocno AJAXowych sklepach, które odświeżają jedynie pojedynczy kontener strony – wtedy lepiej jest skorzystać z wyświetlania produktu bez wykonania przekliku przy jednoczesnym wyzwoleniu eventClick’a.

Do wdrożenia eventClick konieczny jest parametr trackingString, który dostaniemy wraz z wygenerowaną ramką w kluczu trackingString

Jak wyzwolić eventClick?

  • wysłany przy użyciu POST lub GET

  • ilekroć użytkownik kliknie w rekomendowany produkt

  • zapytanie powinno mieć prawidłową strukturę (różną dla metody, którą je wysyłamy)

POST:

{
    "productId": "tekst",
    "eventType": "eventClick",
    "userId": "tekst", 
    deviceId": "tekst",
    "timestamp": "121",
    "referrer": "tekst",
    "cookie": "tekst",
    "trackingString": "tekst zwrocony wraz z produktem z rekomendacji",
    "customer": "symbol"
}

gdzie:

  • id produktu powinno być takie samo, jak podane w procesie synchronizacji

  • userId powinno być zgodne z identyfikatorem użytkownika w sklepie; jeżeli użytkownik jest niezalogowany, pole powinno pozostać puste

  • powinno być podane albo cookie albo deviceId gdzie:

    • cookie jest zmienialnym identyfikatorem użytkownika (można je skasować/przegenerować);

    • deviceId natomiast jest niezmienialne (numer IMEI telefonu, numer seryjny telewizora itd);

  • referrer może być:

    • prawidłowym URL strony, która spowodowała przekierowanie na produkt

    • nazwą Activity, która została wyzwolona np. na telefonie z system Android przed przejściem na produkt

  • timestamp – czas wystąpienia zdarzenia

  • trackingString – tekst zwrócony wraz z danymi produktu z rekomendacji; zauważ, że każdy produkt ma inny trackingString oraz zmienia się on z każdą kolejną rekomendacją.

Czy to odpowiedziało na twoje pytanie?