Nastavení měřicího a konverzního kódu Vildo.cz přes Google Tag Manager

V tomto manuálu vás krok za krokem provedeme nastavením měřicího a konverzního kódu Vildo.cz přes Google Tag Manager. Pokud ještě nemáte vytvořený a nastavený účet Google Tag Manager, můžete tak učinit podle manuálu pro vytvoření účtu GTM.

Měřicí kód Vildo.cz

Zkopírujte měřicí kód Vildo pro měření na všech stránkách:

<script type="text/javascript"> 
(function(d,t,i) {        
    if(i["vildo_px"]) return; 
    var script = d.createElement(t); 
    script.async = true; 
    script.src = '//px.vildo.cz/scripts/px.js'; 
    script.onload = script.onreadystatechange = function() {        
      i["vildo_px"] = 1; 
      vildoPX.checkCookie(); 
      vildoPX.vildoEvent("pageView"); 
    } 
    d.body.appendChild(script) 
  })(document, 'script', window); 
<script>

V Google Tag Manager postupujte dle následujícího návodu:

1. Přejděte do nastavení Značek a klikněte na Nová.
2. Zadejte název značky a klikněte na Konfigurace značky.
3. Jako typ značky vyberte Vlastní HTML.
4. Do pole HTML vložte zkopírovaný kód měření, který je k dispozici výše.
5. Nastavte spouštění značky na všechny stránky.
6. Značku uložte.

Ukázka nastavení značky

Konverzní kód Vildo.cz

Konverzní kód bude umístěn na děkovné stránce s dokončenou objednávkou. Konverzní kód obsahuje dynamické proměnné datové vrstvy, které se musí nadefinovat.

Ukázka konverzního kódu:

<script type="text/javascript"> 
   (function(d,t,i) {             
    if(i["vildo_px"]) {             
      conversion(); 
      return; 
    } 
    i["vildo_px"] = 1; 
    var script = d.createElement(t); script.async = true; 
    script.src = '//px.vildo.cz/scripts/px.js'; 
    script.onload = script.onreadystatechange = function() {             
      //var rs = this.readyState; if (rs && (rs != 'complete') && (rs != 'loaded')) return; 
      conversion(); 
    } 
    d.body.appendChild(script); 
    function conversion() {             
        vildoPX.setIdOrder("93KXN235"); // ID objednávky 
        //zde vložte produkty 
        vildoPX.setProducts( 
          [ 
            {"product_id": 33212, "price": 1000, "quantity": 3, "name":"Zimní bunda XL"}, 
            {"product_id": 23120, "price": 500, "quantity": 2,"name":"Tepláky modré"} 
          ] 
        ); 
        vildoPX.setTotalPrice(1500); // cena objednávky bez dopravy, včetně dph  
        vildoPX.setCurrency("CZK"); // iso kód měny objednávky 
        vildoPX.vildoEvent("conversion"); 
    } 
  })(document, 'script', window); 
<script>

Vytvoření proměnných datové vrstvy

1. Vyplňte název proměnné (Název proměnné použijete v konverznímu kódu).
2. Klikněte na Konfigurace proměnné.
3. Z nabídky vyberte Proměnná datové vrstvy.
4. Do pole Název proměnné datové vrstvy napište transactionId.
5. Proměnnou uložte.

Ukázka nastavení proměnné

Nastavení proměnné pro produkty

Nejprve vytvoříme proměnnou datové vrstvy, ze které si budeme dynamicky načítat pouze určitá data.

1. Do názvu proměnné napište Produkty (tento název je použitý v dalších kódech)
2. Klikněte na Konfigurace proměnné
3. Z nabídky vyberte Proměnná datové vrstvy
4. Do pole Název proměnné datové vrstvy napište transactionProducts
5. Proměnnou uložte

Ukázka nastavené proměnné

Nastavení proměnné setProducts (kód, název, cena, množství)

1. Vyplňte název proměnné (Název proměnné použijete v konverznímu kódu).
2. Klikněte na Konfigurace proměnné.
3. Z nabídky vyberte Vlastní kód Javascript.
4. Do pole Vlastní kód Javascript vložte následující kód:

   function() { 
     var items = {{Produkty}}; 
     var ean = []; 
     var count = []; 
     var i, len; 
     var result = ""; 
     for (i = 0, len = items.length; i < len; i++) { 
       result += '{"product_id": ' + items[i].sku + ', "price": ' + items[i].price * 1.21 + ', "quantity": ' + items[i].quantity + ', "name": "' + items[i].name + '"},' 
     } 
     result = result.substr(0, result.length - 1); 
     return result; 
   } 
   

5. Nastavení uložte

Ukázka nastavení proměnné

Nastavení proměnné pro Celkovou cenu bez poštovného a s DPH

Následující proměnná bude vracet celkovou cenu za všechny produkty v objednávce, která se vynásobí DPH 21 %.

1. Vyplňte název proměnné (Název proměnné použijete v konverznímu kódu).
2. Klikněte na Konfigurace proměnné.
3. Z nabídky vyberte Vlastní kód Javascript.
4. Do pole Vlastní kód Javascript vložte následující kód:

   function() { 
     var items = {{Produkty}}; 
     var ean = []; 
     var count = []; 
     var i, len; 
     var result = 0; 
     for (i = 0, len = items.length; i < len; i++) { 
         result += items[i].quantity * items[i].price; 
     } 
       return result * 1.21; 
   } 
   

5. Nastavení uložte

Ukázka nastavení proměnné

Po nastavení všech proměnných můžeme nastavit značku pro konverzní kód Vildo.cz. V Google Tag Manageru přejdeme na Značky a klikneme na Nová.

1. Vyplníme název konverzní značky.
2. Klikneme na Konfigurace značky.
3. Z nabídky vybereme Vlastní HTML.
4. Do pole HTML vložíme následující kód.

   <script type="text/javascript"> 
      (function(d,t,i) {             
       if(i["vildo_px"]) {             
         conversion(); 
         return; 
       } 
       i["vildo_px"] = 1; 
       var script = d.createElement(t); script.async = true; 
       script.src = '//px.vildo.cz/scripts/px.js'; 
       script.onload = script.onreadystatechange = function() {             
         //var rs = this.readyState; if (rs && (rs != 'complete') && (rs != 'loaded')) return; 
         conversion(); 
       } 
       d.body.appendChild(script); 
       function conversion() {             
           vildoPX.setIdOrder("{{transactionId}}"); // ID objednávky 
           //zde vložte produkty 
           vildoPX.setProducts( 
             [ 
               {{setProducts}} 
             ] 
           ); 
           vildoPX.setTotalPrice({{transactionTotal}}); // cena objednávky bez dopravy, včetně dph  
           vildoPX.setCurrency("CZK"); // iso kód měny objednávky 
           vildoPX.vildoEvent("conversion"); 
       } 
     })(document, 'script', window); 
   <script>
   

5. ISO kód měny můžete ve scriptu změnit. Pro SK zákazníky přepište CZK na EUR.
6. Nastavíme značku pro spouštění na děkovné stránce po potvrzení objednávky.
7. Pokud nemáte spouštěcí pravidlo nastavené, vytvořte nové pravidlo kliknutím na tlačítko „+“ vpravo nahoře.
8. Vyplňte název pravidla (např. dokončená objednávka).
9. Klikněte na Konfigurace pravidla.
10. Vyberte z nabídky Zobrazení stránky.
11. Přepněte nastavení na Některá zobrazení stránek.
12. Podmínku nastavte na Page URL – obsahuje - /objednavka-dokoncena.
13. Uložte pravidlo.
14. Poté co se pravidlo přidá ke značce můžete uložit značku pro měření konverzí.
15. Změny v pracovním prostoru odešlete k publikaci.
    

Gratulujeme, nyní je váš e-shop propojen s měřicím a konverzním kódem Vildo.cz