{"id":1021,"date":"2021-12-06T12:02:30","date_gmt":"2021-12-06T11:02:30","guid":{"rendered":"https:\/\/www.6clickz.com\/?p=1021"},"modified":"2023-07-20T12:58:01","modified_gmt":"2023-07-20T11:58:01","slug":"google-analytics-4-enhanced-ecommerce-pres-gtm","status":"publish","type":"post","link":"https:\/\/www.6clickz.com\/cs\/google-analytics-4-enhanced-ecommerce-pres-gtm\/","title":{"rendered":"Google Analytics 4 enhanced e-commerce – rychl\u00e9 nasazen\u00ed p\u0159es GTM"},"content":{"rendered":"

Tento n\u00e1vod pro nasazen\u00ed Google Analytics 4 vznikl pro Shoptet<\/a>. M\u016f\u017eeme jej v\u0161ak pou\u017e\u00edt i na jin\u00e1 e-shopov\u00e1 \u0159e\u0161en\u00ed mimo Shoptet s drobn\u00fdmi \u00fapravami.<\/strong><\/em><\/p>\n

V p\u0159edchoz\u00edm n\u00e1vod\u011b<\/a> jsme si nastavili konfiguraci Google Analytics 4 (GA4) pro e-shop (Shoptet) p\u0159es Google Tag Manager (GTM). Pro spr\u00e1vn\u00e9 m\u011b\u0159en\u00ed n\u00e1kupn\u00edho procesu a konverz\u00ed v\u0161ak budeme pot\u0159ebovat nasadit dal\u0161\u00ed ud\u00e1losti (eventy), p\u0159edev\u0161\u00edm dokon\u010den\u00ed n\u00e1kupu \u2013 tzv. enhanced e-commerce (EEC)<\/p>\n

V\u0161echny tyto eventy se v GTM nasazuj\u00ed jako GA4 Event tagy. Jako eventy m\u016f\u017eeme m\u011b\u0159it nap\u0159. zhl\u00e9dnut\u00ed produktu, p\u0159id\u00e1n\u00ed do ko\u0161\u00edku, odebr\u00e1n\u00ed z ko\u0161\u00edku, jednotliv\u00e9 kroky v ko\u0161\u00edku, dokon\u010den\u00ed objedn\u00e1vky, p\u0159\u00edpadn\u011b vratky a storna. My jsme si vybrali pro uk\u00e1zku n\u011bkolik u\u017eite\u010dn\u00fdch tag\u016f k nasazen\u00ed. Nen\u00ed to v\u0161echno, ov\u0161em z\u00e1kladn\u011b v\u00e1m to bude sta\u010dit.<\/p>\n

Co pot\u0159ebujeme k nasazen\u00ed enhanced e-commerce pro Google Analytics 4?<\/h3>\n

K nasazen\u00ed t\u011bchto event\u016f pot\u0159ebujeme m\u00edt nastaven\u00e9 jednotliv\u00e9 prom\u011bnn\u00e9 datalayeru, kter\u00e9 popisuje Google dokumentace<\/a>. Pro srozumiteln\u011bj\u0161\u00ed popis ne\u017e pod\u00e1v\u00e1 Google dokumentace doporu\u010dujeme\u00a0\u010dl\u00e1nek od Sima Ahavu<\/a>. P\u0159i hled\u00e1n\u00ed t\u011bchto prom\u011bnn\u00fdch v datalayeru jsme v\u0161ak narazili na probl\u00e9m. Datalayer Shoptetu (a v\u011bt\u0161iny CMS) je vytvo\u0159en pro klasick\u00fd Google Analytics (Universal Analytics). Nasazen\u00ed event\u016f v Google Analytics 4 v\u0161ak pot\u0159ebuje nov\u00fd datalayer p\u0159izp\u016fsoben\u00fd pro GA4. Tento datalayer Shoptet zat\u00edm nem\u00e1, proto si jej mus\u00edme vytvo\u0159it. Nen\u00ed to v\u0161ak tak slo\u017eit\u00e9, jak to zn\u00ed.<\/p>\n

Pozn.: pokud se chcete dozv\u011bd\u011bt v\u00edce o tom, co je datalayer a jak z n\u011bj \u010d\u00edst, tak se pod\u00edvejte na videon\u00e1vod na konci tohoto \u010dl\u00e1nku<\/em><\/p>\n

V cheat sheetu jsem si p\u0159ipravil povinn\u00e9 prom\u011bnn\u00e9 podle Google dokumentace pro nasazen\u00ed jednotliv\u00fdch event\u016f. Jedin\u00e9 co pot\u0159ebujeme ud\u011blat je \u201ep\u0159elo\u017eit\u201c n\u00e1zvy t\u011bchto prom\u011bnn\u00fdch z jazyka klasick\u00e9ho Google Analytics na jazyk GA4. Poj\u010fme si to tedy zkusit na event view_item (prohl\u00e9dnut\u00ed produktu).<\/p>\n

Identifikov\u00e1n\u00ed prom\u011bnn\u00fdch a nastaven\u00ed prvn\u00edho eventu<\/h3>\n

V rozhran\u00ed GTM spust\u00edme Preview mode a na str\u00e1nce si otev\u0159eme n\u011bjak\u00fd produkt. Podle cheat sheetu v\u00edme, \u017ee pro event view_item<\/em> m\u00e1me jen jednu povinnou prom\u011bnnou, kterou je items<\/em>. Items je produkt nebo seznam jednotliv\u00fdch produkt\u016f (nap\u0159. v ko\u0161\u00edku) s daty k t\u011bmto produkt\u016fm, jako nap\u0159\u00edklad ID produktu, n\u00e1zev produktu, kategorie nebo cena. Otev\u0159eme si tedy datalayer v Preview mode a hled\u00e1me n\u011bco podobn\u00e9ho. Hned vid\u00edme, \u017ee 7. \u0159\u00e1dek s n\u00e1zvem Product obsahuje tyto \u00fadaje. Pravd\u011bpodobn\u011b to bude to, co pot\u0159ebujeme, ale otestujeme to.<\/p>\n

Vr\u00e1t\u00edme se do GTM a v \u010d\u00e1sti Variables vytvo\u0159\u00edme novou prom\u011bnnou jako DataLayer variable. Nazveme ji tak, abychom ji um\u011bli odli\u0161it a zap\u00ed\u0161eme podle pravidel datalyeru, tedy shora dol\u016f: shoptet.product.<\/em> Verzi datalayer ponech\u00e1me tak a prom\u011bnnou ulo\u017e\u00edme. Nyn\u00ed si vytvo\u0159\u00edme GA4 event tag, vybereme si svoj\u00ed konfiguraci, zad\u00e1me n\u00e1zev eventu. Je t\u0159eba, abychom p\u0159i naz\u00fdv\u00e1n\u00ed eventu striktn\u011b dodr\u017eeli pravidla dokumentace Google. \u010cili mus\u00edme tento event nazvat p\u0159esn\u011b tak, jak p\u00ed\u0161e Google: view_item<\/em>. To ov\u0161em nesta\u010d\u00ed. Mus\u00edme tak\u00e9 p\u0159idat povinn\u00e9 parametry. Z cheat sheetu u\u017e v\u00edme, \u017ee u tohoto eventu je povinen pouze jeden parametr: items<\/em>. P\u0159id\u00e1me nov\u00fd \u0159\u00e1dek a nazveme parametr. Zde plat\u00ed tak\u00e9 striktn\u00ed dodr\u017eov\u00e1n\u00ed pravidel Google dokumentace. Jako hodnotu tohoto parametru si zvol\u00edme prom\u011bnnou, kterou jsme p\u0159ed chv\u00edl\u00ed vytvo\u0159ili. Jako trigger tohoto tagu si zvol\u00edme Product detail, kter\u00fd jsme si ji\u017e d\u0159\u00edve nastavili tak\u00e9 prost\u0159ednictv\u00edm datalayeru.<\/p>\n

M\u00e1me-li tento tag hotov\u00fd, tak si m\u016f\u017eeme zkontrolovat jeho funk\u010dnost p\u0159es Preview mode. Tak\u00e9 si to m\u016f\u017eeme zkontrolovat i p\u0159es rozhran\u00ed GA4.<\/p>\n

Nastaven\u00ed dal\u0161\u00edch event\u016f<\/h3>\n

Pokud v\u0161e funguje, tak m\u016f\u017eeme p\u0159ej\u00edt na nastaven\u00ed dal\u0161\u00edch tag\u016f podobn\u011b jako view_item. Prom\u011bnn\u00e9, kter\u00e9 budeme pot\u0159ebovat.<\/p>\n

    \n
  • add_to_cart – items<\/span><\/li>\n
  • begin_checkout – items<\/span><\/li>\n
  • add_shipping_info – items,shipping_tier (nepovinn\u00e9)<\/span><\/li>\n
  • add_payment_info – items, payment_tier (nepovinn\u00e9)<\/span><\/li>\n
  • purchase – transaction_id, value, currency, tax, shipping, items, coupon<\/span><\/li>\n<\/ul>\n

     <\/p>\n