- [Case Studies](/kategorie/case-studies) - [E‑commerce tipy](/kategorie/e-commerce-tipy) - [E‑shopové riešenia a platformy](/kategorie/e-shopove-riesenia-platformy) - [Mergado Pack](/kategorie/mergado-pack) - [Mergado tipy](/kategorie/mergado-tipy) - [Novinky v Mergade](/kategorie/novinky-v-mergade) - [Novinky z porovnávačov cien](/kategorie/novinky-z-porovnavacov-cien) - [Pracujeme s Mergadom](/kategorie/pracujeme-s-mergadom) - [Rozhovory](/kategorie/rozhovory) - [Rozšírenia](/kategorie/aplikacie) - [S Mergadom do zahraničia](/kategorie/s-mergadom-do-zahranicia) - [Zo života Mergada](/kategorie/zo-zivota-mergada) 1. [ Domov ](/) 2. [ Blog ](/blog) 3. [ Mergado Pack ](/kategorie/mergado-pack) 4. **Implementujte Biano Pixel pomocou Mergado Packu a Google Tag Manageru** # **Implementujte Biano Pixel pomocou Mergado Packu a Google Tag Manageru** [ ![](https://www.mergado.sk/sites/default/files/perm/user-avatar/23021961102131189073595481259913287n.jpg) Lukáš Horák ](/blog/lukas-horak) [Mergado Pack](/kategorie/mergado-pack) 13. 4. 2021 4 minúty čítania ![](https://www.mergado.sk/sites/default/files/field/image/pack_2.png) 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](https://www.mergado.sk/biano-pixel) a similarity funkcie [Biana Button](https://www.mergado.sk/biano-pixel). Na požadované výsledky dosiahnete iba správnou implementáciou. 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 porovnávači Biano prispôsobiť **zobrazovanie produktov na základe preferencií zákazníka**? Zvládnete to pomocou remarketingovej služby [Biana Pixel](https://www.mergado.sk/biano-pixel). Na požadované výsledky dosiahnete iba správnou implementáciou. Skvelým pomocníkom vám pri ňom budú nástroje [Mergado Pack](https://pack.mergado.cz) a [Google Tag Manager](https://tagmanager.google.com/#/home). ## 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](https://chrome.google.com/webstore/detail/dataslayer/ikbablmmjldhamhcldjjigniffkkjgpo). 2. Okrem toho odporúčame mať otvorený [návod na implementáciu GTM od Biana](https://pixel.biano.cz/pdf/GUIDE-GTM_CZ.pdf). ### 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): - ### a. Biano MERCHANT ID Toto je obyčajná konštanta, ktorej hodnota bude naše *Merchant ID.* ![](/sites/default/files/users/1-merchantid.png) - ### b. Product 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*). ![](/sites/default/files/users/2-productid.png) 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. ![](/sites/default/files/users/3-productid.png) Pri ostatných premenných dátovej vrstvy postupujete rovnako. - ### c. Ďalšie premenné dátovej vrstvy - **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* ![](/sites/default/files/users/4-ecommercepurchaseproducts.png) - ### d. Biano — Purchased Products Array 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), }; }); } ![](/sites/default/files/users/5-productsarray.png) 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. - ### a. Udalosť — návšteva produktu 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*. ![](/sites/default/files/users/6-itemview.png) Pri ostatných spúšťačoch postupujeme **rovnako**. - ### b. Ostatné spúšťače - **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. ![](/sites/default/files/users/7-tagtype.png) ![](/sites/default/files/users/8-importtadtepmlate.png) - ### a. Baino — Page view 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. ![](/sites/default/files/users/9-pageview.png) - ### b. Biano — Item View Ď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.** ![](/sites/default/files/users/10-itemview.png) - ### c. Biano — Add to cart Ď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 P*roduct 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*. ![](/sites/default/files/users/11-addtocart.png) - ### d. Biano — Purchase 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*. ![](/sites/default/files/users/12-purchase.png) **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. ![](/sites/default/files/users/13-overenielementu.png) **5.** Akonáhle máte všetko skontrolované, **môžete kontajner publikovať** a máte hotovo. Prilákajte viac zákazníkov v segmente nábytku a dekorácií. Inzercia na porovnávači [Biano](https://www.mergado.sk/tema/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](https://www.mergado.sk/tema/glami-pixel), [Heureka](https://www.mergado.sk/tema/heureka) meranie konverziám alebo [Google Ads](https://www.mergado.sk/tema/google-adwords). [![](/sites/default/files/users/mergado-pack/banner/visit_new_web_cs.png)](https://pack.mergado.cz/) ![](https://www.mergado.sk/sites/default/files/perm/paragraph-image/mindl.png) **Autorom** tohto článku je Mergado Pack špecialista **Petr Mindl**. Petr sa v Mergado tíme stará o šikovný **[nástroj Mergado Pack](https://pack.mergado.cz/)**. 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ť:** [ ![Klikkmania - sk](https://www.mergado.sk/sites/default/files/perm/image/mergado-nahledovky-na-blog-1200-x-628-px-1_0.jpg) ### Úspešná migrácia feedov e‑shopu s pomocou Mergada – 40+ feedov v 5 jazykoch ](/blog/sikeres-webshop-feed-migracio-mergado-segitsegevel) [ ![GPT Shopping](https://www.mergado.sk/sites/default/files/perm/image/mergado-nahledovky-na-blog-1200-x-628-px.jpg) ### Ako pripraviť produktové dáta tak, aby dávali zmysel pre GPT Shopping? ](/blog/optimalizace-dat-pro-gpt-shopping) [ ![](https://www.mergado.sk/sites/default/files/perm/image/mf26_clanek_sk.jpg) ### Zahájte festivalovú sezónu nadupanou konferenciou Mergado Fest ](/blog/zahajte-festivalovu-sezonu-na-mergado-feste) [ ![](https://www.mergado.sk/sites/default/files/perm/user-avatar/23021961102131189073595481259913287n.jpg) ](/blog/lukas-horak)### [ Lukáš Horák ](/blog/lukas-horak) Lukáš sa v Mergade stará o väčšinu komunikácie v češtine. Prostredníctvom blogu, e‑mailu a sociálnych sietí pravidelne zásobuje čitateľa aktualitami z e‑commerce, novinkami a tipmi z Mergada. Pokiaľ práve nie je copywriter, užíva si príjemné veci ako badminton, výlety medzi utajené skvosty osemdesiatkovej hudby a plody mora podávané s červeným vínom. ## Mohlo by vás *zaujímať* [ ![vylúčenie platebných brán](https://www.mergado.sk/sites/default/files/perm/image/new-nahladovka-na-blog-1200-x-628-px-30_0.png) ### Merajte pohodlne dáta e‑shopu. Ako vylúčiť platobné brány v Google Analytics 4 ](/blog/google-analytics-platobne-brany) [ ![Mergado Pack pre WooCommerce vám pomôže zbierať recenzie pre Biano Star ](https://www.mergado.sk/sites/default/files/field/image/pack-woo.png) ### Mergado Pack pre WooCommerce vám pomôže zbierať recenzie pre Biano Star ](/blog/mergado-pack-recenzie-biano-star) [ ![Mergado Pack v. 3 pre PrestaShop zjednodušuje mnoho e-shopárskych úkonov ](https://www.mergado.sk/sites/default/files/field/image/pack-recenzie_0.png) ### Mergado Pack v. 3 pre PrestaShop zjednodušuje mnoho e‑shopárskych úkonov ](/blog/mergado-pack3-prestashop) ## Nenechajte si nič *ujsť* Prihláste sa k odberu nášho newslettera Prihlásením súhlasíte s tým, že vaše údaje budeme spracovávať v súlade s našimi [zásadami ochrany osobných údajov](/vyhlasenie-o-cookies). Ďakujeme, úspešne ste sa pripojili k nášmu zoznamu odberateľov. 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() }