Implementujte Biano služby Pixel a Button pomocou Mergado Packu a Google Tag Manageru

Chcete na porovnávači Biano prispôsobiť zobrazovanie produktov na základe preferencií zákazníka? Zvládnete to pomocou remarketingovej služby Biana Pixel a similarity funkcie Biana Button. Na požadované výsledky dosiahnete iba správnou implementáciou.

Skvelým pomocníkom vám pri ňom budú nástroje Mergado Pack a Google Tag Manager.

Pracujte s dátovou vrstvou webu

Pre bezproblémovú implementáciu je vhodné nazerať do dátovej vrstvy vášho webu.

  1. Môžete použiť preview režim samotného GTM alebo doplnok do prehliadača Chrome - dataslayer.
  2. Okrem toho odporúčame mať otvorený návod na implementáciu GTM od Biana.

Všeobecne:

Najprv je nutné mať nainštalovaný Mergado Pack a aktivovaný kontajner pre GTM. U funkcie GTM v administrácii modulu je potrebné aktivovať všetky funkcie Ecommerce Tracking.

 

 

Postup pre Biano Pixel:

1. V správcovi značiek (GTM) najprv definujte potrebné premenné (VARIABLES):

Toto je obyčajná konštanta, ktorej hodnota bude naše Merchant ID.

Túto premennú musíte definovať ako Premennú Dátovej Vrstvy (Data Layer Variable). Pomôže nám k tomu práve spomínaný dataslayer. Na produktovej stránke otvoríte vývojárske nástroje (pravým kliknutím myši a zvolíme Preskúmať alebo stlačením funkčného klávesu f12).

Vidíte, že ID produktu je v štruktúre na "5. úrovni" – teda ecommerce.detail.products.0.id. Hodnotu hľadajte pri evente viewItem.

Vytvoríte novú premennú a nazvete ju napríklad Product ID. Ako typ zvolíte Data Layer Variable, názov premennej ecommerce.detail.products.0.id a verzia dátovej vrstvy 2.

Pri ostatných premenných dátovej vrstvy postupujete rovnako.

  • c. Product ID - AddToCart - názeov premennej ecommerce.add.products.0.id 
  • d. Quantity - názov ecommerce.add.products.0.quantity 
  • e. Unit price - názov ecommerce.add.products.0.price 
  • f. Currency - názov ecommerce.currencyCode
  • g. Order ID - názov ecommerce.purchase.actionField.id
  • h. Total Order Price - názov ecommerce.purchase.actionField.revenue
  • i. ecommerce.purchase.products - túto premennú budete potrebovať pre "vytiahnutie" poľa zakúpených produktov z dátovej vrstvy, názov ecommerce.purchase.products

Táto premenná transformuje polia zakúpených produktov do formátu pre Biano.

Vytvoríte premennú s typom Custom JavaScript. Ako obsah vložíte script pripravený od Biana, len ho trochu upravíte pre potreby našej dátovej vrstvy. Ako premennú items zvolíte premennú z predchádzajúceho kroku ecommerce.purchase.products. Pri parametri id zapíšete namiesto .productCode> .id. Ostatné parametre zostávajú rovnaké.

Upravený script si môžete stiahnuť nižšie.

function () {

// získání dat z proměnné datové vrstvy

  var items = {{ecommerce.purchase.products}};

// transformace a návrat hodnot ve formátu Biano Pixel

  return items.map(function (item) {

    return {

      id: item.id.toString(),

      quantity: parseFloat(item.quantity),

      unit_price: parseFloat(item.price),

    };

  });

}

Teraz máte všetky potrebné premenné pre implementáciu pixelu definované.

 

2. Teraz si zadefinujeme spúšťače (Triggers) pre všetky Biano pixel eventy. Teda Page View, Product View, Add To Cart a Purchase. Zhliadnutie stránky (Page View) budeme spúšťať na každej stránke, preto použijeme vstavaný spúšťač All pages. Ďalšie spúšťače nadefinujeme podľa eventov dátovej vrstvy.

Vytvoríte spúšťač s názvom napríklad event_ItemView, typ nastavíte Custom Event a názov udalosti viewItem (pozor na názvy udalostí aj veľké a malé písmená). Opäť nám v tom pomôže dataslayer.

Pri ostatných spúšťačoch postupujeme rovnako.

  • b. event_AddToCart - názov addToCart.
  • c. event_Purchase - názov purchase.

Všetky potrebné spúšťače máte nadefinované a teraz môžete vytvoriť samotné značky.

 

3. Vytvoríme 4 nové značky (TAGS) pre každú udalosť (event) Biano Pixelu. Typ značky zvolíme Biano Pixel. Túto značku musíme pridať do nášho GTM z Komunitnej Galérie Šablón a schváliť jej použitie.

Prvú značku nazvete napríklad Biano - page view, ako typ zvolíte Biano Pixel, do poľa Merchant ID zapíšete predtým vytvorenú premennú {{Biana MERCHANT ID}}, typ udalosti Page View a ako spúšťač All pages.

Ďalšiu značku bude posielať udalosť Product View. Všetko nastavíte ako predtým a do poľa Product ID vložíte našu premennú {{Product ID}}. Ako spúšťač zvolíte event_ItemView.

Ďalšou značkou bude Biano - Add To Cart. Typ značky aj Merchant ID nastavíte ako predtým. Typ udalosti zvolíte Add to Cart, do poľa Product ID zadáte premennú {{Product ID - AddToCart}}, do poľa Quantity premennú {{Quantity}}, do poľa Unit Price premennú {{Unit price}} a do Currency {{Currency}}. Spúšťač zvolíme event_AddToCart.

Poslednou značkou bude Biano - purchase odosielajúci informácie o nákupoch zákazníkov. Typ značky aj Merchant ID nastavíte ako predtým. Typ udalosti nastavíme na Purchase. Do ostatných polí vpíšete vopred pripravené premenné {{Order ID}}, {{Total Order Price}}, {{Currency}} a {{Biana - Purchased Products Array}}. Ako spúšťač zvolíte event_Purchase.

 

4. Teraz si môžeme pomocou ukážky zmien v GTM skontrolovať, či sa všetky premenné správne plnia a všetky značky spúšťajú. Vyskúšame spustiť všetky udalosti, teda návšteva stránky, návšteva karty produktu, pridanie do košíka a nákup. Ak je všetko správne, tak by sa eventy mali zobraziť aj v samotnej administrácii Biana.

 

5. Akonáhle máte všetko skontrolované, môžete kontajner publikovať a máte hotovo.

 

 

Postup pre Biano Button:

Button budete implementovať čisto pomocou Google Tag Manager. Nie je to ten najlepší spôsob, ale pre nasadenie a testovanie služby zatiaľ postačí. Zároveň tento návod už vyžaduje aspoň základné znalosti JavaScriptu, HTML a CSS.

Doporučujeme zároveň preštudovať aj návod na implementáciu Biano Button od samotného Biana.

Pre správne fungovanie buttonu je potrebné definovať niekoľko premenných (parametrov). Product ID môžete použiť z predchádzajúceho návodu, ale musíte ešte vytvoriť Product name (názov výrobku) a Product cover IMG (URL hlavného obrázku produktu).

  • a. Product name - vytvoríte Premennú Dátovej Vrstvy a názov ecommerce.detail.products.0.name.
  • b. Product cover IMG - táto premenná bude už trošku zložitejšia, pretože url obrázku produktu dátová vrstva neposkytuje. Odkaz si musíte nájsť priamo v kóde stránky pomocou Css Selector alebo id elementu a definovať ho ako premennú. Opäť si otvoríte nástroj pre vývojárov a nájdete element obsahujúci váš obrázok. Najlepšie je ak má element unikátnu id, ale postačí aj trieda (class). V tomto prípade je to element img a class=”js-qv-product-cover”. Ak neviete, čo je to Css Selektor, id a class, odporúčame najskôr naštudovať potrebné minimum.

Potom vytvoríte novú premennú typu DOM element, Selection Method zvolíte CSS Selector, do hodnoty Element Selector skopírujete názov triedy, v tomto prípade img.js-qv-product-cover, a Attribute Name zadáte src, čo je atribút, v ktorom je zapísaný odkaz na obrázok.

Všetky potrebné spúšťače máte už vytvorené z návodu pre implementáciu pixelov, takže pristúpte rovno k tvorbe značky (TAG), ktorá na určené miesto vloží HTML element <a> vrátane všetkých potrebných atribútov. Biano script potom na stránke hľadá tento špecifický element a doplní namiesto neho tlačidlo Podobné produkty - Biano Button.

Značku si napr. pomenujte HTML injection. Typ značky zvoľte Custom HTML a do tela vložte script, ktorý vytvorí potrebný element aj s dynamickými parametrami a umiestni ho na stránke, kam potrebujeme. Aby sa značka spustila skôr ako značka pre Biano Button, nastavíte Tag firing priority na hodnotu 1. Ako spúšťač zvolíte event_ItemView.

Nebudeme zabiehať do podrobností samotného scriptu len vysvetlíme, ako doplniť dynamické atribúty a kam sa bude výsledný element na stránke vkladať. V predchádzajúcich krokoch ste vytvorili premenné, ktoré teraz doplníte ako hodnoty pre atribúty nášho nového elementu. "data-product-id", "{{Product ID}}", "data-product-name", "{{Product name}}" a "data-product-image", "{{Product cover IMG}} ". Ak ste si premenné pomenovali inak, tak samozrejme musíte názvy upraviť.

A teraz prichádza posledná, najdôležitejšia časť. Musíte definovať, kde sa nový element na stránke vykreslí. Prejdite na produktovú kartu a znovu otvoríte Nástroje pre vývojárov. Vyhľadáte element, pred ktorým chcete, aby sa Biano Button vykreslil. V tomto prípade to bol blok s informáciami pre zákazníka, ktorý má id="block-reassurance". Názov id zapíšete do scriptu na patričné miesto ako # block-reassurance.

Náš script si stiahnite nižšie, ale pamätajte, že ho pravdepodobne bude potrebné upraviť. Predovšetkým Selector element, pred ktorý chcete vložiť Button.

<script>

  (function() {

    // Create a new <a> element

    var a = document.createElement("a");

    a.setAttribute("id", "biano-recommendations-button");

    a.setAttribute("title", "Doporučené produkty od Biano.cz");

    a.setAttribute("data-product-id", "{{Product ID}}");

    a.setAttribute("data-product-name", "{{Product name}}");

    a.setAttribute("data-product-image", "{{Product cover IMG}}");       

    a.setAttribute("data-style", "2");

    a.setAttribute("href", "https://www.biano.cz");

    

    // Add the text content

    a.innerText = "Podobné produkty BIANO";

    

    // Get the reference to the target element

    var target = document.querySelector('#block-reassurance');

    

    // Inject the new element right before the target

    if (target) {

      target.parentNode.insertBefore(a, target);

    }

  })();

</script>

Na záver upravíte pôvodnú značku Biano - item view. Otvoríte nastavenie značky a zaškrtneme checkbox Enable Biana Button.

Rovnako ako v prípade Biano Pixelu, skontrolujte zmeny pomocou ukážky zmien v GTM. Ak je všetko správne, na produktovej stránke by sa malo zobraziť tlačidlo Biano Button - Podobné produkty.

Prilákajte viac zákazníkov v segmente nábytku a dekorácií. Inzercia na porovnávači Biano a správne používanie jeho šikovných služieb vám prinesú väčšiu dôveryhodnosť aj pravdepodobnosť, že návštevník nakúpi práve u vás.

Prevádzkujete obchod na inej e-shopovej platforme? Modul Mergado Pack ich ovláda niekolko a poradí si s implementáciou známych reklamných nástrojov, medzi ktore patrí GLAMI Pixel, Heureka meranie konverziám alebo Google Ads.

 

 

 

Autorom tohto článku je Mergado Pack špecialista Petr Mindl.

Petr sa v Mergado tíme stará o šikovný nástroj Mergado Pack. Baví ho hľadať nevšedné riešenia a všetko okolo automatizácie a robotizácie. Od vývoja a marketingu rád skĺzne vo voľnom čase k volejbalu alebo motorke.

 

Mohlo by vás zaujímať:

Zbierajte zákaznícke recenzie Google na vašom PrestaShop alebo WooCommerce e-shope

Zákaznícke recenzie Google sú cenným zdrojom informácií a ďalšou možnosťou, ako zviditeľniť e-shop a produkty. Implementujte ich pre váš obchod na platformách PrestaShop alebo WooCommerce. Zvýšite tým jeho dôveryhodnosť.

30.03.2021
Využívajte výhody funkcie Árukereső Trusted Shop na WooCommerce a PrestaShop

Predávate cez WooCommerce či PrestaShop na najväčšom maďarskom porovnávači Árukereső? Zapojte sa tu do programu zberu zákazníckych recenzií. Získate tým lepší prehľad o tom, ako skvalitniť vašu inzerciu. Ak používate Mergado Pack, funkciu Trusted Shop ľahko aktivujete.

04.03.2021
Poraďte si ľahko s implementáciou Biano Pixelu. Na pomoc prichádza Mergado Pack

Smerujete s vašim e-shopom na porovnávač Biano? Pri nastavení propagácie určite neprehliadnite remarketingový nástroj Biano Pixel, ktorý dokáže posunúť produkty na predné pozície. Lepšie výsledky však docielite len so správnou implementáciou. Využite asistenciu bezplatného nástroja Mergado Pack a jeho praktických videonávodov.

18.02.2021

Pridať nový komentár