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

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

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:

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

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?

14 Comments on “Google Tag Manager: 18x nejpoužívanější nastavení

Miroslav Pecka
17.1.2016 at 22:22

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
Daniel Nytra
18.1.2016 at 15:57

Díky Miroslave za ty nadstavby pro heatmapy 🙂

..a na článek mrknu taky…

Tomáš S.
9.3.2016 at 23:44

Hezký článek.

Ještě bych doplnil Heuréku (odeslání seznamu zboží v konverzním JS) a Zboží.cz :-).

Odpovědět
Daniel Nytra
29.3.2016 at 22:55

Dobrý den Tomáši, je to tak… díky!

Milan
2.6.2016 at 12:27

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

Ďakujem 🙂

Odpovědět
Daniel Nytra
16.6.2016 at 17:55

To bohužel nemám, ale moduly na to určitě jsou.. někde jsem viděl článek popisující propojení na Google Tag Manager…

Jiří Lesňák
16.6.2016 at 13:56

Skvělý přehled. Chybí mi tu už jen nastavení konverzního kódu pro Sklik, našel jsem jen nastavení pro RTG Skliku.

Odpovědět
Daniel Nytra
16.6.2016 at 17:59

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).

roman matěna
18.7.2016 at 10:52

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
Daniel Nytra
19.7.2016 at 15:54

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í 🙂

Zdenek Kadlec
30.8.2016 at 19:18

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
Daniel Nytra
30.8.2016 at 19:29

Dobrý den Zdeňku,
přesně tak: Tržby bez DPH a bez dopravy a popřípadě balného jsou super 🙂

Tomáš Josef
25.3.2018 at 14:05

Dobrý den,
super článek, díky. Nefunguje mi Sklik, mohl byste mi prosím poradit, co mám dosadit do proměnné „v“?
…&color=ffffff&v=“>

Odpovědět
Daniel Nytra
28.3.2018 at 20:31

Jde o value.. tzn. hodnota transakce.. tzn. číslo bez měny.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

This site uses Akismet to reduce spam. Learn how your comment data is processed.