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:
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
Katalog produktów jest niezbędny do tego aby wyświetlać rekomendacje.
Domyślnie katalog jest odświeżany co 24h (najczęściej wykorzystywanym katalogiem jest ten w formacie XML zgodny z Google Merchant)
Przygotuj katalog w formacie XML z produktami oraz niezbędnymi danymi, oraz przekaż go opiekunowi, aby został on uruchomiony na Twoim koncie.
Przekazywane do nas ID PRODUKTÓW muszą być zgodne z tymi w katalogu produktów.
Aby system uczył się, potrzebujemy abyś dostarczał/a nam wszystkie zachowania użytkownika:
wyświetlenia karty produktu (proces implementacji opisany niżej)
kliknięcia w nasze ramki rekomendacyjne (proces implementacji opisany niżej)
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.
Użytkownik wchodzi na stronę główną
na stronie głównej użytkownik widzi ramkę rekomendacyjną pod tytułem np. Wybrane dla Ciebie lub Bestesellery
Użytkownik wchodzi na kartę produktu
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
Użytkownik klika w ramkę rekomendacji QON wyświetlającą produkty podobne
do systemu QON zostaje wysłana informacja o kliknięciu w produkt
https://docs.quarticon.com/storeapi/dokumentacja/#operation--track-event-post
Użytkownik dodaje do koszyka produkt kliknięty z ramki QON
Użytkownik dokonuje zakupu tego produktu
System QON dostaje informację o dokonanej transakcji
https://docs.quarticon.com/storeapi/dokumentacja/#operation--track-event-post
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:
Ustawienia widgetu (zaawansowane kierowanie ramki - pominiemy w instrukcji)
Wybierz strategie rekomendacji produktów
Kreator drag&drop
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ójcustomerSymbol
placementId
– identyfikator ramki, który zwróci produkty z odpowiednią logiką ustawioną w panelucookie
lubdeviceId
– identyfikator użytkownika lub jego urządzenia
Dodatkowe parametry, które nie są wymagane:
userId
– ID zalogowanego userafilterProduct
– 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 kategoriideduplicate
– true, aby wyraźnie poprosić o zdeduplikowaną treść w przypadku wielu rekomendacji na jednej stronierequestId
– 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 %:
|
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 IDkategoria1,kategoria2,kategoria3
– system wybierze produkty, które należą do: kategoria1 ORAZ kategoria2 ORAZ kategoria3kategoria1|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ętyprzekaż 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 kluczuurl
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:
pamiętamy o podmianie wartości pola customer na prawidłowy symbol klienta
wysyłamy na adres: https://rest.quartic.pl/store/track/event
{
"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ą.