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

Chcete na srovnávači Biano přizpůsobit zobrazování produktů na základě preferencí zákazníka? Zvládnete to pomocí remarketingové služby Biano Pixel a similarity funkce Biano Button. Na požadované výsledky dosáhnete pouze správnou implementací. Skvělým pomocníkem vám při ní budou nástroje Mergado Pack a Google Tag Manager

Popsanou implementaci umožňují Mergado Pack moduly pro PrestaShop a WooCommerce.

Pracujte s datovou vrstvou webu

Pro bezproblémovou implementaci je nutné nahlížet do datové vrstvy vašeho webu.

  1. Můžete použít preview režim samotného GTM, nebo doplněk do prohlížeče Chrome - dataslayer.
  2. Kromě toho doporučujeme mít otevřený návod na implementaci GTM od Biana.

Obecně:

Nejprve je nutné mít nainstalovaný Mergado Pack a aktivovaný kontejner pro GTM. U funkce GTM v administraci modulu je nutné mít aktivovány všechny funkce Ecommerce Tracking.

 

 

Postup pro Biano Pixel:

1. Ve správci značek (GTM) nejprve definujeme potřebné proměnné (VARIABLES):

Toto je obyčejná konstanta, jejíž hodnota bude naše Merchant ID.

Tuto proměnnou musíme definovat jako Proměnnou Datové Vrstvy (Data Layer Variable). Pomůže nám k tomu právě zmiňovaný dataslayer. Na produktové stránce otevřeme vývojářské nástroje (pravým kliknutím myši a zvolíme Prozkoumat nebo stisknutím funkční klávesy f12).

Vidíme, že ID produktu je ve struktuře na “5. úrovni” - tedy ecommerce.detail.products.0.id. Hodnotu hledáme u eventu viewItem.

Vytvoříme novou proměnnou a nazveme ji například Product ID. Jako typ zvolíme Data Layer Variable, název proměnné ecommerce.detail.products.0.id a verze datové vrstvy 2.

U ostatních proměnných datové vrstvy postupujeme stejně.

  • Product ID - AddToCart - název proměnné ecommerce.add.products.0.id 
  • Quantity - název ecommerce.add.products.0.quantity 
  • Unit price - název ecommerce.add.products.0.price 
  • Currency - název ecommerce.currencyCode
  • Order ID - název ecommerce.purchase.actionField.id
  • Total Order Price - název ecommerce.purchase.actionField.revenue
  • ecommerce.purchase.products - tuto proměnnou budeme potřebovat pro “vytáhnutí” pole zakoupených produktů z datové vrstvy, název ecommerce.purchase.products

Tato proměnná transformuje pole zakoupených produktů do formátu pro Biano.

Vytvoříme proměnnou s typem Custom JavaScript. Jako obsah vložíme script připravený od Biana, jen ho trochu upravíme pro potřeby naší datové vrstvy. Jako proměnnou items zvolíme proměnnou z předchozího kroku ecommerce.purchase.products. U parametru id zapíšeme namísto .productCode > .id. Ostatní parametry zůstávají stejné.

Upravený script si můžete stáhnout níže. 

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),
    };
  });
}

Nyní máme všechny potřebné proměnné pro implementaci pixelu definované.

 

2. Nyní si nadefinujeme spouštěče (TRIGGERS) pro všechny Biano pixel eventy. Tedy Page View, Product View, Add To Cart a Purchase. Zhlédnutí stránky (Page View) budeme spouštět na každé stránce, proto použijeme vestavěný spouštěč All pages. Další spouštěče nadefinujeme podle eventů datové vrstvy. 

Vytvoříme spouštěč s názvem například event_ItemView, typ nastavíme Custom Event a název události viewItem (pozor na názvy událostí i velká a malá písmena). Opět nám v tom pomůže dataslayer.

U ostatních spouštěčů postupujeme obdobně.

  • event_AddToCart - název addToCart.
  • event_Purchase - název purchase.

Všechny potřebné spouštěče máme nadefinované a nyní můžeme vytvořit samotné značky.

 

3. Vytvoříme 4 nové značky (TAGS) pro každou událost (event) Biano Pixelu. Typ značky zvolíme Biano Pixel. Tuto značku musíme přidat do našeho GTM z Komunitní Galerie Šablon a schválit její použití. Tento krok provedeme pří vytváření nové značky a následně výběru typu značky. 

První značku nazveme například Biano - page view, jako typ zvolíme Biano Pixel, do pole Merchant ID zapíšeme námi dříve vytvořenou proměnnou {{Biano MERCHANT ID}}, typ události Page View a jako spouštěč All pages.

Další značka bude posílat událost Product View. Vše nastavíme jako předtím a do pole Product ID vložíme naši proměnnou {{Product ID}}. Jako spouštěč zvolíme event_ItemView.

Další značkou bude Biano - Add To Cart. Typ značky i Merchant ID nastavíme jako předtím. Typ události zvolíme Add to Cart, do pole Product ID zadáme proměnnou {{Product ID - AddToCart}}, do pole Quantity proměnnou {{Quantity}}, do pole Unit Price proměnnou {{Unit price}} a do Currency {{Currency}}. Spouštěč zvolíme event_AddToCart.

Poslední značkou bude Biano - purchase odesílající informace o nákupech zákazníků. Typ značky i Merchant ID nastavíme jako předtím. Typ události nastavíme na Purchase. Do ostatních polí vepíšeme předem připravené proměnné {{Order ID}}, {{Total Order Price}}, {{Currency}} a {{Biano - Purchased Products Array}}. Jako spouštěč zvolíme event_Purchase.

 

4. Nyní si můžeme pomocí náhledu změn v GTM zkontrolovat, zda se všechny proměnné správně plní a všechny značky spouští. Vyzkoušíme spustit všechny události, tedy návštěva stránky, návštěva karty produktu, přidání do košíku a nákup. Pokud je vše správně, tak by se eventy měly zobrazit i v samotné administraci Biano.

5. Jakmile máme vše zkontrolováno, můžeme kontejner publikovat a máme hotovo.

 

 

Postup pro Biano Button:

Button budeme implementovat čistě pomocí Google Tag Manager. Není to ten nejlepší způsob, ale pro nasazení a testování služby nám zatím postačí. Zároveň tento návod již vyžaduje alespoň základní znalosti JavaScriptu, HTML a CSS

Doporučujeme zároveň prostudovat i návod na implementaci Biano Buttonu od samotného Biana.

Pro správné fungování Buttonu je nutné definovat několik proměnných (parametrů). Product ID můžeme použít z předchozího návodu, ale musíme ještě vytvořit Product name (název produktu) a Product cover IMG (URL hlavního obrázku produktu).

  • a. Product ID - proměnnou máme již definovanou z implementace Pixelu.
  • b. Product name - vytvoříme Proměnnou Datové Vrstvy a název ecommerce.detail.products.0.name.
  • c. Product cover IMG - tato proměnná bude už trošku složitější, protože url obrázku produktu nám datová vrstva neposkytne. Odkaz si musíme najít přímo v kódu stránky pomocí css selectoru nebo id elementu a definovat ho jako proměnnou.

    Opět si otevřeme nástroj pro vývojáře a najdeme element obsahující náš obrázek. Nejlepší je pokud má element unikátní id, ale postačí i třída (class). V našem případě je to element img a class=”js-qv-product-cover”. Pokud nevíte, co je to CSS selektor, id a class, doporučujeme nejdříve nastudovat potřebné minimum.

 

 

Poté vytvoříme novou proměnnou typu DOM element, Selection Method zvolíme CSS Selector, do hodnoty Element Selector zkopírujeme název třídy, v našem případě img.js-qv-product-cover, a Attribute Name zadáme src, což je atribut, ve kterém je zapsán odkaz na obrázek.

Všechny potřebné spouštěče máme již vytvořené z návodu pro implementaci Pixelu, takže přistoupíme rovnou k tvorbě značky (TAG), která nám na určené místo vloží HTML element <a> včetně všech potřebných atributů. Biano script poté na stránce hledá tento specifický element a doplní místo něj tlačítko Podobné produkty - Biano Button.

My jsme si značku pojmenovali HTML injection. Typ značky zvolíme Custom HTML a do těla vložíme script, který nám vytvoří potřebný element i s dynamickými parametry a umístí ho na stránce, kam potřebujeme. Aby se značka spustila dřív než značka pro Biano Button, nastavíme Tag firing priority na hodnotu 1. Jako spouštěč zvolíme event_ItemView.

Nebudeme zabíhat do podrobností samotného scriptu jen vysvětlíme, jak doplnit dynamické atributy a kam se bude výsledný element na stránce vkládat. V předchozích krocích jsme si vytvořili proměnné, které nyní doplníme jako hodnoty atributů našeho nového elementu. "data-product-id", "{{Product ID}}", "data-product-name", "{{Product name}}" a "data-product-image", "{{Product cover IMG}}". Pokud jste si proměnné pojmenovali jinak, tak samozřejmě musíte názvy upravit.

A teď přichází poslední, nejdůležitější část. Musíme definovat, kde se náš nový element na stránce vykreslí. Přejdeme na produktovou kartu a znovu otevřeme Nástroje pro vývojáře. Vyhledáme element, před kterým chceme, aby se Biano Button vykreslil. V našem případě to byl blok s informacemi pro zákazníka, který má id=”block-reassurance”. Název id zapíšeme do scriptu na patřičné místo jako #block-reassurance.

 

Náš script si stáhněte níže, ale pamatujte, že ho pravděpodobně bude nutné upravit. Především Selector element, před který chcete vložit 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ávěr upravíme původní značku Biano - item view. Otevřeme nastavení značky a zaškrtneme checkbox Enable Biano Button.

Stejně jako v případě Biano Pixelu zkontrolujeme změny pomocí náhledu změn v GTM. Pokud je vše správně, na produktové stránce by se mělo zobrazit tlačítko Biano Button - Podobné produkty.

Přilákejte více zákazníků v segmentu nábytku a dekorací. Inzerce na srovnávači Biano a správné používání jeho chytrých služeb vám přinesou větší důvěryhodnost i pravděpodobnost, že návštěvník nakoupí právě u vás.

Provozujete obchod na jiné e-shopové platformě? Modul Mergado Pack jich ovládá několik a umí implementaci známých reklamních nástrojů, mezi které patří Glami Pixel, Heureka měření konverzí nebo Google Ads.

 

 

 

Autorem tohoto článku je Mergado Pack specialista Petr Mindl

Petr se v Mergado týmu stará o šikovný nástroj Mergado Pack. Baví ho hledat neotřelá řešení a všechno kolem automatizace a robotizace. Od vývoje a marketingu rád sklouzne ve volném čase k volejbalu nebo motorce. 

 

Mohlo by vás zajímat:

Sbírejte zákaznické recenze Google na vašem PrestaShop nebo WooCommerce e-shopu

Zákaznické recenze Google jsou cenným zdrojem informací a další možností, jak zviditelnit e-shop a produkty. Implementujte je pro váš obchod na platformách PrestaShop nebo WooCommerce. Zvýšíte tím jeho důvěryhodnost.

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

Prodáváte přes WooCommerce či PrestaShop na největším maďarském zbožáku Árukereső? Zapojte se zde do programu sběru zákaznických recenzí. Získáte tím lepší přehled o tom, jak zkvalitnit vaši inzerci. Pokud používáte Mergado Pack, funkci Trusted Shop snadno aktivujete.

04.03.2021
Poraďte si snadno s implementací Biano Pixelu. Na pomoc přichází Mergado Pack

Chcete se s e-shopem vydat na srovnávač Biano? Při nastavení propagace určitě nepřehlédněte remarketingový nástroj Biano Pixel, se kterým vaše produkty posunete na přední pozice. Lepších výsledků ale docílíte pouze správnou implementací.

18.02.2021

Přidat komentář