Smart Search – samodzielne wdrożenie

Z instrukcji dowiesz się, jak samodzielnie wdrożyć Smart Search w swoim sklepie internetowym.

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.

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. Instrukcję, jak to zrobić, znajdziesz tutaj.

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. Drugi sposób to wykorzystanie crawlera, który pobierze informacje ze stron produktów w sklepie.

Uwaga! Po wybraniu sposobu udostępnienia katalogu produktów, skontaktuj się z nami. Dzięki tej informacji będziemy mogli odpowiednio skonfigurować system.

a. 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 tutaj.

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

Jeśli nie dysponujesz plikiem w standardzie Google Merchant, możesz przygotować własny XML o poniższej strukturze:

Nazwa

Opis

Uwagi

Wymagalność/Opcjonalność

id

Id produktu

Unikalny identyfikator produktu wykorzystywany w sklepie, także w zamówieniach.

wymagalne

title

Tytuł

Nazwa produktu wyświetlana w search.

wymagalne

status

Dostępność 

Produktu dostępny: status = 1, niedostępny: status = 0

wymagalne

price

Cena produktu

Cena nie powinna zawierać separatora tysięcznego.

wymagalne

price_old

Stara cena

Cena nie powinna zawierać separatora tysięcznego, powinna być wyższa niż obecna cena. W przypadku braku pozostawić wartość pustą.

opcjonalne

link

URL produktu

Link do strony produktu, który będzie wyświetlony.

wymagalne

image

URL  zdjęcia

Adres URL obrazka, który prezentuje produkt (najczęściej główne zdjęcie produktu).

wymagalne

categories

Ścieżka kategorii produktu

Pełna ścieżka kategorii produktu.

Numerowanie zaczynamy od 1.

Uwaga #1: Kategorie muszą być uszeregowane od kategorii najbardziej ogólnej do szczegółowej, przykład drzewa kategorii poniżej:

Galanteria / Torebki / Listonoszka

Uwaga #2: Prosimy o pomijanie kategorii typu Wszystkie produkty.

Uwaga #3: Prosimy o załączenie tylko 1 drzewa kategorii dla danego produktu.

wymagalne

Przykład implementacji

<product>
  <id>1234</id>
  <title>My product name</title>
  <status>1</status>
  <price>12.99</price>
  <price_old>20.49</price_old>
  <link>https://mydomain.com/my-product-link/</link>
  <image>https://static.mydomain.com/my-product-image.png</image>
  <categories>Category 1 / Category 1.1 / Category 1.1.1</categories>
</product>

b. Opisz swój produkt

Jeśli nie masz dostępu do feeda (punkt 2a), możemy zebrać informacje o produktach przy pomocy automatycznego crawlera.

Uwaga! Użycie crawlera nie gwarantuje, że zebrane zostaną wszystkie produkty z Twojego sklepu.

Crawler pobiera poniższe dane produktu:

  • id,
  • nazwa,
  • dostępność,
  • cena,
  • stara cena (przed przeceną),
  • link do strony produktu,
  • link do obrazka,
  • kategorie,
  • dodatkowe atrybuty.

W celu umożliwienia automatycznego pobierania danych ze strony przez crawlera należy dodać kontener z id="qON_product", który zawiera informacje o produkcie przekazane przy pomocy atrybutów. Atrybuty należy uzupełnić adekwatnymi do nazwy wartościami, odnoszącymi się do danego produktu.

Nazwa

Opis

Uwagi

Wymagalność/Opcjonalność

data-qon-id

id produktu

Unikalny identyfikator produktu wykorzystywany w sklepie, także w zamówieniach.

wymagalne

data-qon-title

Tytuł

Nazwa produktu wyświetlana w search.

wymagalne

data-qon-status

Dostępność 

Produktu dostępny: status = 1, niedostępny: status = 0.

wymagalne

data-qon-price

Cena produktu

Cena nie powinna zawierać separatora tysięcznego.

wymagalne

data-qon-old-price

Stara cena

Cena nie powinna zawierać separatora tysięcznego, powinna być wyższa niż obecna cena. W przypadku braku pozostawić wartość pustą.

opcjonalne

data-qon-link

URL produktu

Link do strony produktu, który będzie wyświetlony.

wymagalne

data-qon-image

URL  zdjęcia

Adres URL obrazka, który prezentuje produkt (najczęściej główne zdjęcie produktu).

wymagalne

data-qon-category-{Liczba porządkowa}-id

ID kategorii produktu

Identyfikator kategorii (najczęściej liczba lub slug). Numerowanie zaczynamy od 1. 

opcjonalne

data-qon-category-{Liczba porządkowa}-title

Nazwa kategorii produktu

Pełna nazwa kategorii produktu.

Numerowanie zaczynamy od 1.

Uwaga #1: Kategorie muszę być uszeregowane od kategorii najbardziej ogólnej do szczegółowej, przykład drzewa kategorii poniżej.

Galanteria -> Torebki -> Listonoszka

Uwaga #2: Prosimy pomijanie kategorii o typu “Wszystkie produkty”.

Uwaga #3: Prosimy o załączenie tylko 1 drzewa kategorii.

opcjonalne

data-qon-attribute-{nazwa parametru}

Dodatkowy parametr do wyszukiwania

Nazwy parametrów mogą być różne dla różnych produktów (np. jeden produkt może mieć parametr „color”, inny „size”, a jeszcze inny obydwa).

opcjonalne

Przykład implementacji

<div class="qON_product" style="display:none"
data-qon-id="14645"
data-qon-title="Proszek do prania"
data-qon-status="1"
data-qon-price="19.99"
data-qon-old-price="24.99"
data-qon-link="http://strona.eu/proszek-do-prania"
data-qon-image="http://strona.eu/proszek.jpg"
data-qon-category-1-id="1"
data-qon-category-1-title="Chemia"
data-qon-category-2-id="11"
data-qon-category-2-title="Proszki do prania"
data-qon-attribute-size="S,M,L"
data-qon-attribute-color="czerwony"
data-qon-attribute-producer="Henkel"
>
</div>

Ważne!

Powyższy element musi być dostępny z wyłączoną obsługą języka JavaScript, czyli bezpośrednio w źródle strony.

Na stronie kategorii należy dodatkowo umieścić w kodzie strony:

  • Opcja nr 1: kontener z id="qON_category", który zawiera kontenery (.qON_product) z informacjami o produktach należących do danej kategorii. Informacje te powinny zostać przekazane w odpowiednich atrybutach:

Data atrybut

Wartość

Przykład

data-qon-id

ID produktu

data-qon-id="abc12345"

data-qon-link

URL produktu

data-qon-link="https://www.linksklepu.pl/linkdoproduktu"

Przykład implementacji

<div id="qON_category" style="display:none">
  <div class="qON_product" style="display:none"
      data-qon-id="abc12345"
      data-qon-link="https://www.linksklepu.pl/linkdoproduktu1">
  </div>
  <div class="qON_product" style="display:none"
      data-qon-id="abc56789"
      data-qon-link="https://www.linksklepu.pl/linkdoproduktu2">
  </div>
</div>
  • Opcja nr 2: do istniejącego listingu produktów na stronie kategorii należy dodać odpowiedni identyfikator, klasę oraz atrybuty. 

    Do kontenera, w którym znajdują się produkty dodać id="qON_category", zaś do kontenera każdego pojedynczego produktu dodać .qON_product oraz uzupełnione atrybuty data-qon-id i data-qon-link.

Odblokuj crawler QuarticOn

Nasze serwery pobierają zawartość stron Twojego sklepu i zczytują z nich informacje o produktach. Aby proces był skuteczny musimy mieć pewność, że Twój sklep nie będzie blokował crawlera.

Polecamy kontakt z administratorami i odblokowanie (whitelistowanie) ruchu z adresów i userAgentów podanych poniżej.

Pamiętaj, że nasz system wykona dziennie tyle połączeń do Twojego sklepu, ile masz produktów w ofercie. W przypadku, gdy masz więcej niż 20 tys. SKU – może to mieć znaczenie dla Twojego systemu. Domyślnie będziemy wykonywać requesty tak, by każdy produkt wczytany był raz na dobę: w przypadku 20 tys. produktów – jest to średnio jedna odsłona / 4 sekundy.

Nazwa crawlera (userAgent)

userAgent: QuarticON.com (recommendation engine for e-shops) Crawler

Adresy IP

Aktualna pula adresów IP dostępna jest w Help Center: https://help.quarticon.com/crawler-1.

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:
    1. SCRIPT_PRODUCT_ID – unikalny ID produktu, musi się zgadzać z danymi katalogowymi
    2. SCRIPT_PRICE – cena jednostkowa produktu
    3. 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 występować w całym systemie pod tym samym ID.

Obsługa wariantów produktów

Przez warianty produktu rozumiemy ten sam produkt w różnej wersji, np. szafka Viksta w różnych kolorach. Szafka w kolorze białym i czarnym to dwa różne warianty tego samego produktu.

  • Jeśli wybór wariantu pociąga za sobą zmianę ID oraz URL produktu, to każdy wariant traktowany jest jako oddzielny produkt.
  • Jeśli wybór nie powoduje zmiany ID produktu, wszystkie warianty będziemy traktować jako jeden produkt, niezależnie od wybranego wariantu. 

4. Dodaj wyszukiwarkę na stronę

    Gdy nie masz wyszukiwarki

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

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

    Gdy chcesz zmienić wyszukiwarkę

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

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

    Następnie można go ostylować według wytycznych z punktu poniżej: Dostosuj wizualizację (opcjonalnie).

    5. 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.

    6. 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 autocomplete – tzw. mała wyszukiwarka, którą najczęściej umieszczamy w nagłówku strony. Składa się z:
      1. pola wyszukiwania z przyciskiem
      2. loadera
      3. podręcznych wyników wyszukiwania

    • Kontener wyników wyszukiwania (SERP – search engine results page). Składa się z:
      1. nagłówka z informacją o wyszukiwanej frazie i liczbie wyników
      2. paska bocznego umożliwiającego zawężanie wyników wyszukiwania
      3. listy z wynikami wyszukiwania z możliwością sortowania i paginacją

    Dostosowanie wyglądu

    Poniżej znajdziesz kod HTML wraz z opisem elementów i klas użytych w wyszczególnionych wyżej szablonach.

    Kontener autocomplete

    <div class="qon-tiny-smart-search">
    <div class="autocomplete-search-container">
    <input type="search" autocomplete="off" placeholder="Wpisz wyszukiwaną frazę" class="autocomplete-search-input">
    <button type="button" class="autocomplete-search-button">Szukaj</button>
    </div>

    <div class="loader-container">
    <div class="loader"></div>
    </div>
    <div class="results-container">
    <div class="results-element">
    <article class="single-search-result">
    <a href="${product.link}" class="link qon-click-link">
    <div class="card">
    <div class="card-image">
    <img src="${image}" class="image" alt="${product.title}">
    </div>
    <div class="card-content">
    <h1 class="title">${product.title}</h1>
    <p class="price">${product.price} ${product.currency}</p>
    </div>
    </div>
    </a>
    </article>
    <div class="card">
    <a class="more-results-link">Zobacz więcej wyników wyszukiwania</a>
    </div>
    </div>
    </div>
    </div>

     

    Klasa

    Opis

    .qon-tiny-smart-search

    Główny kontener małej wyszukiwarki z autouzupełnianiem.

    .autocomplete-search-container

    Nadrzędny kontener zawierający elementy pozwalające na wyszukanie frazy, tj. input oraz button.

    .autocomplete-search-input

    Klasa inputa, służącego do wpisania szukanej frazy.

    .autocomplete-search-button

    Klasa przycisku, służącego do wywołania akcji wyszukiwania.

    .loader-container

    Klasa loadera, który pokazuje się w momencie ładowania rezultatów wyszukiwania.

    .results-container

    Główny kontener wynikowy, w którym znajdą się elementy wyszukane po wpisaniu frazy. Widoczny po znalezieniu przez małą wyszukiwarkę produktów pasujących do zapytania.

    .results-element

    Nadrzędny kontener oplatający rezultaty wyszukiwania.

    .single-search-result

    Kontener produktowy ze szczegółami wyszukiwania.

    .link .qon-click-link

    Element pozwalający po kliknięciu przenieść do strony wybranego produktu.

    .card

    Kontener oplatający szczegóły produktowe.

    .card-image

    Klasa kontenera, w którym znajdzie się obrazek produktowy.

    .image

    Klasa głównego elementu obrazka, w którym zostanie umieszczony link do konkretnego obrazka produktowego.

    .card-content

    Kontener szczegółów produktowych.

    .title

    Klasa elementu zawierającego tytuł produktu.

    .price

    Klasa elementu zawierającego cenę produktu.

    .more-results-link

    Klasa elementu przenoszącego na stronę zaawansowanego szukania.

    Kontener SERP

    <section class="qon-smart-search">
    <h1 class="result-header">
    <span class="search-label">Wyniki wyszukiwania dla hasła</span>
    <span class="qon-smart-search-result search-phrase">walizka</span>
    <span class="result-count search-result">(351 wyników)</span>
    </h1>
    <header class="serp-search-container">
    <input type="search" autocomplete="off" placeholder="czego szukasz" class="serp-search-input">
    <button type="button" class="serp-search-button">Szukaj</button>
    </header>
    <aside class="qon-filters-wrapper" style="display: flex;">
    <div class="qon-filters-header-container">
    <h2 class="qon-filters-header">Filtruj</h2>
    </div>
    <button class="show-filters active">Filtruj</button>
    <button class="hide-filters">×</button>
    <button class="show-results">Pokaż produkty</button>
    <button class="remove-filters" style="display: none;">
    <span>Wyczyść filtry</span>
    </button>
    <nav class="qon-filters-container">
    <div class="filter-group category0-group">
    <h2 class="filter-group-title">Kategoria</h2>
    <ul class="qon-filters-list">
    <ul class="filters-list">
    <li class="filters-item">
    <label class="qon-smartsearch-checkmark-container">
    <input type="checkbox" class="single-filter">
    <span class="qon-smartsearch-checkmark"></span>
    <span class="text">Bagaż</span>
    <span class="filters-item-count">(351)</span>
    </label>
    </li>
    </ul>
    </ul>
    </div>
    <div class="filter-group price-group">
    <h2 class="filter-group-title">Cena</h2>
    <form class="qon-price-filters-form">
    <input type="text" class="qon-filters-item-min" placeholder="Od" value="">
    <input type="text" class="qon-filters-item-max" placeholder="Do" value="">
    <button style="display: none" type="submit">Zatwierdź</button>
    </form>
    </div>
    </nav>
    </aside>
    <div class="results-container">
    <div class="sort-container" style="display: flex;">
    <label class="sort-label">Sortuj:</label>
    <div class="sort-element-wrapper">
    <select class="sort-element ">
    <option value="default">Domyślnie</option>
    <option value="titleAsc">Alfabetycznie - Od A do Z</option>
    <option value="titleDesc">Alfabetycznie - Od Z do A</option>
    <option value="priceAsc">Cena rosnąco</option>
    <option value="priceDesc">Cena malejąco</option>
    </select>
    </div>
    </div>
    <div class="results-element">
    <article class="single-search-result">
    <a href="${product.link}" class="link qon-click-link">
    <div class="card">
    <div class="card-image">
    <img src="${image}" class="image" alt="${product.title}">
    </div>
    <div class="card-content">
    <h1 class="title">${product.title}</h1>
    <p class="price">${product.price} ${product.currency}</p>
    </div>
    </div>
    </a>
    </article>
    </div>
    <div class="pagination-container">
    <a href="#" class="single-page active single-page-number" data-page="0">1</a>
    <a href="#" class="single-page single-page-number" data-page="1">2</a>
    <a href="#" class="single-page next-page">&gt;</a>
    </div>
    </div>
    </section>

     

    Klasa

    Opis

    .qon-smart-search

    Główny kontener dużej wyszukiwarki, umieszczony wewnątrz pop-up'u pokazującego wszystkie wyniki wyszukiwania.

    .result-header

    Kontener zawierający szczegóły dla frazy wyszukiwania.

    .search-label

    Klasa elementu zawierającego treść komunikatu przed frazą wyszukiwaną.

    .qon-smart-search-result.search-phrase

    Klasa elementu, w którym umieszczona jest wyszukiwana fraza.

    .result-count.search-result

    Klasa elementu, w którym znajduje się liczba wyszukanych wyników.

    .serp-search-container

    Kontener dodatkowej wyszukiwarki.

    .serp-search-input

    Klasa inputa dodatkowej wyszukiwarki.

    .serp-search-button

    Klasa przycisku dodatkowej wyszukiwarki.

    .qon-filters-wrapper

    Kontener zaawansowanych filtrów.

    .qon-filters-header-container

    Kontener głównego nagłówka filtrów.

    .qon-filters-header

    Klasa elementu głównego nagłówka filtrów.

    .show-filters.active

    Klasa przycisku pokazującego filtry. Widoczna tylko na wersji mobilnej, po kliknięciu na element przyjmie klasę .active i pokaże pop up z kontenerem filtrów.

    .hide-filters

    Klasa przycisku zamykającego pop up filtrów na wersji mobile.

    .show-results

    Klasa przycisku, który chowa okno pop up oraz zastosowuje zaznaczone filtry.

    .remove-filters

    Klasa przycisku, który resetuje zestaw zaznaczonych filtrów. Domyślnie ukryty, jeśli żaden z filtrów nie został zaznaczony.

    .qon-filters-container

    Kontener zaawansowanych filtrów, gdzie znajdą się grupy filtrów.

    .filter-group

    Kontener oplatający grupę filtrów.

    .filter-group-title

    Klasa elementu nagłówka grupy filtrów.

    .qon-filters-list

    Kontener listy filtrów.

    .filters-list

    Kontener filtra o pierwszym stopniu zagnieżdżenia.

    .filters-item

    Kontener oplatający pojedynczy filtr.

    .qon-smartsearch-checkmark-container

    Kontener elementu oplatającego input filtra.

    .single-filter

    Klasa elementu inputa zastosowującego filtr po jego kliknięciu.

    .text

    Klasa elementu zawierającego treść filtra.

    .filters-item-count

    Klasa elementu zawierającego liczbę wystąpień filtra w danym wyszukiwaniu.

    .qon-price-filters-form

    Klasa formularza umożliwiającego filtrowanie po cenie.

    .qon-filters-item-min

    Klasa inputa przyjmującego wartość minimalną ceny.

    .qon-filters-item-max

    Klasa inputa przyjmującego wartość maksymalną ceny.

    .results-container

    Główny kontener rezultatów wyszukiwania.

    .sort-container

    Główny kontener zawierający elementy sortowania.

    .sort-label

    Klasa nagłówka zawierającego treść komunikatu sortowania.

    .sort-element-wrapper

    Kontener zawierający element sortujący.

    .sort-element

    Klasa elementu selecta przyjmującego wartości sortowania.

    .results-element

    Nadrzędny kontener oplatający rezultaty wyszukiwania.

    .single-search-result

    Kontener produktowy ze szczegółami wyszukiwania.

    .link .qon-click-link

    Element pozwalający po kliknięciu przenieść do strony wybranego produktu.

    .card

    Kontener oplatający szczegóły produktowe.

    .card-image

    Klasa kontenera, w którym znajdzie się obrazek produktowy.

    .image

    Klasa głównego elementu obrazka, w którym zostanie umieszczony link do konkretnego obrazka produktowego.

    .card-content

    Kontener szczegółów produktowych.

    .title

    Klasa elementu zawierającego tytuł produktu.

    .price

    Klasa elementu zawierającego cenę produktu.

    .pagination-container

    Kontener zawierający elementy paginacji.

    .single-page

    Klasa elementów paginacyjnych zastosowana na wszystkich elementach odnoszących do pojedynczych stron. 

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

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

    7. 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.

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


    Zaloguj się 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.

    9. Start Search


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