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:

Mergado Pack: Jak přidat kódy produktů do vašeho WooCommerce e-shopu?

Plugin Mergado Pack se opět hlásí o pozornost s novinkami, které uživatelům přinesl poslední release. Kromě zajímavých vylepšení se v tomto článku zaměříme na novou možnost přidávat EAN kódy v produktovém feedu.

27.05.2021
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

Přidat komentář