Google Tag Manager: 19x nejpoužívanější nastavení

Daniel Nytra

Update 11.7.: Napojení na Google Analytics 4. Více o nastavení Google Analytics 4 najdete zde.

Google Tag Manager

Pokud si přečtete tento článek, potom se naučíte díky nástroji Google Tag Manager nastavovat rychle a jednoduše veškeré kódy na vaše stránky nebo eshop. Naučíte se, jak nastavit:

  • Dynamický remarketing pro Facebook AdsGoogle AdwordsPerfect Audience (pouze eshop)
  • Měřící kódy pro Google Analytics, SumoMe, MyX
  • Remarketing pro Sklik.cz, Etarget.cz
  • Konverzní kódy pro Facebook Ads, Google Analytics, Google Adwords, Perfect Audience
    .. a další věci z jediného místa…

Jde o pochopení a středně náročné nastavení nejdůležitějších skriptů pro eshop nebo obyčejné firemní stránky.

GTM je cool

Google Tag Manager se stojí za to naučit. Seřadil jsem podle priorit, proč je tak super-čuper:

  1. Nemusíte otravovat s úpravou měřících kódů programátora!
  2. Ušetříte si čas s nastavováním stále se opakujících věcí (i pro více projektů)
  3. Máte vše na jednom místě
  4. Spouštíte si scripty dle libosti (fungují krásně regulární výrazy)
  5. Plně kompatibilní se všemi systémy a kódy (remarketing, heatmaps, konverzní pixely apod.)

Legenda = nutné zlo

  • tags = značky (scripty, které se spouští)
  • variables = proměnné (dynamicky mění hodnoty ve scriptech)
  • triggers = spouštěče (podmínka spuštění scriptu s využitím regulárních výrazů)

O co jde s GTM

Google Tag Manager (GTM) je chytrý nástroj pro markeťáky, kde na jednom místě máte všechny kódy (scripty) k určitému projektu + můžete nastavovat funkčnosti těchto kódů (spouštět na konkrétních stránkách, při určitých akcích apod.). Důležité ale je, že jen jednou požádáte vašeho programátora, aby připravil věci a pak ho (a sebe) už neotravujete – HURÁ, SVOBODA 🙂

Co nastavuje programátor v kódu stránek

  • vložit GTM kód na stránky (v dalším odstavci je návod)
  • z důvodů dynamického remarketingu vložit datovou vrstvu. Doporučuji použít nastavení např. pro detail produktu minimálně:
    <script>
    var google_tag_params = {
      'ecomm_pagetype': 'product',       //detail produktu
      'ecomm_pcat': ['knihy pro děti'],   // kategorie
      'ecomm_prodid': ['123A'],      // id produktu
      'ecomm_pname': ['Budulínek'],    // jméno produktu 
    };
    </script>
  • klasické předávání transakcí Google Analytics – návod ZDE

Pokud používáte eshop WooCommerce, využijte tento plugin pro přidání datové vrstvy „dataLayers“.

Nastavte si účet v Google Tag Manager

Nejdříve si nastavíme účet a vložíme kód na stránky:

  1. Jděte na Google Tag Manager: ZDE
  2. Klikněte na vytvořit účet: „Create account
  3. Vyplňte jméno účtu:
    Google Tag Manager: Vytvoření účtu
  4. Adresa webu:
    Google Tag Manager: Vytvoření účtu
  5. Vygenerovaný kód vložte do všech stránek za <body>
    Google Tag Manager: Vytvoření účtu

Jak testovat správnost kódu

Vše si můžete průběžně testovat rozšířením prohlížeče Google Chrome: Google Tag Assistant. Uvidíte v něm základní věci a správnost nastavení jednotlivých značek (tagů), které postupně vytvoříme v tomto článku.

Zde vidíte kontrolu nastavení: Google Tag Manager, Google Analytics a Remarketing tag v Google Tag Assistant (Google Chrome):

Google Tag Asistant

1. Google Analytics v Google Tag Manageru

Začneme přidáváním prvního scriptu. Bude to měřící kód z Google Analytics. Google Tag Manager má spoustu věcí předvolených, takže to bude hodně jednoduché:

  1. Vytvoříme novou značku (tag):
    Google Tag Manager: Nová značka
  2. Nastavíme první značku (tag): Potřebujete z Google Analytics vaše ID měřícího kódu: „UA-XXXXX-XX„:
    Google Tag Manager: Google Analytics
  3. Vidíme ji přidanou a klikneme na publikovat:
    Google Tag Manager: Nová značka
  4. To, že značku přidáme, ještě neznamená, že bude na stránkách automaticky přidaná. Musíme vždy kliknout na „Publikovat“ a až potom se vše projení na vašich stránkách:
    Google Tag Manager: Publikování

Máme tedy nastavený Google Analytics a můžete si jej zkontrolovat v Google Tag Asistant (viz. výše).

2. Nastavení SumoMe

Tento script ze stránek SumoMe.com poskytuje zdarma některé vychytávky: Heatmapu (musíte ručně zapínat na konkrétní stránky, jinak platit), Scrollmapu (to samé, jako Heatmapa), tlačítka pro sdílení na sociální sítě (responzivní), automaticky se zobrazující tlačítka na sdílení obrázků (pokud přes ně přejedete myší), vyskakovací okno (velice ořezaná verze zdarma).

Vložíme tedy jednoduše do Google Tag Manageru, jako další tag s tímto nastavením:

Google Tag Manager: SumoMe

2. Nastavení Retargetingu u Sklik.cz

Pokud chcete využít retargetingu u Sklik.cz, je nutné vložit na stránky jejich script. Jednoduše ho čapněte (CTRL+C) z vašeho skliku a velice jednoduše přes Google Tag Manager vložte… s tímto nastavením:

Google Tag Manager: Sklik Retargeting

…a zbytek nastavíte v účtu Sklik.cz. Samozřejmě zde můžete nastavit i konverze, ale o tom až dále.

3. Nastavení MyX Heatmapy

Pokud můžete a chcete nastavit heatmapu od MyX.cz, je to zase hodně jednoduché:

Google Tag Manager: Heatmapa MyX

4. Nastavení Etarget.cz

Pokud využíváte systém Etarget.cz a jeho remarketing, zde je zase jednoduché nastavení:

Google Tag Manager: Etarget.cz

… pak už jen v Etargetu nastavíte např. rozřazení dle kategorií nebo produktů. Bohužel zde nejde dynamický remarketing… takže vše růčo 🙁 Konverze se nastavují přímo v Etargetu.

5. Nastavení proměnné „google_tag_params“

Už začíná přituhovat: Pro další tag budeme potřebovat nastavit proměnnou pro předávání hodnot. Ideální je pro to „google_tag_params“, který už předpřipravil programátor na začátku (tzv. „dataLayers“ – datová vrstva). Jen ho vyzvedneme z kódu do proměnné Google Tag Manageru. Dělá se to stejně jednoduše, jako přidávání značky (tagu): V menu vlevo vyberte „Variables“ a vytvořte novou s tímto nastavením:

Google Tag Manager: Proměnná

..odteď se na tuto proměnnou můžete odkazovat ve značkách {{google_tag_params}}

6. Nastavení Google Adwords – Remarketing

Google Tag Manager má předpřipravený i remarketing pro Google Adwords. Zde využijeme proměnnou {{google_tag_params}}, kterou jsme si připravili v předchozím odstavci:

Google Tag Manager: Google Adwords

7. Nastavení proměnné transactionId

Pro měření konverzí v Google Adwords musíme nastavit proměnnou „transactionId“. Zase jako v případě nastavování proměnné „google_tag_params“ jednoduše vytvoříme novou proměnnou s tímto nastavením:

Google Tag Manager: transactionId

8. Nastavení proměnné transactionTotal

Stejně jako proměnnou transactionId, nastavím i celkovou sumu za transakci: transactionTotal:

Google Tag Manager: TransactionTotal

9. Nastavení děkovací stránky

Ukážeme si na tomto případu, jak lze omezit velice jednoduše vykonávání skriptu pouze na děkovací stránce (konverze). Nastavíme si tzv. trigger (spouštěč) pro všechny děkovací stránky, které mají v URL adrese: „/checkout/1234/complete“ (číslo se mění, podle objednávky) a využijeme trochu regulárních výrazů. V menu vlevo kliknete na „Triggers“ a přidáte nový:

Google Tag Manager: Trigger

…pokud ho použijete ve značce (tag), bude to podmínka pro spuštění daného skriptu.

10. Nastavení Google Adwords – Měření konverzí

V Google Adwords samozřejmě můžete měřit konverze a to se vyplatí 🙂 Nastavení je přednastaveno v GTM a využijeme proměnné „transactionId“ a „transactionTotal“ a triggeru (spouštěče): „Děkovací stránka

Google Tag Manager: Google Adwords Konverze

… výsledkem je, že se tento script spustí pouze na konverzní (děkovací) stránce a předá do Google Adwords hodnotu proměnných: ID transakce a celkovou sumu. Nikde jinde se nespouští.

11. Nastavení proměnné ProductID

Dynamický remarketing je úžasná věc. Můžete ho využít pro svůj eshop v systémech: Google Adowrds, Facebook Ads a i v Perfect Audience (která inteligentně slučuje Google Adwords a Facebook Ads dohromady). Proto potřebujeme ale předávat informaci o id produktu… tzn. potřebujeme si vytvořit novou proměnnou. Budeme id čerpat zase s předpřipravené datové vrstvy (dataLayers) od programátora a využijeme již připravenou proměnnou „google_tag_params„:

Google Tag Manager: ProductID

… je to samozřejmě jedna z možností, jak se dostat k id produktu.

12. Nastavení Perfect Audience

Budeme nastavovat v Google Tag Manageru nejen remarketingový pixel pro Perfect Audience, ale i pro dynamický remarketing. GTM nám předpřipravil nastavování, takže to je jednodušší (je zde v rámci jednoho nastavení jak remarketingový pixel, tak konverzní pixel). Využijeme předpřipravených proměnných:

Google Tag Manager: Perfect Audience

…samozřejmě musíte pro dynamický remarketing nastavit ještě XML feed přímo ve vašem účtu Perfect Audience.

13. Nastavení triggeru: Detail produktu

Pokud chcete spouštět některé scripty pouze na určitých stránkách, můžete si nastavit trigger (spouštěč) zase velice jednoduše. Tentokrát si to ukážeme na detailu produktu. Předpokládáme, že mají tyto stránky v URL něco společného např. „/detail/„:

Google Tag Manager: Detail produktu

14. Nastavení proměnné ProductName

Stejně, jako jsme si připravili proměnnou ProductId, si připravíme ProductName s datové vrstvy (dataLayers) od programátora:

Google Tag Manager: ProductName

15. Nastavení Facebook Ads – Dynamický remarketing

Ukážeme si jednu z možností nastavení dynamického remarketingu ve Facebooku. Všechny proměnné i trigger máme připravený, takže jdeme na to:

Google Tag Manager: Dynamický remarketing

… všimněte si, že lze použít proměnné přímo v kódu scriptu za použití {{nazev_promenne}}

Poznámka: Pro měření správnosti kódu a spouštěného scriptu od Facebooku, doporučuji rozšíření Google Chrome: Facebook Pixel Helper. Jednoduše zkontrolujete, které id produktu se posílá do Facebook Ads pro dynamický remarketing na stránce detailu produktu.

16. Nastavení Facebook Ads – Konverze

Co by to bylo za měření, bez konverzí. Nastavíme konverzní pixel od Facebooku a vpíšeme do něj proměnnou {{transactionTotal}} a spustíme tento script pouze na děkovací stránce:

Google Tag Manager: Facebook Ads

17.  Nastavení triggeru: Transakce Google Analytics

Poslední trigger, který v tomto článku nastavuji je pro měření transakcí v Google Analytics. Využíváme událost připravenou programátorem na vašich stránkách:

Google Tag Manager: Transakce pro Google Analytics

18. Nastavení konverzí pro Google Analytics

Bylo by dobré měřit konverze i v Google Analytics. Všechno jsme si připravili (včetně triggeru) a nastavení je předpřipravené:

Google Tag Manager: Transakce

19. Nastavení Google Analytics 4

Stejně jako staré Google Universal (UA), je potřeba nastavit i Google Analytics 4. Je to velice jednoduché. Stačí si najít kód pod Datovými streamy.

Klikněte ve Správci na Datový stream:

GA4 - Nastavení streamu

a následně klikněte zde:

GA4 - Nastavení pro GTM

Pak stačí zkopírovat ID měření:

GA4 - Značka pro Google Tag Manager

Vytvořit novou značku v Google Tag Manageru:

GTM - Nová značka

a v konfiguraci nastavte pro všechny stránky (Google Analytics: konfigurace GA4):

GA4 - Nastavení značky GA4

Poznámka: Další nastavení GA4 najdete ve článku: Google Analytics 4 – Velký průvodce nastavením.

Závěr

Až vše nastavíte a publikujete, tak to zkontrolujte a vyzkoušejte v reálném provozu. Hlavně doporučuji otestovat dynamický remarketing u Facebook Ads, Google Adwords (popř. Perfect Audience). Doufám, že vám tento návod pomohl 🙂

…a co vy? Využíváte Google Tag Manager na vašem eshopu?

30 komentářů u „Google Tag Manager: 19x nejpoužívanější nastavení“

  1. Pěkná ukázka, jak lze jedna data pomocí GTM variables použít na více místech – resp. více službách/kódech.
    Já navíc ještě používám kategorizaci produktů/stránek z dynamického remarketingu pro GA Content Groupping (Seskupení obsahu) – mj. ukazuji v http://miroslavpecka.cz/blog/5-duvodu-pro-google-tag-manager/.

    Jen poznámka k bodu 5 článku:
    Myslím, že tam mělo být
    Choose type: Javascript Variable
    (ještliže je nahoře v článku ukázka s
    var google_tag_params)

    p.s.: Na heatmapy doporučuji zkusit český MonkeyTracker (zvládá responsive) nebo HotJar

    Odpovědět
  2. Môžem sa opýtať, ako najlepšie pracovať s datalayerom na Prestashope? Nemáš niečo oskúšané?

    Ďakujem 🙂

    Odpovědět
    • Stačí nastavit stejně jako „16. Nastavení Facebook Ads – Konverze“ jen se do kódu vymění místo částky proměnná {{transactionTotal}}… Najdete ho Jiří i v tom nastavení konverzí Facebooku (16. bod).

      Odpovědět
  3. Na GTM je nejhorší, že za měsíc je vše jinak. U toho sklik konverzního kódu máte – Once per page?

    A děkovací stránku můžete ukázat jak nastavit?

    Podle mne mám vše správně, ale kód se nespustí.

    Odpovědět
    • Dobrý den Romane,
      jak to myslíte, že je vše jinak? GTM mi běží už několik měsíců naprosto v pořádku u všech projektů… Děkovací stránku nastavíte s jediným cílem: Nastavit další komunikační kanál: Facebook fanouškovství 🙂

      Odpovědět
      • Že se neustále mění aplikace. Chtěl bych nastavit konverze v analytics a bez šance. Konkrétní návod jsem našel pouze zde a ten je už zastaralý.

        Odpovědět
  4. Dobrý den, děkuji za článek. Chtěl bych se jen krátce optat, co by se vlastně mělo vkládat do proměnné „transactionTotal“, kterou ve spoustě kódů zmiňujete. Měla by tam být celková cena objednávky s DPH, bez DPH nebo dokonce bez DPH i dopravy? Většina inzertních systémů uvádí totiž ve statistikách náklady bez DPH. Takže do „transactionTotal“ by se (asi) měly dávat tržby bez DPH a dopravy?

    Odpovědět
  5. Dobrý den,
    rád bych jednu radu. V Heurece při měření konverzí mi neukazuje částku za objednávky, takže vidím jen náklady za prokliky a počet objednávek. Použil jsem kód z heureky – plný a také kód z H1.cz, ale pořád to mám bez částky za objednávky. V datalayeru všchny hodnoty jsou. Nemáte nějakou radu?

    Děkuji Martin

    Odpovědět
  6. Potřeboval bych poradit s implementací Ověřeno zákazníky od Heureky pomocí GTM. Našel jsem návor na její kód pro měření konverzí, ale nevím, jak do GTM vložit volání odeslání objednávky … Na https://sluzby.heureka.cz/napoveda/overeno-jak-aktivovat/ dávají odkaz na PHP script, který to zařídí, ale když nemám u poskytovatele eshop řešení přístup do PHP, ale jen do GTM a poskytovatel tvrdí, že to jde …

    Můžete prosím poradit, jak na to?

    Díky 🙂

    Odpovědět
  7. Zdravím,

    fajn článek.

    v GTM jsem nastavil vše. Analytics měří uživatele a konverze, ale ne a ne započítat tržbu. V čem je asi tak problém?

    Odpovědět
  8. Dobrý den,

    děkuji moc za super návody!!! Jen mi chybí jeden odkaz. V sekci „Co nastavuje programátor v kódu stránky:
    klasické předávání transakcí Google Analytics – návod ZDE“ – odkaz však nefunguje 🙁 A mně by se tolik hodil. Mohu poprosit o tento odkaz?

    Děkuji!

    Odpovědět
  9. Zdravím,

    poradíte s měřením objednávek do Zbozi.cz? Dohledal jsem jen kód na základní měření anebo PHP, které ale v GTM použít nelze.

    Díky!

    Odpovědět

Napsat komentář