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

Mergado Pack: Ako pridať kódy produktov do vášho WooCommerce e-shopu?

Plugin Mergado Pack sa opäť hlási o pozornosť s novinkami, ktoré priniesol užívateľom posledný release. Okrem zaujímavých vylepšení sa v tomto článku zameriame na novú možnosť pridávať EAN kódy v produktovom feede.

27.05.2021
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

Pridať nový komentár