Smart Search – self implementace (CS)

Z instrukce se dozvíte, jak implementovat Smart Search sami ve svém eshopu.

1. Přidat script QuarticOn


Prvním krokem nezbytným k implementaci služeb poskytovaných QuarticOn je přidání hlavního personalizovaného skriptu pro stránky.

Tento skript vypadá takto:

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

Správný kód vytvořený speciálně pro vás je možné stáhnout po přihlášení do našeho administračního rozhraní hned po vytvoření účtu na https://cp.quarticon.com.

2. Předejte nám své produkty

Aby vyhledávání fungovalo správně, musíme shromáždit všechny informace o vašich produktech.

Nejjednodušší a doporučený způsob je poskytnout nám soubor XML (tzv. feed) obsahující úplný katalog produktů z eshopu.

Druhý způsob je využití crawlera, který načte informace ze stránek produktů v eshopu.

Pozor! Po výběru způsobu sdílení katalogu produktů kontaktujte prosím QuarticOn. Díky těmto informacím budeme moci systém odpovídajícím způsobem nakonfigurovat.

a. Přidejte feed

Momentálně podporujeme feed v popularní formě Google Merchant. Pokud vám váš eshop umožňuje takový soubor vygenerovat, stáhněte si jeho URL a vložte jej do administračního panelu QuarticOn.

Podrobnější informace najdete zde.

Pozor! Nezapomeňte jako formát katalogu zvolit Quartic XML (AWS S3 / Lambda).

Pokud nemáte soubor Google Merchant, můžete si vytvořit vlastní XML s níže uvedenou strukturou:

Název

Popis

Poznámky

Potřebné/volitelné

id

Id produktu

Jedinečný identifikátor produktu používaný v obchodě, také v objednávkách

potřebné

title

Název produktu

Název produktu zobrazený ve vyhledávání

potřebné

status

Dostupnost 

Produktu dostupný: status = 1, nedostupný: status = 0.

potřebné

price

Cena produktu

Cena by neměla zahrnovat tisící oddělovač.

potřebné

price_old

Stará cena

Cena by neměla obsahovat tisící oddělovač, měla by být vyšší než aktuální cena. Pokud chybí, nechte jej prázdné.

volitelné

link

URL produktu

Odkaz na stránku produktu, která se zobrazí

potřebné

image

URL  obrázku

URL obrázku, který představuje produkt (obvykle hlavní obrázek produktu)

potřebné

categories

ID kategorie produktu

Úplná cesta k kategorií produktu.

Čislujeme od 1.

Poznámka č. 1: kategorie musí být řazeny od nejobecnějších ke konkrétním, příklad stromu kategorií níže.

Galanterie/Kabelky/Do ruky

Poznámka č. 2: Přeskočte prosím kategorii „Všechny produkty“.

Poznámka č. 3: Přiložte prosím pouze 1 strom kategorie pro daný produkt.

potřebné

Příklad implementace

<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. Popište svůj produkt

Pokud nemáte k feedu přístup (předchozí část obsahuje informace o něm), můžeme shromažďovat informace o produktech pomocí automatického crawleru.

Pozor! Používání crawleru nezaručuje, že se budou shromažďovat všechny produkty z vašeho eshopu.

Crawler načítá následující data:

  • id,
  • název,
  • dostupnost,
  • cena,
  • stará cena ,
  • link do stránky produktu,
  • link do obrazku,
  • kategorie,
  • dodatkowe atrybuty.

Aby crawler automaticky načítal data z webu, přidejte kontejner s id = "qON_product", který obsahuje informace o produktu poskytované pomocí atributů. Atributy by měly být doplněny hodnotami odpovídajícími názvu, které odkazují na daný produkt.

Název

Popis

Poznámky

Potřebné/volitelné

data-qon-id

Id produktu

Jedinečný identifikátor produktu používaný v obchodě, také v objednávkách

potřebné

data-qon-title

Název produktu

Název produktu zobrazený ve vyhledávání

potřebné

data-qon-status

Dostupnost 

Produktu dostupný: status = 1, nedostupný: status = 0.

potřebné

data-qon-price

Cena produktu

Cena by neměla zahrnovat tisící oddělovač.

potřebné

data-qon-old-price

Stara cena

Cena by neměla obsahovat tisícinový oddělovač, měla by být vyšší než aktuální cena. Pokud chybí, nechte jej prázdné.

volitelné

data-qon-link

URL produktu

Odkaz na stránku produktu, která se zobrazí

potřebné

data-qon-image

URL  obrázku

URL obrázku, který představuje produkt (obvykle hlavní obrázek produktu)

potřebné

data-qon-category-{číslo}-id

ID kategorie produktu

ID kategorie (nejčastěji číslo nebo slug)

volitelné

data-qon-category-{číslo}-title

Nazwa kategorii produktu

Úplný název kategorie produktu

Začneme číslovat od 1.

volitelné

data-qon-attribute-{název parametru}

Dodatečný parametr pro vyhledávání 

Názvy parametrů se mohou u různých produktů lišit (např. Jeden produkt může mít parametr "barva", další "velikost" a další oba).

volitelné

Příklad implementace

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

Důležité!

Výše uvedený prvek musí být k dispozici s vypnutým JavaScriptem, tj. Přímo ve zdroji stránky.

Na stránce kategorie lze také v kódu stránky umístit:

  • Možnost č. 1: kontejner s id = "qON_category", který obsahuje kontejnery (.qON_product) s informacemi o produktech v dané kategorii. Tyto informace by měly být uvedeny v příslušných atributech:

Data atribut

Hodnota

Příklad

data-qon-id

ID produktu

data-qon-id="abc12345"

data-qon-link

URL produktu

data-qon-link="https://www.odkaznabchod.cz/odkaznaprodukt"

Příklad implementace

<div id="qON_category" style="display:none">
<div class="qON_product" style="display:none"
data-qon-id="abc12345"
data-qon-link="https://www.odkaznaobchod.cz/odkaznaprodukt1">
</div>
<div class="qON_product" style="display:none"
data-qon-id="abc56789"
data-qon-link="https://www.odkaznaobchod.czl/odkaznaprodukt2">
</div>
</div>
  • Možnost č.  2: k existujícímu listingu produktu na stránce kategorie lze přidat vhodný identifikátor, třídu a atributy.
    Přidejte id="qON_category  do kontejneru, ve kterém jsou produkty umístěny. Do kontejneru pro každý jednotlivý produkt přidejte .qON_product a vyplněné atributy data-qon-id a data-qon-link.

Odblokujte crawler QuarticOn

Naše servery stahují obsah stránek vašeho obchodu a čtou z nich informace o produktech. Aby byl tento proces efektivní, musíme si být jisti, že váš obchod nebude crawler blokovat.

Doporučujeme kontaktovat administrátory a odblokovat (whitelist) provoz z níže uvedených adres a userAgents.

Pamatujte, že náš systém bude denně volat do vašeho obchodu tolik, kolik máte nabízených produktů. V případě, že máte více než 20 tisíc SKU - to může být relevantní pro váš systém. Ve výchozím nastavení budeme žádat, aby se každý produkt načítal jednou denně: za 20 000 produkty - to je v průměru zobrazení jedné stránky / 4 sekundy.

Název Crawler (userAgent)

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

Adresy IP

Aktuální adresy IP naších crawleru jsou k dispozici Help Center.

3. Přidejte sledování tracking (volitelné)


Díky sledování transakcí získáte další informace o účinnosti vyhledávání na webu. Na panelu zákazníků vám ukážeme, které fráze a které produkty generují:

  • nejlepší konverze
  • nejpočetnější prodeje,
  • nejlepší prodeje

z vyhledávání.

Na stránce s poděkováním přidejte do kódu stránky následující skript. Na konec sekce <body> </body> přidáváme script:

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

Skript shromažďuje a zpracovává následující dynamické proměnné:

  • transakce - jedinečný identifikátor transakce registrované v obchodě
  • user - id uživatele, který provedl nákup; pokud není uživatel přihlášen, předejte prázdnou hodnotu (upsParams.push (['user', '']));)
  • product - jedinečné ID produktu, které odpovídá ID uvedenému ve značce produktu
  • cena - cena produktu
  • množství - počet kusů produktu

Aby skript fungoval správně, musí být předány příslušné proměnné:

  1. SCRIPT_TRANSACTION_ID - jedinečné ID transakce
  2. SCRIPT_USER_ID - zadání proměnné je volitelné; pokud je user_id k dispozici po přihlášení do obchodu jako zákazník, vložte jej sem, pokud ne, nechte řetězec prázdný
  3. /* SCRIPT_LOOP_START */ -  zde musíte vytvořit smyčku, která přeskočí všechny zakoupené produkty a extrahuje z nich následující data
    1. SCRIPT_PRODUCT_ID - jedinečné ID produktu, musí odpovídat datům katalogu
    2. SCRIPT_PRICE- jednotková cena produktu
    3. SCRIPT_QUANTITY - počet zakoupených kusů daného produktu
  4. /* SCRIPT_LOOP_END */ - konec smyčky

Důležité!

ID produktu v obchodě je základem analytické kvality. ID produktu by proto mělo být jednoznačné a jedinečné a mělo by být přiřazeno pouze jednomu produktu. Produkt by se měl objevit v celém systému pod stejným ID.

Podpora variant produktu

Varianty produktu znamenají stejný produkt v různých verzích, např. Skříň Viksta v různých barvách. Bílá a černá skříňka jsou dvě různé varianty stejného produktu.

  • Pokud volba varianty znamená změnu ID produktu a URL, pak se každá varianta považuje za samostatný produkt.
  • Pokud výběr nezmění ID produktu, budeme považovat všechny varianty za jeden produkt, bez ohledu na vybranou variantu.

4. Přidat vyhledávač na web

Když nemáte vyhledávač

Na místo, kde by se mělo zobrazit vyhledávací okno, přidejte kód:

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

Když chcete změnit vyhledávač

V tomto případě lze aktuální vyhledávač odstranit a přidat prvek:

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

Pak je možné ho stylově přizpůsobit podle pokynů v bodu “Přizpůsobte vizualizaci (není povinné)”.

5. Podívejte se na vyhledávač v režimu náhledu

Kontaktujte QuarticOn s informací, že je místo pro vyhledávač připravené. Jako odpověď vám poskytneme informaci, jakým způsobem je možné vyhledávač otestovat a přizpůsobit jeho vizualizaci vlastním potřebám.

6. Přizpůsobte vizualizaci (není povinné)


Náš vyhledávač bude na začátku ve výchozí šabloně. Pokud chcete, podívejte se na jednotlivé prvky, které chcete upravit.

To provedete přepsáním stylů CSS u vybraných tříd popisujících kousky vyhledávače. Níže pro vaše pohodlí najdete seznam prvků tvořících jednotlivé části vyhledávače spolu s HTML kódem.

Hlavní prvky

 Vyhledávací nástroj se skládá ze dvou základních prvků, které jsou rozděleny na menší části.

  • Kontejner s automatickým doplňováním - tzv autocomplete vyhledávač, který obvykle umístíme do záhlaví stránky. Skládá se z:
    1. vyhledávací pole s tlačítkem
    2. loader
    3. praktické výsledky vyhledávání

  • Kontejner výsledků vyhledávání (SERP - stránka výsledků vyhledávače). Skládá se z:
    1. nadpis s informacemi o hledané frázi a počtu výsledků
    2. postranní panel pro zúžení výsledků vyhledávání
    3. seznamy výsledků vyhledávání s možnostmi stránkování

Přizpůsobení vzhledu

Níže najdete kód HTML s popisem prvků a tříd použitých ve výše uvedených šablonách.

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

Popis

.qon-tiny-smart-search

Hlavní kontejner malého automatického vyhledávače.

.autocomplete-search-container

Nadřazený kontejner obsahující prvky, které umožňují hledat frázi, tj. Vstup a tlačítko.

.autocomplete-search-input

Vstupní třída pro zadávání hledané fráze.

.autocomplete-search-button

Třída tlačítka použitého k vyvolání akce vyhledávání.

.loader-container

Třída zavaděče, která se zobrazí při načítání výsledků vyhledávání.

.results-container

Hlavní kontejner výsledku, který bude obsahovat prvky nalezené po zadání fráze. Viditelné, když malý vyhledávač našel produkty, které odpovídají dotazu.

.results-element

Nadřazený kontejner propojí výsledky vyhledávání.

.single-search-result

Produktový kontejner s podrobnostmi vyhledávání.

.link .qon-click-link

Prvek, který umožňuje po kliknutí přejít na vybranou stránku produktu.

.card

Podrobnosti o produktu, stejně jako kontejner zobrazující položku

.card-image

Třída kontejneru, ve které bude umístěn obrázek produktu.

.image

Třída hlavního prvku obrázku, do kterého bude umístěn odkaz na konkrétní obrázek produktu.

.card-content

Detail produktu kontejner.

.title

Třída položky obsahující název produktu.

.price

Třída položky obsahující cenu produktu.

.more-results-link

Třída položky, která nás přesune na stránku pokročilého vyhledávání.

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>

 

Třída

Popis

.qon-smart-search

Hlavní kontejner velkého vyhledávače, umístěný uvnitř vyskakovacího okna zobrazujícího všechny výsledky vyhledávání.

.result-header

Kontejner obsahující podrobnosti pro hledanou frázi.

.search-label

Třída prvku obsahujícího obsah zprávy před hledanou frází.

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

Třída prvku, do kterého je umístěna hledaná fráze.

.result-count.search-result

Třída položky, která obsahuje počet nalezených výsledků.

.serp-search-container

Další kontejner vyhledávače.

.serp-search-input

Další vstupní třída vyhledávače.

.serp-search-button

Další třída tlačítek vyhledávače.

.qon-filters-wrapper

Pokročilý filtrový kontejner.

.qon-filters-header-container

Hlavní kontejner záhlaví filtru.

.qon-filters-header

Třída hlavního prvku záhlaví filtru.

.show-filters.active

Tlačítka třídy zobrazující filtry. Viditelné pouze v mobilní verzi, po kliknutí na prvek přejde .active class a zobrazí vyskakovací okno s kontejnerem filtru.

.hide-filters

Třída tlačítka uzavře vyskakovací filtry v mobilní verzi.

.show-results

Třída tlačítek, která skryje vyskakovací okno a použije vybrané filtry.

.remove-filters

Třída tlačítek, která resetuje sadu vybraných filtrů. Ve výchozím nastavení je skryto, pokud nebyl vybrán žádný z filtrů.

.qon-filters-container

Kontejner pokročilých filtrů, kde najdete skupiny filtrů.

.filter-group

Kontejner omotávající skupinu filtrů.

.filter-group-title

Třída prvku záhlaví skupiny filtrů.

.qon-filters-list

Filtrový seznam kontejnerů.

.filters-list

Filtrujte kontejner s první úrovní vnoření.

.filters-item

Kontejner omotaný kolem jediného filtru.

.qon-smartsearch-checkmark-container

Kontejner prvku procházející vstupem filtru.

.single-filter

Třída vstupního prvku, která aplikuje filtr po kliknutí.

.text

Třída prvku obsahujícího obsah filtru.

.filters-item-count

Třída položky obsahující počet instancí filtru v daném vyhledávání.

.qon-price-filters-form

Třída formuláře, která umožňuje filtrování podle ceny.

.qon-filters-item-min

Vstupní třída s minimální cenou.

.qon-filters-item-max

Vstupní třída s maximální cenou.

.results-container

Hlavní kontejner výsledků vyhledávání.

.sort-container

Hlavní kontejner obsahující třídící předměty.

.sort-label

Třída hlavičky obsahující obsah zprávy o řazení.

.sort-element-wrapper

Kontejner obsahující třídicí prvek.

.sort-element

Třída prvku selecta, která přijímá hodnoty řazení.

.results-element

Nadřazený kontejner propojí výsledky vyhledávání.

.single-search-result

Produktový kontejner s podrobnostmi vyhledávání.

.link .qon-click-link

Prvek, který umožňuje po kliknutí přejít na vybranou stránku produktu.

.card

Kontejner propletený s podrobnostmi o produktu.

.card-image

Třída kontejneru, ve které bude umístěn obrázek produktu.

.image

Třída hlavního prvku obrázku, do kterého bude umístěn odkaz na konkrétní obrázek produktu.

.card-content

Detail produktu kontejner.

.title

Třída položky obsahující název produktu.

.price

Třída položky obsahující cenu produktu.

.pagination-container

Kontejner obsahující stránkovací prvky.

.single-page

Třída stránkovacích prvků použitá na všechny prvky, které se vztahují k jednotlivým stránkám.

Výchozí šablona stylů šablon je zde:

https://cdn.quartic.com.pl/search/css/base.css

Struktura šablony je pevná pro mobilní a stolní verze a přizpůsobení různým velikostem zařízení je založeno na dotazech @media.

7. Startujte!

V této fázi jsme už připraveni začít. Kontaktujte prosím QuarticOn a potvrďte, zda můžeme Smart Search pro všechny uživatele vašeho eshopu zapnout.

8. Přejít na panel: analyzovat výsledky, přidat synonyma

Přihlásit se na https://cp.quarticon.com 

Analytika

Na Zákaznickém panelu můžete nejen sledovat výsledky vyhledávače, např. Počet vyhledávání, nejoblíbenější fráze a produkty. Díky CTR, konverzním a prodejním údajům můžete snadno vyvodit závěry a optimalizovat marketingové aktivity vašeho obchodu (např. Reklamní kampaně, remarketing).

Data jsou prezentována v členění na vyhledávání pomocí automatického doplňování a SERP v jakémkoli časovém období.

  • V administraci najdete:
    • počet vyhledávání;
    • nejoblíbenější fráze;
    • autocomplete vs SERP;
    • fráze s nejvyšším prodejem;
    • fráze bez výsledků;
    • fráze s největším prodejem;
    • nejčastěji kliknuté fráze.

  • Ve Zprávě frází čekají na vás:
    • CTR fráze,
    • konverze,
    • počet provedených transakcí, jak rovněž počet a hodnotu prodeje z vyhledávání.

  • Zpráva o produktech obsahuje:
    • počet zobrazení , kliknutí a také CTR a konverzi každého produktu, který se našel ve výsledcích vyhledávání 
    • počet provedených transakcí, jak rovněž počet a hodnotu prodeje produktu

Synonyma

Díky funkci synonymizace frází rychle zvýšíte efektivitu vyhledávání ve vašem obchodě.

Jak toto použit? Pokud ve statistikách vyhledávání, v nichž nejsou žádné výsledky, uvidíte často se opakující fráze, přidejte pro ně synonymum. Např. uživatele hledají frázi “zavazadlo”, zatímco všechny produkty ve vašem e shopu mají název “kufr”. Stačí přidat nové synonymum; základní heslo tedy bude “zavazadlo”, zatímco “kufr” - synonymum.

Od té doby zadáním slova zavazadlo“ do vyhledávače vrátíte výsledky vyhledávání slova “kufr” a uživatelům se zobrazí celá řada vašich produktů.

9. Start Search


Uživatel hledá, vy sledujete jeho aktivitu v Panelu Klienta a na základě údajů jste schopni svůj  eshop optimalizovat.