- [Case Studies](https://www.mergado.cz/kategorie/case-studies)
- [E‑commerce tipy](https://www.mergado.cz/kategorie/e-commerce-tipy)
- [E‑shopová řešení a platformy](https://www.mergado.cz/kategorie/e-shopova-reseni-a-platformy)
- [Mergado Pack](https://www.mergado.cz/kategorie/mergado-pack)
- [Mergado tipy](https://www.mergado.cz/kategorie/mergado-tipy)
- [Novinky v Mergadu](https://www.mergado.cz/kategorie/novinky-v-mergadu)
- [Novinky ze srovnávačů](https://www.mergado.cz/kategorie/novinky-ze-srovnavacu)
- [Pracujeme s Mergadem](https://www.mergado.cz/kategorie/pracujeme-s-mergadem)
- [Rozhovory](https://www.mergado.cz/kategorie/rozhovory)
- [Rozšíření](https://www.mergado.cz/kategorie/aplikace)
- [S Mergadem do zahraničí](https://www.mergado.cz/kategorie/s-mergadem-do-zahranici)
- [Ze života Mergada](https://www.mergado.cz/kategorie/ze-zivota-mergada)
1. [ Úvod ](https://www.mergado.cz/)
2. [ Blog ](https://www.mergado.cz/blog)
3. [ Mergado Pack ](https://www.mergado.cz/kategorie/mergado-pack)
4. **Implementujte Biano Pixel pomocí Mergado Packu a Google Tag Manageru**
# **Implementujte Biano Pixel pomocí Mergado Packu a Google Tag Manageru**
[  Lukáš Horák ](https://www.mergado.cz/blog/lukas-horak) [Mergado Pack](https://www.mergado.cz/kategorie/mergado-pack)
13. 4. 2021
4 minuty čtení
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](https://www.mergado.cz/biano-pixel) a similarity funkce [Biano Button](https://www.mergado.cz/blog/funkce-biano-button). Na požadované výsledky dosáhnete pouze **správnou implementací**.
function tableOfContents() {
return {
headings_menu: [],
heading_active: '', // Added to track the active section
shouldBeSticky: false,
generateToC() {
const headings = document.querySelectorAll('.js-article-full-headings h2, .js-article-full-headings h3');
let headingMap = {};
headings.forEach((heading) => { // Use an arrow function to maintain `this` context
// Normalize heading text to remove diacritics, then replace non-alphanumeric characters with dashes
var normalizedText = heading.textContent.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); // Remove diacritics
var id = heading.id ? heading.id : normalizedText.trim().toLowerCase()
.split(' ').join('-').replace(/[^a-z0-9\-]/ig, ''); // Updated regex to replace non-alphanumeric characters
headingMap[id] = headingMap[id] !== undefined ? ++headingMap[id] : 0;
// Use the updated `id` with diacritics removed for the heading id and the TOC
const finalId = headingMap[id] ? `${id}-${headingMap[id]}` : id;
this.headings_menu.push({
id: finalId,
title: heading.textContent,
level: heading.tagName.toLowerCase(), // Track heading level
active: false, // Initially set active to false
});
heading.id = finalId;
});
},
checkStickyNeeded() {
const ul = this.$el.querySelector('ul');
if (ul) {
this.shouldBeSticky = ul.scrollHeight < window.innerHeight;
}
},
setActiveHeading() {
// disabled not working with active state on click
// add @scroll.window="setActiveHeading()" to the parent div
// const headings = document.querySelectorAll('.js-article-full-headings h2');
// let activeHeading = '';
// let closestHeadingDistance = Infinity;
// headings.forEach((heading) => {
// const rect = heading.getBoundingClientRect();
// const offset = rect.top - window.innerHeight / 2; // Consider heading in the middle of the screen as active
// if (offset < 0 && Math.abs(offset) < closestHeadingDistance) {
// activeHeading = heading.id;
// closestHeadingDistance = Math.abs(offset);
// }
// });
// // Update the active state in headings_menu
// if (activeHeading !== this.heading_active) {
// this.headings_menu = this.headings_menu.map(item => ({
// ...item,
// active: item.id === activeHeading,
// }));
// this.heading_active = activeHeading;
// }
},
setActiveItem(clickedId) {
this.headings_menu.forEach(item => {
item.active = (item.id === clickedId);
});
this.heading_active = clickedId; // Optionally update the heading_active property if used
},
};
}
1. —
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](https://www.mergado.cz/biano-pixel). 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](https://pack.mergado.cz) a [Google Tag Manager](https://tagmanager.google.com/#/home).
Popsanou implementaci umožňují Mergado Pack moduly pro [**PrestaShop**](https://pack.mergado.cz/prestashop) a [**WooCommerce**](https://pack.mergado.cz/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](https://chrome.google.com/webstore/detail/dataslayer/ikbablmmjldhamhcldjjigniffkkjgpo).
2. Kromě toho **doporučujeme mít** otevřený [návod na implementaci GTM od Biana](https://pixel.biano.cz/pdf/GUIDE-GTM_CZ.pdf).
### 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):
- ### a. Biano MERCHANT ID
Toto je obyčejná konstanta, jejíž hodnota bude naše Merchant ID.
- ### b. Product 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ě.
- ### c. Další proměnné Datové vrstvy
- **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*
- ### d. Biano — Purchased Products Array
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.
- ### a. Událost — návštěva produktu
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ě**.
- ### b. Ostatní spouštěče
- **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.
- ### a. Biano — Page View
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**.
- ### b. Biano — Item View
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**.
- ### c. Biano — Add To Cart
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**.
- ### d. Biano — Purchase
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**.
Přilákejte více zákazníků v segmentu nábytku a dekorací. Inzerce na srovnávači [Biano](https://www.mergado.cz/tema/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](https://www.mergado.cz/tema/glami-pixel), [Heureka](https://www.mergado.cz/tema/heureka-cz) měření konverzí nebo [Google Ads](https://www.mergado.cz/tema/google-ads).
[](https://pack.mergado.cz/)
Autorem tohoto článku je Mergado Pack specialista **Petr Mindl**.
Petr se v Mergado týmu stará o šikovný [**nástroj Mergado Pack**](https://pack.mergado.cz/). 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:**
[ 
### Jak optimalizace feedu zvýšila výkon Meta Ads bez navýšení rozpočtu
](https://www.mergado.cz/blog/optimalizace-feedu-pro-Meta-Ads)
[ 
### Jak úspěšně prodávat na idealo
](https://www.mergado.cz/blog/uspesny-prodej-na-idealo)
[ 
### Výkonnější reklamy bez navýšení rozpočtu: 6 tipů, jak vytěžit maximum z produktových dat
](https://www.mergado.cz/blog/vykonnejsi-reklamy-bez-navyseni-rozpoctu)
- [ Biano ](https://www.mergado.cz/tema/biano)
[  ](https://www.mergado.cz/blog/lukas-horak)### [ Lukáš Horák ](https://www.mergado.cz/blog/lukas-horak)
Lukáš se v Mergadu stará o většinu komunikace v češtině. Prostřednictvím blogu, e‑mailu a sociálních sítí pravidelně zásobuje čtenáře aktualitami z e‑commerce a novinkami a tipy z Mergada. Pokud zrovna není copywriterem, užívá si prosté věci jako badminton, výlety mezi utajené skvosty osmdesátkové hudby a plody moře podávané s červeným vínem.
## Mohlo by vás *zajímat*
[ 
### Měřte pohodlně data e‑shopu. Jak vyloučit platební brány v Google Analytics 4
](https://www.mergado.cz/blog/vylouceni-platebnich-bran)
[ 
### Mergado Pack pro WooCommerce vám nově pomůže sbírat recenze pro Biano Star
](https://www.mergado.cz/blog/mpack-woocommerce-biano-star)
[ 
### Mergado Pack v. 3 pro PrestaShop zjednodušuje mnoho e‑shopařských úkonů
](https://www.mergado.cz/blog/pack-prestashop-treti-verze)
## Ať vám *nic neunikne*
Přihlašte se do našeho newsletteru
Přihlášením souhlasíte, že vaše údaje zpracujeme v souladu s podmínkami o [ochraně osobních údajů](https://www.mergado.cz/prohlaseni-o-cookies).
Děkujeme, úspěšně jste se připojili k našemu seznamu odběratelů.
function ml_webform_success_5807248() {
var r = ml_jQuery || jQuery
r('.ml-subscribe-form-5807248 .row-success').show(), r('.ml-subscribe-form-5807248 .row-form').hide()
}