Jak implementovat Google Analytics a e-commerce s využitím Google Tag Manageru

Vydáno 12. prosince 2012 na blogu Google Tag Manager, Digitální analytika, CRO a UX

Google Tag Manager je systém, díky kterému již nebudete muset přidávat na váš web kódy a tagy různých služeb.

Jakmile implementujete kód Google Tag Manageru (GTM), budete ostatní tagy a kódy (např. kód Google Analytics, Google AdWords, kód pro remarketing, měřící kódy dalších služeb, i když nespadají pod Google) přidávat a upravovat přes webové rozhraní.

Nebudete tak musel pokaždé vyžadovat spolupráci webmastera, když budete chtít nasadit nebo upravit sledovací kód. Pomocí GTM lze samozřejmě implementovat i Google Analytics a měření elektronického obchodu.

Na základě našich zkušeností s nasazováním jsme pro vás připravili tento návod:

Google Tag Manager (GTM) byl spuštěn 1. října 2012. Problém v nasazení pro
e-shopy byl však v tom, že nebylo standardizováno, jak implementovat měření pro elektronické obchodování (e-commerce). Google ale začátkem
listopadu potichu zveřejnil referenční manuál pro zpracování transakcí v Google Analytics. Díky němu nemusíme vymýšlet vlastní Java Script kód pro
zpracování dat.

Nyní eshopům nic nebrání v používání GTM. V tomto článku si ukážeme, jak vše nastavit.

Návod se skládá ze dvou částí:

Nastavení samotného Google Tag Manageru – je potřeba přidat tag pro standardní měření Google Analytics a tag pro měření transakcí.
Pro správné nastavení e-commerce je nutné vytvořit datovou vrstvu s daty – její struktura je velice podobná standardnímu e-commerce Google Analytics kódu, což je logické – chceme získávat stejná data, pouze jiným způsobem.

Jen pro připomenutí – nezapomeňte si také zapnout sledování elektronického obchodu ve svém Google Analytics profilu, pokud to ještě
nemáte, a to takto (v angličtině):

1. Nastavení GTM

Je nezbytné mít vytvořený účet v Google Tag Manageru (pro přihlášení můžete použít svůj stávající Google
účet). Základním pravidlem je mít jeden kontejner (množina všech tagů, pravidel a maker) pro každou doménu. Dobré je také pojmenovat kontejner názvem domény. Například pro naši digitální agenturu bude název kontejneru www.robertnemec.com.

Potřebujete-li spravovat různé domény a nastavit přístupy pro vybrané weby pouze určitým lidem, použijte samostatné účty pro příslušené skupiny webů. To se
týká především agentur, které spravují měřící kód svým klientům a potřebují nastavit přístup vždy jen k webům daného klienta.

Při vytváření účtu můžete také zadat vaši doménu. Budete poté dostávat konkrétnější nápovědu během nastavování tagů, pravidel apod.

Vytvoření nového účtu v Google Tag Manageru

1.1 Nasazení GTM kódu na web

Máme vytvořený účet s prvním kontejnerem, který je pojmenovaný názvem domény. Ihned po vytvoření účtu se vám zobrazí kód GTM, který je nutné přidat na všechny stránky webu, ideálně hned za značku <body>.

1.2 Nastavení tagu pro Google Analytics

Díky GTM kódu nyní můžeme přidat měřící Google Analytics kód již bez zásahu do kódu stránek.

V kontejneru vytvoříme nový tag – pojmenujeme ho Google Analytics. Typ tagu je Google Analytics a track type je Page View. Do
kolonky Web Property ID zadejte vaše Google Analytics UA číslo. To naleznete v nastavení Google Analytics.

UA číslo účtu Google Analytics

Tag pro měření Google Analytics v Tag Manageru

Další důležitý krok je nastavit pravidlo, které, když bude platit, spustí vykonání příslušného tagu. V GTM jsou tato pravidla nazvaná jako Firing rules.

Dejte si pozor na to, že každý tag musí mít alespoň jedno takové pravidlo, jinak nebude fungovat. Pravidlo přidáte kliknutím na tlačítko +Add Rule to Fire Tag.

Kód Google Analytics potřebujeme zobrazovat na všech stránkách webu. Pro tento případ má GTM již předpřipravené pravidlo, které se nazývá All pages.

Takto nastavený tag můžeme uložit.

1.3 Nastavení tagu pro e-commerce

V účtu Google Tag Manageru nyní přidáme nový tag – pojmenujme ho například E-commerce. Typ tagu je Google Analytics a track type je Transaction.

Tag pro e-commerce Google Analytics v Google Tag Manageru

Nyní musíme přidat Firing Rule. Jaký tvar bude pravidlo přesně mít, závisí na vaší děkovací stránce – tj. na stránce, která se
zobrazuje po úspěšně dokončeném nákupu (konverze). V následující ukázce je děkovací stránka vždy stejná/neměnná (https://robertnemec.com/dekujeme-za-nakup). Můžeme
tedy použít pravidlo, že se tag pro e-commerce vykoná, když se URL rovná (equals) této stránce.

Takto vytvořené pravidlo i celý tag uložíme.

Můžete samozřejmě i použít regulární výrazy.

1.4 Publikování tagů

Poslední krok ve správném nastavení je publikace tagů. Bez publikování totiž tagy nebudou fungovat.

Přejděte do sekce Versions na položku Overview. Vpravo nahoře se nachází tlačítko Create Version.

Nyní máme vytvořenou novou verzi. Zbývá ji ještě publikovat. Provedeme to kliknutím na tlačítko Publish na přehledu nové verze.

Tím je nastavení Google Tag Manageru pro e-commerce měření hotovo. Nyní ještě potřebujeme nastavit datovou vrstvu.

2. Nastavení datové vrstvy

Datová vrstva je způsob, jak dynamicky předávat do GTM data a události. V kontextu e-commerce si datovou vrstvu můžeme představit jako
množinu všech dat (číslo transakce, celkovou hodnotu objednávky, poštovné, DPH, položky transakce – ID, jméno produktu, SKU, cenu, počet kusů, kategorie
apod.), která chceme poslat do GTM, který je zpracuje a pošle do Google Analytics.

Důležité je vědět, že datová vrstva musí být inicializována před samotným GTM – tj. v kódu se nachází nejdříve datová vrstva, a až poté
kód Google Tag Manageru.

Ve výchozím formátu je nutné proměnnou datové vrstvy pojmenovat jako dataLayer. Toto jméno lze jednoduše změnit v kódu GTM, kdy
zaměníte dataLayer za vámi požadovaný název. Tuto změnu provádějte pouze, pokud opravdu víte, co děláte, a dobře ji otestujte. Jinak se může stát,
že měření nebude fungovat.

Obsah proměnné dataLayer je poté ve formátu JSON se všemi svými standardními strukturami – objekt,
pole, hodnota.

Jména proměnných uvnitř JSON jsou přesně definována v nápovědě pro developery.

Výsledný kód datové vrstvy by vypadal následovně:

<script>
dataLayer = [{
    'transactionId': '1',                     // povinné, id transakce
    'transactionTotal':  '70430.00',          // povinné, celková cena transakce
    'transactionTax': 11738.33,               // daň
    'transactionShipping': '5',               // poštovné
    'transactionProducts': [{                 // pole všech položek z košíku
        'id': '1234',                             // povinné, id položky
        'name': 'Tričko se supermanem',           // jméno položky
        'sku': 'DD44',                            // povinné, SKU
        'category': 'Trička s krátkým rukávek',   // kategorie
        'price': '250.00',                        // povinné, cena
        'quantity': '1'                           // povinné, počet kusů
        },
        {                                         // další položka/objekt
        'id': '12345',                            // povinné, id položky
        'name': 'MacBook Air 13',                 // jméno položky
        'sku': 'APP13',                           // povinné, SKU
        'category': 'Apple Notebooky',            // kategorie
        'price': '35090.00',                      // povinné, cena
        'quantity': '2'                           // povinné, počet kusů
        }
    ]
}];
</script>

V příkladu uvedeném výše si zákazník koupil Tričko se Supermanem a dva MacBooky Air 13. Pokud by byl v rámci transakce zakoupen ještě další produkt, v kódu by přibyl další objekt (část kódu ohraničená složenými závorkami).

Pole transactionProducts tedy obsahuje tolik objektů, kolik bylo zakoupeno produktů v dané transakci. Jde o ekvivalent funkce
_addItem() u klasického Google Analytics e-commerce kódu.

Máte nastavené měření podle návodu výše a přesto se vám data nesbírají?

Ověřte, zda se na děkovací stránce nachází kód Google Tag Manageru.
Zkontrolujte, zda je na děkovací stránce správně nastavena datová vrstva včetně validních dat.
Přesvědčte se, že máte správně nastaveno pravidlo pro spouštění e-commerce tagu.
Prozkoumejte, jestli máte opravdu publikovanou poslední verzi tagu.
Pro testování můžete také použít funkci Preview.

Náhled a debuggování v Google Tag Manageru

Pokud máte s nasazením problém, případně pokud potřebujete zodpovědět konkrétní otázku, napište nám do komentářů pod článkem.

Více o Tag Manageru čtěte v Co je Google Tag manager.

Martin Šimko

Martin se věnuje SEO a digitální analytice. Věří, že být dohledatelný na internetu je pro firmy zásadní. Pracoval pro klienty jako je Saxo Bank, London Theatre Direct, Česká Mincovna nebo Dovolená.cz. Přednášel na opakovaně na SEO restartu, Digisemestru, případovou studii na Marketing Festivalu a dalších akcí. Vede SEO workshop pro veřejnost. Vaří a pije pivo.

LinkedIn | @MartinSimko

Strategická reklamní agentura

Jak implementovat Google Analytics a e-commerce s využitím Google Tag Manageru