Ako prepojiť WooCommerce s Google Analytics (Enhanced E-commerce)

0

Cieľom tohto návodu je dosiahnuť, aby boli objednávky z WooCommerce eshopu viditeľné v službe Google Analytics.

Prejdeme si tieto časti:

  1. Zaregistrovanie stránky v službe Google Analytics (GA)
  2. Nastavenie pluginu Google Tag Manager for WordPress
  3. Zaregistrovanie a nastavenie služby Google Tag Manager (GTM)
  4. Záver a použitá literatúra

1. Zaregistrovanie stránky v Google Analytics (GA)

Ak už ste v GA zaregistrovaný, tak vám postačí pripraviť si svoj unikátny kľúč (príklad: UA-12312312-1). Ak by ste ho nevedeli nájsť v administrácii, tak väčšinou býva uverejnený aj v zdrojovom kóde stránky (pravý klik, Zobraziť zdrojový kód a hľadať text začínajúci UA-).

Ak zaregistrovaný nie ste, tak odporúčam registráciu spojiť rovno s inštaláciou pluginu Google Site Kit. Je to výborný plugin od Google, ktorý vám prehľadne zobrazí vo vašom WordPresse tie najpodstatnejšie digitálne štatistiky. Zároveň vám rovno vloží aj GA kód na web. Váš GA identifikátor následne nájdete po prepojení v nastaveniach pluginu (UA-….)

Ukážka štatistík Google Sit Kit pluginu

Ešte predtým ako prejdeme na druhý krok, je potrebné povoliť Enhanced E-commerce funkcionalitu v Google Analytics.

V ľavom menu vyberieme záložku „Admin“ a v tretej časti „View“ nastavení vyberieme položku „E-commerce Settings“.

Tu je potrebné povoliť samotný E-commerce a aj časť Reporting. Malo by to vyzerať takto:

Nastavenie Enhanced E-commerce

Na záver nezabudnite zmeny uložiť.

2. Nastavenie pluginu Google Tag Manager for WordPress (GTM4WP)

Aby sme dokázali komunikovať s ostatnými službami, musíme urobiť naše dáta dostupné a poskytnúť ich v správnom formáte. Túto úlohu rieši výborne dátový objekt od Google nazvaný Google Data Layer. Je to javascript objekt, ktorý pri každom načítaní stránky obsahuje relevantné informácie o práve zobrazenom obsahu. Napríklad, aký produkt si práve pozerám, čo mám v košíku, aký bol obsah objednávky a podobne.

Ukážka objektu Data Layer

Našťastie sa detailami ako tento objekt vytvoriť a napĺňať nemusíme zaoberať. A to vďaka úžasnému pluginu: Google Tag Manager for WordPress.

Pamätníci, si ho ešte môžu pamätať pod názvom „Duracell Tomi GTM“

Po nainštalovaní, plugin nájdeme vo WP administrácii v časti „Nastavenia -> Google Tag Manager“.

Hneď na prvej obrazovke sa nás plugin pýta na naše GTM ID (to zatiaľ nemáme) a spôsob ako vložiť GTM na našu stránku.

Tu sa mi osvedčila možnosť „Codeless injection“. Vyskúšajte uvidíte.

Pre zapisovanie objednávkových dát do data layer objektu, je potrebné nastaviť integráciu na WooCommerce. Urobíme tak v časti „Integration -> WooCommerce“.

Tu odporúčam vybrať tieto nastavenia:

  • Track enhanced e-commerce
  • Order data in data layer
  • Use SKU instead of ID

Tak a toto je celé nastavenie pluginu. Samozrejme, je tam toho ešte ďaleko viac, ale pre účel tohto návodu nám bude postačovať toto.

3. Zaregistrovanie a nastavenie služby Google Tag Manager (GTM)

Google Tag Manager je nástroj, ktorý umožňuje jednoduchú správu kódov tretích služieb na web stránke. V našom prípade sa jedná o kód služby Google Analytics, môže to byť však pokojne aj Facebook, Seznam, Exponea, čokoľvek. Bez GTM, by sme museli kód týchto služieb vkladať ručne na web, čo by mohlo byť komplikované a časom neprehľadné.

Po prihlásení sa do GTM, pridáme nový účet. Po jeho vytvorení, nám GTM zobrazí kód, ktorý je potrebný pridať na web. Stačí nám však iba GTM identifikátor, ktorý v kóde ľahko nájdete.

Tento kód následne vložíme do pluginu GTM4WP (WP Administrácia -> Nastavenia -> Google Tag Manager).

3.1 Vytvorenie Google Analytics značky

V prípade, že kód GA na svojej stránke ešte nemáte, pridáme ho cez GTM. Ak ale máte napr. nainštalovaný plugin Google Site Kit, tento krok môžete preskočiť.

V menu vyberieme „Značky“ a stlačíme „Vytvoriť nová„.

Typ značky zvolíme: „Google Analytics: Universal Analytics

Typ sledovania: „Zobrazenie stránky“ – Chceme aby sa GA aktivovalo vždy pri zobrazení stránky.

V časti „Nastavenia služby Google Analytics“ vytvoríme GA premennú, ktorá bude obsahovať GA identifikátor. Výhoda premennej je, že budeme mať definovaný GA identifikátor iba raz a nie pre každú značku zvlášť.

Po dokončení by to malo vyzerať asi takto.

Následne pridáme ešte „Spúšťač“ (Trigger) a vyberieme „All pages“, keďže chceme aby sa GA spustilo na každej stránke.

Spolu to vyzerá takto:

Stlačíme uložiť.

Týmto spôsobom sme pridali GA kód na náš web a v službe Google Analytics môžete sledovať návštevnosť stránky.

3.2 Registrovanie eventu novej objednávky

Konečne sa dostávame k nášmu cieľu a to poslať objednávky do Google Analytics. Predtým však musíme vyriešiť ešte jeden problém – kedy posielať informácie do GA o novej objednávke. Odpoveď je jasná, vtedy keď zákazník vytvorí objednávku. Toto však treba GTM naučiť, aby tento event (spúšťač) zaznamenal.

Prejdeme teda v menu GTM na položku „Spúšťače“ a stlačíme „Nový“.

Vyberieme položku „Vlastná udalosť“ a názov udalosti zvolíme „gtm4wp.orderCompletedEEC„. Ak sa pýtate čo tejto názov znamená, tak to je ďalšia vec, ktorú plugin GTM4WP robí za nás. Okrem naplnenia data layer objektu, totiž nastaví aj niekoľko eventov, ktoré sa spúšťajú napr. pri vložení do košíka, zobrazení produktu, či odoslaní objednávky.

A teda keď zákazník dokončí objednávku, GTM zaregistruje event „gtm4wp.orderCompletedEEC“.

Po dokončení nastavenia to vyzerá takto:

Super a je pred nami posledná úloha v GTM a to pridanie značky, ktorá bude reagovať na tento pridaný event.

3.3 Vytvorenie značky pre event Nová objednávka

Opäť prejdeme na značky, a stlačíme „Nová“.

Typ značky zvolíme: „Google Analytics: Universal Analytics„.

Typ sledovania: „Udalosť

Kategória: „Enhanced e-commerce“ – je to na vás, toto je iba názov označenia, ktoré uvidíte pre túto udalosť v GA.

Akcia: Pridáme cez „+“ položku „Event„.

Štítok: Pridáme cez „+“ položku „Page Path„.

Prístup k udalostiam bez interakcie: „Pravda„.

Nastavenia služby Google Analytics: Vyberieme cez „+“ našu GA premennú. Kto ju ešte nemá, môže ju jednoducho vytvoriť (Pozri druhú časť kroku 3.1).

Povoliť prepísanie nastavení v tejto značky: „Áno

Následne prejdeme na Ďalšie nastavenia, kde v časti „E-obchod -> Povoliť funkcie rozšíreného elektronického obchodu“ zvolíme hodnotu „Pravda“ a označíme „Použíť dátovú vrstvu„.

Výsledok:

Na záver nastavíme ako spúšťač nami vytvorený event z kroku 3.2 „Nová objednávka“.

Stlačíme „Odoslať“ aby sa všetky tieto zmeny uložili a boli aktívne.

3.4 Otestovanie riešenia

GTM ponúka možnosť debug módu, kde si vieme overiť, aké značky sa spúšťajú na našej stránke.

Stlačíme „Ukážka“ a vložíme adresu našej stránky.

Následne budeme informovaný o značkách, ktoré sú aktívne, o dátach v objekte data layer ale aj o spustených eventoch.

Skúsme sa teda v eshope preklikať až k dokončeniu objednávky a presvedčme sa, či tento event GTM naozaj zaznamená.

GTM ukážka po odoslaní objednávky.

Super, GTM novú objednávku zaznamenal. Pozrime sa, či sa poslali aj nejaké dáta.

GTM ukážka pri prekliku na príslušný event.

Super, data layer objekt obsahuje dáta z objednávky, takže by všetko malo fungovať. Uzavrime testovanie kontrolou Google Analytics.

Google Analytics zobrazuje informácie o aktuálne prijatej objednávke.

Výborne, je to tam. Niekedy to GA chvíľku trvá, kým zobrazí aktuálne dáta. V každom prípade sa presvedčte, že máte označený správny časový interval.

Štandardne GA nezobrazuje dáta z dnešného dátumu.

4. Záver

Google Analytics v spojení s Google Tag Manager ponúka nekonečné možnosti. Tento návod chcel ukázať iba jednu z nich a to posielanie objednávok do GA.

Snažil som sa ho spísať čo najstručnejšie, no zároveň tak, aby aj nováčik pochopil o čo tu ide. Je ale možné, že som niektoré veci omylom vynechal. Preto ak vám tento návod nezafungoval, budem rád ak ma na to upozorníte v komentári.

Rovnako budem rád, ak mi do komentáru napíšete aj nejaké vaše tipy a triky.

4.1 Použitá literatúra 🙂

0

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *