{"id":15145,"date":"2020-02-05T16:50:29","date_gmt":"2020-02-05T14:50:29","guid":{"rendered":"https:\/\/www.dase-analytics.com\/blog\/?p=15145"},"modified":"2020-02-06T10:54:00","modified_gmt":"2020-02-06T08:54:00","slug":"testovanie-implementacie-cast-2","status":"publish","type":"post","link":"https:\/\/www.dase-analytics.com\/blog\/sk\/testovanie-implementacie-cast-2\/","title":{"rendered":"U\u013eah\u010dite si testovanie implement\u00e1cie – \u010das\u0165 2."},"content":{"rendered":"

V prvej \u010dasti<\/a> som v\u00e1m predstavila z\u00e1kladn\u00e9 roz\u0161\u00edrenia, ktor\u00e9 n\u00e1m v DASE pom\u00e1haj\u00fa efekt\u00edvnej\u0161ie pracova\u0165 s d\u00e1tami a skontrolova\u0165, \u010di s\u00fa merania pre Google Analytics<\/a> a Google Tag Manager<\/a> nastaven\u00e9 spr\u00e1vne.\u00a0\u00a0V tejto \u010dasti dopln\u00edm \u010fal\u0161ie 2 roz\u0161\u00edrenia, a z\u00e1rove\u0148 sa podrobnej\u0161ie zameriam na roz\u0161\u00edrenie dataslayer a Google Tag Assistant.<\/strong><\/p>\n

GTM\/GA Debug<\/span><\/h2>\n

Tento tool si viete nain\u0161talova\u0165 do Chromu <\/span>z tejto adresy<\/span><\/a>. Tak ako dataslayer, <\/span>sp\u00fa\u0161\u0165a sa priamo v konzole<\/b>:<\/span><\/p>\n

\"ga\/gtm<\/span><\/p>\n

A ak\u00e9 je jeho vyu\u017eitie? Naj\u010dastej\u0161ie ho pou\u017e\u00edvam na <\/span>debugovanie ecommercu<\/b>, preto\u017ee preh\u013eadne zobrazuje d\u00e1ta, ktor\u00e9 sa odosielaj\u00fa do Google Analytics.<\/span><\/p>\n

\"ga\/gtm<\/p>\n

Z\u00e1rove\u0148 je ve\u013emi n\u00e1pomocn\u00fd, pokia\u013e si nie ste ist\u00ed, ak\u00fd je ve\u013ek\u00fd <\/span>payload<\/b> dan\u00e9ho hitu. V pr\u00edpade, \u017ee <\/span>payload prekra\u010duje stanoven\u00fa hranicu<\/b> 8191 bytov, <\/span>cel\u00fd hit sa zahod\u00ed<\/b> a pr\u00eddete o d\u00e1ta.\u00a0<\/span><\/p>\n

Tento pr\u00edpad m\u00f4\u017ee nasta\u0165 vtedy, ke\u010f m\u00e1te implementovan\u00e9 zobrazenia produktov a do Analyticsu sa odosielaj\u00fa v\u0161etky zobrazenia, ktor\u00e9 sa na\u010d\u00edtaj\u00fa na str\u00e1nke (u\u017e\u00edvate\u013e ich ani nemusel re\u00e1lne vidie\u0165). Pokia\u013e je takto meran\u00fdch produktov ve\u013emi ve\u013ea, ve\u013ekos\u0165 hitu m\u00f4\u017ee presiahnu\u0165 povolen\u00fa hranicu.<\/span><\/p>\n

\"ga\/gtm<\/p>\n

Ak chcete vidie\u0165, <\/span>kedy sa jednotliv\u00e9 skripty sp\u00fa\u0161\u0165aj\u00fa<\/b> a kedy sa odosielaj\u00fa hity, sta\u010d\u00ed prejs\u0165 na podz\u00e1lo\u017eku <\/span>PROFILER beta<\/b>.\u00a0\u00a0<\/span><\/p>\n

\"ga\/gtm<\/p>\n

Wasps.inspector<\/span><\/h2>\n

Wasps (link na jeho stiahnutie n\u00e1jdete <\/span>TU<\/span><\/a>) pou\u017e\u00edvam hlavne pre <\/span>preh\u013eadn\u00e9 zobrazenie<\/b> toho, <\/span>ak\u00e9 skripty sa sp\u00fa\u0161\u0165aj\u00fa<\/b> na str\u00e1nke a ako sa <\/span>odosielaj\u00fa jednotliv\u00e9 d\u00e1ta<\/b> medzi nimi<\/b>, napr. pri spusten\u00ed analytics.js, ktor\u00fd zabezpe\u010duje odosielanie d\u00e1t do Google Analytics serverov. Vpravo vid\u00edte \u010fal\u0161ie inform\u00e1cie k ozna\u010den\u00fdm skriptom a tagom.\u00a0<\/span><\/p>\n

Tento n\u00e1stroj umo\u017e\u0148uje aj blokova\u0165 skripty, ktor\u00e9 si ne\u017eel\u00e1te, aby sa aktu\u00e1lne sp\u00fa\u0161\u0165ali.<\/span>\"wasp.inspector\"<\/p>\n

Google Tag Assistant<\/span><\/h2>\n

Tag Assistant som v kr\u00e1tkosti predstavila <\/span>v predch\u00e1dzaj\u00facom \u010dl\u00e1nku<\/span><\/a>. V tejto \u010dasti by som sa chcela bli\u017e\u0161ie zamera\u0165 na jednu z jeho \u010fal\u0161\u00edch funkci\u00ed – <\/span>Tag Assistant Recording<\/b>.<\/span><\/p>\n

Nahr\u00e1vanie je jednoduch\u00e9, sta\u010d\u00ed <\/span>klikn\u00fa\u0165 na Record<\/b> a n\u00e1sledne pokra\u010dova\u0165 v preklik\u00e1van\u00ed t\u00fdch bodov str\u00e1nky, ktor\u00e9 chceme vidie\u0165, ako sa meraj\u00fa.<\/span><\/p>\n

\"google<\/p>\n

Pre ukon\u010denie nahr\u00e1vania sta\u010d\u00ed jednoducho klikn\u00fa\u0165 na <\/span>Stop Recording<\/b> a n\u00e1sledne si m\u00f4\u017eete <\/span>zobrazi\u0165 cel\u00fd report<\/b>.<\/span><\/p>\n

\"google<\/p>\n

Vygenerovan\u00fd report m\u00e1 2 \u010dasti – Tag Assistant Report a Google Analytics Report.<\/span><\/p>\n

\"google<\/p>\n

Tag Assistant report<\/b> je len <\/span>roz\u0161\u00edren\u00edm<\/b> toho, \u010do vid\u00edte v <\/span>hlavnom paneli<\/b> Samozrejme, viete si d\u00e1ta pozrie\u0165 pod\u013ea jednotliv\u00fdch page loadov. Tak viete odhali\u0165 pr\u00edpadn\u00e9 probl\u00e9my v sp\u00fa\u0161\u0165an\u00ed sledovan\u00fdch toolov.<\/span><\/p>\n

V \u013eavej \u010dasti panela si m\u00f4\u017eete vybra\u0165 konkr\u00e9tne pixely, ktor\u00e9 chcete zobrazi\u0165. V\u010faka tomuto nastaveniu je report o dos\u0165 preh\u013eadnej\u0161\u00ed.<\/span><\/p>\n

Google Analytics report<\/b> pova\u017eujem osobne za pr\u00ednosnej\u0161\u00ed. Pou\u017e\u00edvam ho naj\u010dastej\u0161ie pri klientoch, ktor\u00ed maj\u00fa <\/span>implementovan\u00fd <\/b>(roz\u0161\u00edren\u00fd) elektronick\u00fd obchod<\/b><\/a>, ale nepou\u017e\u00edvaj\u00fa GTM<\/b>. Tento n\u00e1stroj mi ve\u013emi u\u013eah\u010duje diagnostiku d\u00e1t, ktor\u00e9 sa odosielaj\u00fa do GA.\u00a0<\/span><\/p>\n

D\u00e1ta v dataslayeri vyzeraj\u00fa napr. takto:<\/span>\"dataslayer<\/p>\n

Pokia\u013e pou\u017eijem Tag Assistant, d\u00e1ta s\u00fa preh\u013eadnej\u0161ie:<\/span><\/p>\n

\"google<\/p>\n

\"tag<\/p>\n

Ka\u017ed\u00fd hit, ktor\u00fd sa odosiela do\u00a0<\/span>GA si m\u00f4\u017eete pozrie\u0165 aj konkr\u00e9tnej\u0161ie:<\/span><\/p>\n

 <\/p>\n

\"google<\/p>\n

Tip:<\/strong> Vid\u00edte hit v Tag Assistante, ale v GA nie? M\u00f4\u017ee to by\u0165 sp\u00f4soben\u00e9 filtrom. Skontrolujete to jednoducho – Tag Assistent toti\u017eto uv\u00e1dza, pokia\u013e sa hit zahod\u00ed kv\u00f4li filtru. Z\u00e1rove\u0148 vid\u00edte, do ktor\u00e9ho view bol odoslan\u00fd a ako filtre menia d\u00e1ta.<\/span><\/i><\/p><\/blockquote>\n

\"google<\/p>\n

Aby ste videli konkr\u00e9tne d\u00e1ta, ktor\u00e9 sa odosielaj\u00fa do GA, je potrebn\u00e9, aby ste <\/span>recording spravili v tom prehliada\u010di<\/b>, v ktorom ste <\/span>prihl\u00e1sen\u00fd do dan\u00e9ho Google Analytics \u00fa\u010dtu<\/b>. V takom pr\u00edpade si viete vybra\u0165, ktor\u00fd Preh\u013ead (view) chcete pou\u017ei\u0165:<\/span><\/p>\n

\"tag<\/p>\n

\u010eal\u0161\u00edm bonusom tohto toolu je, \u017ee si viete dan\u00fd <\/span>report stiahnu\u0165 a ulo\u017ei\u0165<\/b>. T\u00fdm p\u00e1dom m\u00e1te z\u00e1lohu, ak by nastal nejak\u00fd probl\u00e9m oh\u013eadom valid\u00e1cie testovania.<\/span><\/p>\n

Dataslayer<\/span><\/h2>\n

Po posledn\u00fdch updatoch pribudlo v dataslayeri<\/a> nieko\u013eko zauj\u00edmav\u00fdch <\/span>nastaven\u00ed<\/b>:<\/span><\/p>\n

\"dataslayer<\/p>\n

Za n<\/strong><\/span>aju\u017eito\u010dnej\u0161ie<\/b> nastavenia pova\u017eujem mo\u017enos\u0165 <\/span>ignorovania ur\u010dit\u00fdch tagov<\/b>, pr\u00edpadne <\/span>ID-\u010diek<\/b>. \u010eal\u0161ou super mo\u017enos\u0165ou je <\/span>prida\u0165 in\u00fd n\u00e1zov dataLayera<\/b>, preto\u017ee pri niektor\u00fdch implement\u00e1ciach sa m\u00f4\u017ee sta\u0165, \u017ee developeri pou\u017eili vlastn\u00fd n\u00e1zov.<\/span><\/p>\n

\u010eal\u0161ie funkcie, ktor\u00e9 ur\u010dite ocen\u00edte, je <\/span>mo\u017enos\u0165 Importu\/Exportu<\/b>, pr\u00edpadne <\/span>funkcia vyh\u013ead\u00e1vania<\/b>.<\/span><\/p>\n

A na \u010do si <\/span>da\u0165 pozor<\/b>, ke\u010f pracujeme s dataslayerom a kontrolujeme datalayer?<\/span><\/p>\n

Pokia\u013e bolo na str\u00e1nku prid\u00e1van\u00e9 GTM, v dataslayeri pozer\u00e1m, \u010di sa eventy<\/a> spr\u00e1vaj\u00fa tak, ako sa maj\u00fa. D\u00f4le\u017eit\u00e9 je, <\/span>aby bola inicializ\u00e1cia dataLayera e\u0161te pred GTM eventmi<\/b>:<\/span><\/p>\n

\"dataslayer<\/p>\n

\u010ealej kontrolujem, \u010di sa <\/span>na\u010d\u00edtali eventy gtm.js, gtm.dom a gtm.load<\/b>. Pokia\u013e s\u00fa tieto eventy vidite\u013en\u00e9 v dataslayeri, je ve\u013ek\u00e1 pravdepodobnos\u0165, \u017ee sa <\/span>GTM kontajner spustil spr\u00e1vne<\/b>.<\/span><\/p>\n

N\u00e1sledne m\u00f4\u017eem prejs\u0165 na debugovanie eventov. Postupujem pod\u013ea implementa\u010dn\u00e9ho dokumentu, ktor\u00fd mal developer k dispoz\u00edcii a kontrolujem, \u010di sa v dataLayeri nach\u00e1dzaj\u00fa v\u0161etky inform\u00e1cie, ktor\u00e9 tam maj\u00fa by\u0165.<\/span><\/p>\n

Ide napr\u00edklad o eventPush, kde kontrolujem, \u010di s\u00fa Category, Action, Label a Value posielan\u00e9 spr\u00e1vne:<\/span><\/p>\n

\"dataslayer<\/p>\n

Pr\u00edpadne custom event:<\/span><\/p>\n

\"dataslayer<\/p>\n

V <\/span>druhej \u010dasti dataslayera<\/b> si m\u00f4\u017eem <\/span>skontrolova\u0165<\/b>, ako sa <\/span>odosielaj\u00fa hity do Google Analytics:<\/b><\/p>\n

\"dataslayer<\/p>\n

Po rozkliknut\u00ed + vid\u00edm cel\u00fd hit:<\/span><\/p>\n

\"dataslayer<\/p>\n

Pokia\u013e si chcete by\u0165 ist\u00ed, \u017ee <\/span>hit<\/a> sa spr\u00e1vne odoslal do Google Analytics<\/b>, odpor\u00fa\u010dam ma\u0165 pri testovan\u00ed <\/span>otvoren\u00fd preh\u013ead Re\u00e1lny \u010das<\/b> (Real Time report), kde budete vidie\u0165 dan\u00e9 hity. Pokia\u013e si chcete pozrie\u0165 d\u00e1ta v \u0161tandardn\u00fdch reportoch, odpor\u00fa\u010dam pou\u017ei\u0165 <\/span>UTM parametre<\/span><\/a> (napr. utm_source=test&utm_medium=test). <\/span>Odpor\u00fa\u010dame si v\u017edy hity skontrolova\u0165 v \u0161tandardnom reporte, nako\u013eko Real Time report m\u00f4\u017ee zobrazi\u0165 aj hity, ktor\u00e9 bud\u00fa nakoniec odfiltrovan\u00e9.<\/b><\/p>\n

Ve\u013emi ve\u013ek\u00fd pomocn\u00edk je dataslayer hlavne <\/span>pri kontrolovan\u00ed dataLayera pre elektronick\u00fd obchod<\/b>. Ke\u010f\u017ee b\u00fdva implement\u00e1cia elektronick\u00e9ho obchodu \u010dastokr\u00e1t ve\u013emi robustn\u00e1 a m\u00f4\u017ee sa v nej vyskytn\u00fa\u0165 viacero ch\u00fdb, je potrebn\u00e9, aby boli premenn\u00e9 a ich form\u00e1tovanie skontrolovan\u00e9.<\/span><\/p>\n

Hlavn\u00e9 body, ktor\u00e9 kontrolujem, s\u00fa:<\/span><\/p>\n