Pierwszym krokiem niezbędnym w implementacji usług dostarczanych przez QuarticOn jest uzyskanie dostępu do Panelu Klienta. Konto możesz założyć samodzielnie lub skontaktować się z nami w cel przyznania danych do logowania. Możesz także przejść do artykułu Rejestracja i konfiguracja konta QuarticOn.

1. Wepnij skrypt QuarticOn

Wepnij główny, spersonalizowany skrypt do kodu strony. Skrypt ten, w postaci niespersonalizowanej wygląda tak:

<script type="text/javascript">
(function() {
var _qS = document.createElement('script');
_qS.type = 'text/javascript';
_qS.async = true;
_qS.src = '//qjs.quartic.pl/qjs/Customer_ID.js';
(document.getElementsByTagName('head')[0]||
document.getElementsByTagName('body')[0]).appendChild(_qS);
})();
</script>

Właściwy kod, wygenerowany specjalnie dla Ciebie, pobierzesz z Panelu Klienta. Więcej o skrypcie głównym QuarticOn dowiesz się z artykułu Skrypt główny.

2. Przekaż nam swoje produkty

Aby wyszukiwanie działało poprawnie, musimy zebrać wszystkie informacje na temat Twoich produktów. Najprostszym i zalecanym sposobem jest przekazanie nam pliku XML (tzw. feeda) zawierającego pełny katalog produktów ze sklepu.

Dodaj feed produktowy

Aktualnie obsługujemy feed w popularnym standardzie Google Merchant. Jeśli Twój sklep pozwala na wygenerowanie takiego pliku, pobierz jego adres URL i wstaw go w panelu administracyjnym QuarticOn.

Szczegółowe informacje o wprowadzeniu feeda do systemu znajdziesz w artykule Katalog produktów w formie pliku XML.

Uwaga! Pamiętaj, żeby jako format katalogu wybrać Quartic XML (AWS S3/Lambda).

Obsługa wariantów produktów

Jeżeli chcesz wprowadzić grupowanie wariantów tego samego produktu, musisz utworzyć grupy produktowe w tagu <g:item_group_id>.

Zgodnie ze specyfikacją Google Merchant: item_goup_id: Identyfikator grupy produktów, które występują w różnych wersjach (odmianach). Podaj tę samą wartość dla każdego produktu w tej samej grupie produktów. Na przykład, jeśli produkt różni się rozmiarem lub kolorem, wpisz wartości atrybutów rozmiar [size] i kolor [color] dla wszystkich produktów, które mają taką samą wartość w atrybucie identyfikator grupy produktów [item_​group_​id].

Uwaga! Jeżeli korzystasz z grupowania produktów, to tag item_group_id musisz podać także dla produktów, które nie posiadają wariantów. Wartość item_group_id dla takich wariantów powinna być równa id produktu.

Uwaga! Jeżeli chcesz mieć tagi, które zawierają opcjonalne informacje (np. kolor, labelki, marżowość, rozmiary itp.), należy dodać te tagi do feeda i poinformować nas o chęci ich użycia.

Przykład implementacji

<item>
<g:id>1234</g:id>
<g:title>My product name</g:title>
<g:status>1</g:status>
<g:price>12.99</g:price>
<g:price_old>20.49</g:price_old>
<g:link>https://mydomain.com/my-product-link/</g:link>
<g:image>https://static.mydomain.com/my-product-image.png</g:image>
<g:product_type>Category 1 > Category 1.1 > Category 1.1.1</g:categories>
<g:item_group_id>123456789</g:item_group_id>
<g:color>red</g:color>
<g:size>L</g:size>
</item>

3. Wprowadź tracking transakcji (zalecane)

Dzięki trackingowi transakcji zyskujesz dodatkowe informacje na temat skuteczności wyszukiwania na stronie. W panelu klienta pokażemy Ci, które frazy i które produkty generują:

  • najlepszą konwersję,

  • najliczniejszą sprzedaż,

  • najwyższą sprzedaż

z wyszukiwania.

Na stronie podziękowania za dokonanie zakupu (thank you page) należy dodać poniższy skrypt do kodu strony. Zmiany dodajemy pod koniec sekcji <body></body>:

<script type="text/javascript">
var upsParams = upsParams || [];
upsParams.push(['transaction', 'SCRIPT_TRANSACTION_ID']);
upsParams.push(['user','SCRIPT_USER_ID']);
/* SCRIPT_LOOP_START*/
upsParams.push(['action','purchase']);
upsParams.push(['product','SCRIPT_PRODUCT_ID']);
upsParams.push(['price','SCRIPT_PRICE']);
upsParams.push(['quantity','SCRIPT_QUANTITY']);
upsParams.push(['execute']);
/* SCRIPT_LOOP_END */
</script>

Skrypt zbiera i przetwarza następujące zmienne dynamiczne:

  • transaction – unikalne id transakcji zarejestrowanej w sklepie

  • user – id użytkownika, który dokonał zakupu; jeżeli użytkownik jest niezalogowany należy przekazać pustą wartość (upsParams.push(['user', '']);)

  • product – unikalne ID produktu, zgodne z ID podanym w tagu produktowym

  • price – cena produktu

  • quantity – liczba sztuk produktu

W celu zapewnienia poprawności działania skryptu muszą zostać przekazane odpowiednie zmienne:

  1. SCRIPT_TRANSACTION_ID – unikalne ID transakcji

  2. SCRIPT_USER_ID – podanie zmiennej jest opcjonalne; jeśli po zalogowaniu w sklepie jako klient dostępne jest user_id, wstaw je w tym miejscu, jeśli nie, pozostaw pusty string

  3. /* SCRIPT_LOOP_START */ – tutaj należy utworzyć pętlę, która przeskoczy po wszystkich zakupionych produktach i wyciągnie z nich poniższe dane: SCRIPT_PRODUCT_ID – unikalny ID produktu, musi się zgadzać z danymi katalogowymi; SCRIPT_PRICE – cena jednostkowa produktu; SCRIPT_QUANTITY – liczba zakupionych sztuk danego produktu

  4. /* SCRIPT_LOOP_END */ – koniec pętli

Ważne! Spójność ID produktów w całym sklepie jest podstawą jakości analityki. Dlatego ID produktu powinno być jednoznaczne i unikalne, przypisane tylko do jednego produktu. Dany produkt powinien mieć spójne ID lub group_id zarówno w systemie sklepowym, jak i w feedzie.

4. Dostarcz nam niezbędne informacje do funkcjonowania wyszukiwarki

Wypełnij formularz specyfikacji wymagań funkcjonalnych, przesłany przez Twojego opiekuna biznesowego.

5. Dodaj tag do podpięcia wyszukiwarki oraz modułu SERP

Gdy nie masz wyszukiwarki na swojej stronie

W miejscu, gdzie ma się pojawić pole wyszukiwania, dodaj kod:

<div class="qon-tiny-smart-search" />

Gdy chcesz zmienić wyszukiwarkę na wyszukiwarkę AI Smart Search

W tym przypadku należy usunąć aktualne pole wyszukiwania w sklepie i dodać element:

<div class="qon-tiny-smart-search" />

Gdy chcesz dodać kontener, wewnątrz którego pojawią się wyniki wyszukiwania i filtry

Dodaj element:

<section class=”qon-smart-search”>

Uwaga! Nasza wyszukiwarka podepnie się wyłącznie do jednego taga z klasą qon-tiny-smart-search. Podpięcie nastąpi do taga, który znajduje się najwyżej w drzewie DOM. Produkt zawsze podepnie się tylko raz i nie ma możliwości dodania kilku instancji działających w tym samym czasie.

6. Zobacz podgląd wyszukiwarki

Skontaktuj się z nami i przekaż nam informację, że miejsce na wyszukiwarkę jest już gotowe. W odpowiedzi przekażemy Ci, w jaki sposób możesz przetestować wyszukiwarkę i np. dostosować jej wizualizację do swoich potrzeb.

Możesz ostylować ją według wytycznych z punktu poniżej: Dostosuj wizualizację (opcjonalnie).

7. Dostosuj wizualizację (opcjonalnie)

Nasza wyszukiwarka trafia do Ciebie wraz z domyślnym szablonem. Jednak, jeśli chcesz, możesz dostosować wygląd poszczególnych elementów do swoich potrzeb.

Aby to zrobić, należy nadpisać style CSS dla wybranych klas opisujących kawałki wyszukiwarki. Poniżej, dla Twojej wygody, znajdziesz listę elementów tworzących poszczególne części wyszukiwarki wraz z kodem HTML.

Elementy główne

Wyszukiwarka składa się z dwóch podstawowych elementów, które dzielą się na mniejsze części.

  • Kontener onfocus – tzw. kontener, który pojawia się pod polem wyszukiwania, tuż po kliknięciu w nie, zanim użytkownik zacznie wpisywać frazę wyszukiwania i zanim przekroczy ona 3 znaki. Zawiera on:

    a. pole wyników wyszukiwania z przyciskiem

    b. sekcję z popularnymi hasłami i frazami/filtrami predefiniowanymi

    c. loader

    d. sekcję z top produktem (opcjonalnie)

    e. sekcję z popularnymi produktami

  • Kontener autocomplete – tzw. mała wyszukiwarka, którą najczęściej umieszczamy w nagłówku strony. Po wpisaniu przez użytkownika 3-ech znaków hasła, pojawia się w miejscu kontenera onfocus. Zawiera podpowiedzi i produkty popularne dla wpisywanej frazy. Składa się z:


    a. pola wyszukiwania z przyciskiem

    b. sekcji z autouzupełnionymi hasłami

    c. loadera

    d. sekcji Bestseller dla wyszukiwanej frazy (opcjonalnie)

    e. sekcji z produktami dopasowanymi na bazie wyszukiwania

  • Kontener wyników wyszukiwania (SERP – search engine results page). Składa się z:


    a. nagłówka z informacją o wyszukiwanej frazie i liczbie wyników
    b. paska bocznego umożliwiającego zawężanie wyników wyszukiwania (filtry)
    c. listy z wynikami wyszukiwania z możliwością sortowania i paginacją

Dostosowanie wyglądu

Poniżej znajdziesz kontenery wraz z klasami HTML, które pomogą Ci zlokalizować na stronie najważniejsze moduły produktu AI Smart Search. Kontenery te, wraz z ich zawartością, można ostylować wedle uznania.

Uwaga! Możesz zmienić lub nadpisać dowolne style css wedle uznania. Jeżeli chcesz zmienić HTML względem domyślnego w jednym z modułów, np. dodać wrappera z labelami w kontenerze produktowym, musisz zgłosić się do nas.

Kontener wyszukiwarki

  • <div class="qon-tiny-smart-search"> -> kontener dla modułów AI Smart Search

  • <div class="autocomplete-search-container"> -> kontener dla inputu i przycisku Wyszukaj

  • <div class="loader-container"> -> kontener dla loadera

  • <div class=”qon-on-focus”> -> kontener dla modułu onfocus

  • <div class="results-container"> -> kontener dla modułu autocomplete

Kontenery SERP

  • <section class=”qon-smart-search search has-results”> -> kontener, w którym umieszczony jest moduł SERP

  • <h1 class=”result-header”> -> kontener, w którym umieszczony jest nagłówek sekcji wyników wyszukiwania

  • <aside class=”qon-filters-wrapper”> -> kontener, w którym umieszczone są filtry wyników wyszukiwania

  • <div class=”qon-results-container”> -> kontener z selectem do sortowania oraz listą znalezionych produktów

Domyślny arkusz stylów szablonu znajduje się pod adresem: https://cdn.quartic.com.pl/styles/css/normalize.css.

Uwaga! W celu nadpisania styli domyślnych należy umieścić tag link <link> z nowymi stylami wewnątrz tagu <head> poniżej tagu <link>, który zawiera href style domyślne.

Struktura szablonu jest stała dla wersji mobilnej i desktopowej, a dostosowanie do różnych wielkości urządzeń opiera się o @media queries.

8. Wystartuj!

Na tym etapie jesteśmy już gotowi do startu. Skontaktuj się z nami i potwierdź, że możemy włączyć Smart Search dla wszystkich użytkowników Twojego sklepu.

9. Wejdź do panelu: analizuj wyniki, dodawaj synonimy

Zaloguj się do panelu klienta QuarticOn na https://cp.quarticon.com.

Analityka

W Panelu Klienta możesz nie tylko śledzić wyniki wyszukiwarki np. liczbę wyszukań, najpopularniejsze frazy i produkty. Dzięki wskaźnikowi CTR, konwersji i danym sprzedażowym możesz łatwo wyciągać wnioski i optymalizować działania marketingowe swojego sklepu (np. kampanie reklamowe, remarketing).

Dane prezentowane są w rozbiciu na wyszukiwania z autocomplete oraz SERP w dowolnym zakresie czasowym.

Na pulpicie znajdziesz wykresy:

  • liczba wyszukań,

  • najpopularniejsze frazy,

  • autocomplete vs SERP,

  • frazy z najwyższą sprzedażą,

  • frazy bez wyników,

  • frazy z najliczniejszą sprzedażą,

  • najczęściej klikane frazy.

W Raporcie fraz czekają na Ciebie:

  • CTR frazy,

  • konwersja,

  • liczba wykonanych transakcji, a także wolumen i wartość sprzedaży z wyszukiwania.

Raport produktów zawiera:

  • liczbę wyświetleń, kliknięć oraz CTR i konwersję każdego produktu, który znalazł się w wynikach wyszukiwania,

  • liczbę wykonanych transakcji, a także wolumen i wartość sprzedaży produktu.

Synonimy

Dzięki funkcji synonimizacji fraz szybko zwiększysz skuteczność wyszukiwania w Twoim sklepie.

Jak to wykorzystać? Jeśli w statystykach wyszukiwań zakończonych brakiem wyników zauważysz często powtarzające się frazy, dodaj dla nich synonim. Np. użytkownicy szukają frazy wisiorek, a tymczasem wszystkie wisiorki w Twoim sklepie mają w nazwie produktu fachową nazwę zawieszka. Wisiorek daje zero wyników w wyszukiwarce. Wystarczy dodać nowy synonim, jako słowo bazowe wpisać wisiorek, a jako synonim: zawieszka.

Od tego momentu wpisanie w wyszukiwarkę frazy wisiorek spowoduje wyświetlenie wyników wyszukiwania dla frazy zawieszka, odsłaniając użytkownikom pełną gamę Twoich produktów.

Użytkownik wyszukuje, Ty przeglądasz jego działania w Panelu Klienta i na podstawie danych optymalizujesz swój sklep.

Czy udało Ci się znaleźć odpowiedź na swoje pytanie?