Přeskočit na hlavní obsah
Všechny sbírkyAI Smart SearchImplementace
Smart Search – samostatná implementace vzhledu a sledování transakcí klientem
Smart Search – samostatná implementace vzhledu a sledování transakcí klientem

V příručce se dozvíte, jak samostatně implementovat vzhled a tracking Smart Searche ve vašem internetovém obchodě.

A
Autor: Aleksandra Kowalska
Aktualizováno před více než 2 lety

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.

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

Podpora pro varianty produktu

Pokud chcete seskupit varianty stejného produktu, musíte vytvořit skupiny produktů v tagu <g: item_group_id>.

Podle specifikace Google Merchant: item_goup_id: ID skupiny produktů, které se dodávají v různých verzích (variantách). Zadejte stejnou hodnotu pro každý produkt ve stejné skupině produktů. Pokud se například produkt liší velikostí nebo barvou, zadejte hodnoty atributů velikost [size] a barva [color] pro všechny produkty, které mají stejnou hodnotu pro atribut product group id [item_ group_ id].

Pozornost! Pokud používáme seskupování produktů, musí být tag item_group_id uveden i pro produkty, které nemají varianty. Hodnota item_group_id pro takové varianty by se měla rovnat id produktu.

Pozornost! Pokud chcete mít štítky, které obsahují volitelné informace, jako je třeba barva, štítky, marže, velikosti atd. přidejte tyto štítky do feedu a dejte nám vědět, zda je chcete použít.

Přikladová implementace

<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. 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í dataSCRIPT_PRODUCT_ID - jedinečné ID produktu, musí odpovídat datům kataloguSCRIPT_PRICE- jednotková cena produktuSCRIPT_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. Daný produkt by měl mít koherentní ID nebo group_id jak v systému obchodu tak produktovém katalogu.

4. Poskytněte nám potřebné informace pro fungování vyhledávače

Vyplňte formulář Specifikace funkčních požadavků, který vám poskytne váš Customer Success specialista.

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. Poté jej můžete upravovat podle pokynů z bodu níže: Přizpůsobte vizualizaci (volitelné).

6. Přizpůsobte vizualizaci (volitelné)

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.

  • Onfocus kontejner – tzv kontejner, který se objeví pod vyhledávacím polem, hned po kliknutí na něj, než začneme psát hledaný výraz a než přesáhne 3 znaky. Obsahuje:

    a. pole výsledků hledání s tlačítkem

    b. sekce s oblíbenými klíčovými slovy a frázemi / předdefinovanými filtry.

    c. loader

    d. top produkt (volitelné)

    e. Oblíbené produkty

  • Kontejner automatického doplňování - tzv malý vyhledávač, který se nejčastěji umisťuje do záhlaví stránky. Po překročení 3 znaků se objeví na místě onfocus kontejneru a obsahuje nápovědu a oblíbené produkty pro zadanou frázi. Obsahuje:

    a. vyhledávací pole s tlačítkem

    b. sekci s automaticky vyplněnými hesly

    c. loader

    d. Nejprodávanější pro hledanou frázi produkty (volitelné)

    e. Produkty odpovídající vyhledávání

  • Kontejner výsledků vyhledávání (SERP - stránka výsledků vyhledávače). Skládá se z:

    a. nadpis s informacemi o hledané frázi a počtu výsledků

    b. postranní panel pro zúžení výsledků vyhledávání (filtry)

    c. seznamy výsledků vyhledávání s možnostmi stránkování

Přizpůsobení vzhledu

Níže naleznete kontejnery s HTML třídami, které vám pomohou najít na webu nejdůležitější moduly produktu Smart Search. Tyto kontejnery a jejich obsah lze upravovat dle libosti.

Pozornost! Jakékoli styly css můžete změnit nebo přepsat, jak chcete. Pokud chcete změnit HTML z výchozího v některém z modulů, např. přidat wrapper se štítky do produktového kontejneru, musíte nás kontaktovat.

Kontejner vyhledavání

<div class="qon-tiny-smart-search"> -> kontejner pro smart search moduly

<div class="autocomplete-search-container"> -> kontejner pro input a tlačítko vyhledat

<div class="loader-container"> -> kontejner pro loader

<div class=”qon-on-focus”> -> kontejner pro onfocus modul

<div class="results-container"> -> kontejner pro autocomplete modul

SERP kontejnery

<section class=”qon-smart-search search has-results”> -> kontejner, ve kterém je umístěn SERP modul

<h1 class=”result-header”> -> kontejner, který obsahuje záhlaví sekce výsledků vyhledávání

<aside class=”qon-filters-wrapper”> -> kontejner, ve kterém jsou umístěny filtry výsledků vyhledávání

<div class=”qon-results-container”> -> kontejner s tlačítkem výběru pro třídění a seznamem nalezených produktů

Výchozí šablonu stylů šablony nalézněte zde: https://cdn.quartic.com.pl/styles/css/normalize.css

Pozornost! Chcete-li přepsat výchozí styly, umístěte tag odkaz <link> s novými styly uvnitř tagu <head> níže tagu <link>, který obsahuje výchozí href style.

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.

Dostali jste odpověď na svou otázku?