{"id":18749,"date":"2022-08-10T13:57:45","date_gmt":"2022-08-10T11:57:45","guid":{"rendered":"https:\/\/www.dase-analytics.com\/blog\/?p=18749\/"},"modified":"2022-08-10T13:58:25","modified_gmt":"2022-08-10T11:58:25","slug":"data-atributy-v-google-tag-manageri","status":"publish","type":"post","link":"https:\/\/www.dase-analytics.com\/blog\/sk\/data-atributy-v-google-tag-manageri\/","title":{"rendered":"Data Atrib\u00faty a ich vyu\u017eitie pri meraniach cez Google Tag Manager"},"content":{"rendered":"

Ak by si mohli analytici vybra\u0165, v\u00e4\u010d\u0161ina by pravdepodobne pri meraniach najrad\u0161ej vyu\u017e\u00edvala inform\u00e1cie z datalayera.<\/strong><\/p>\n

Met\u00f3da datalayer push<\/strong> je asi najide\u00e1lnej\u0161\u00edm a najodolnej\u0161\u00edm rie\u0161en\u00edm z h\u013eadiska pr\u00edpadn\u00fdch bud\u00facich zmien na webe. S\u00fa v\u0161ak pr\u00edpady, kedy toto rie\u0161enie nie mo\u017en\u00e9 pou\u017ei\u0165, pr\u00edpadne nie je \u00faplne efekt\u00edvne.<\/p>\n

V nasleduj\u00facich riadkoch si vysvetl\u00edme, \u010do s\u00fa data atrib\u00faty, ak\u00e9 s\u00fa v\u00fdhody ich pou\u017eitia a na \u010do a ako ich vieme pou\u017ei\u0165.<\/p>\n

 <\/p>\n

Pre\u010do Data Atrib\u00faty?<\/h1>\n

 <\/p>\n

Data atrib\u00faty s\u00fa s\u00fa\u010das\u0165ou jazyka HTML 5<\/strong> a umo\u017e\u0148uj\u00fa n\u00e1m prid\u00e1va\u0165 \u010fal\u0161ie inform\u00e1cie do HTML k\u00f3du.<\/p>\n

HTML 5<\/strong> je jazyk pou\u017e\u00edvan\u00fd na \u0161trukt\u00farovanie a prezent\u00e1ciu obsahu na World Wide Web. Je to piata a posledn\u00e1 hlavn\u00e1 verzia HTML.<\/p>\n

V\u00e4\u010d\u0161ina analytikov u\u017e pradepodobne pou\u017eila v Google Tag Manageri inform\u00e1cie, ktor\u00e9 tento k\u00f3d obsahuje, \u010di u\u017e pri r\u00f4znych premenn\u00fdch, alebo \u0161pecifik\u00e1ci\u00e1ch triggerov cez elementy, classy, ID\u010dk\u00e1 a podobne.<\/p>\n

Tieto rie\u0161enia s\u00fa r\u00fdchle a nen\u00e1ro\u010dn\u00e9 na implement\u00e1ciu, no z dlhodob\u00e9ho h\u013eadiska b\u00fdvaj\u00fa \u010dasto nespo\u013eahliv\u00e9 a neudr\u017eate\u013en\u00e9.<\/strong><\/p>\n

Ke\u010f\u017ee skoro ka\u017ed\u00fd web sa \u010dasom nejak\u00fdm sp\u00f4sobom vyv\u00edja, m\u00f4\u017eu sa tieto elementy, pr\u00edpadne spom\u00ednan\u00e9 vlastnosti \u010dasom meni\u0165, pr\u00edpadne \u00faplne zanikn\u00fa\u0165. Nie je to ni\u010d neobvykl\u00e9.<\/p>\n

Pre na\u0161e merania, ktor\u00e9 s\u00fa naviazan\u00e9 na tieto elementy, v\u0161ak tak\u00e9to updaty znamenaj\u00fa dos\u0165 ve\u013ek\u00fd probl\u00e9m.<\/p>\n

Data atrib\u00faty na rozdiel od spom\u00ednan\u00fdch elementov a ich atrib\u00fatov nemaj\u00fa \u017eiadnu in\u00fa funkciu ako to, \u017ee s\u00fa nosite\u013eom nejakej hodnoty.<\/strong><\/p>\n

V\u00e1\u0161 web developer ich neprehliadne a nem\u00e1 ich z h\u013eadiska \u0161trukt\u00fary, alebo vzh\u013eadu webu pre\u010do upravova\u0165. To znamen\u00e1, \u017ee ich pri ak\u00fdchko\u013evek updateoch m\u00f4\u017ee ponecha\u0165 nezmenen\u00e9.<\/p>\n

Ich implement\u00e1cia je pre web developera menej n\u00e1ro\u010dn\u00e1 ako pri datalayer pushoch, a tak na ich implement\u00e1ciu nie je potrebn\u00e9 tak dlho \u010daka\u0165. (ani investova\u0165 to\u013eko prostriedkov)<\/p>\n

 <\/p>\n

\u010co s\u00fa data Data Atrib\u00faty a ako ich pou\u017e\u00edva\u0165?<\/h1>\n

 <\/p>\n

Data atrib\u00faty maj\u00fa formu key-value p\u00e1rov vlo\u017een\u00fdch do elementov v HTML k\u00f3de str\u00e1nky, pri\u010dom key<\/strong> je n\u00e1zov atrib\u00fatu a sklad\u00e1 sa v\u017edy z predpony data-<\/strong> nasledovanou n\u00e1zvom atributu<\/strong> a hodnotou<\/strong>, ktor\u00e1 m\u00e1 v\u017edy formu stringu.<\/p>\n

My sme u jedn\u00e9ho z na\u0161ich klientov vyu\u017eili data atrib\u00faty, napr\u00edklad pre z\u00edskavanie inform\u00e1ci\u00ed o konkr\u00e9tnom kliknut\u00ed na CTA tla\u010didlo, ke\u010f\u017ee sme nechceli pou\u017e\u00edva\u0165 ani click URL, click text a in\u00e9 podobn\u00e9 premenn\u00e9, ktor\u00e9 mali tendenciu sa \u010dasto meni\u0165.<\/p>\n

V tomto konkr\u00e9tnom pr\u00edpade sme preto developerovi zadali vlo\u017ei\u0165 nasledovn\u00fd data atrib\u00fat do ka\u017ed\u00e9ho CTA\u010dka na str\u00e1nke, tak\u017ee vzh\u013ead, text, \u010di link tla\u010didla sa mohol pokojne \u010falej meni\u0165.<\/p>\n

Pr\u00edklad:<\/p>\n

<a class=\u201dbutton\u201d href=https:\/\/\u2026. data-gtm_button_cta=\u201dinformacie_o_sluzbach\u201d<\/strong> title=\u201dPozrite si podrobnej\u0161ie inform\u00e1cie o na\u0161ich slu\u017eb\u00e1ch\u201d><\/p>\n

 <\/p>\n

V Google Tag Manageri m\u00e1me viacero mo\u017enost\u00ed, ako z\u00edska\u0165 hodnotu tak\u00e9hoto data atrib\u00fatu.<\/strong><\/p>\n

 <\/p>\n

1. Pou\u017eit\u00edm Auto Event Variable (premennej)<\/h3>\n

Jedn\u00e1 sa o ten jednoduch\u0161\u00ed sp\u00f4sob. Ako typ premennej zvol\u00edte Element Attribute<\/strong> a n\u00e1zov atrib\u00fatu jednoducho skop\u00edrujete.<\/p>\n

\"Data<\/a><\/p>\n

<\/h3>\n

 <\/p>\n

2. Pou\u017eit\u00edm Data Layer (DL) Variable (premennej)<\/h3>\n

Tento sp\u00f4sob je mierne zlo\u017eitej\u0161\u00ed ako prv\u00fd spom\u00ednan\u00fd, kv\u00f4li \u0161peci\u00e1lnemu syntaxu, ktor\u00fd je potrebn\u00e9 dodr\u017eiava\u0165.<\/p>\n

\"Data<\/a><\/p>\n

 <\/p>\n

Pri pou\u017eit\u00ed DL premennej je potrebn\u00e9 v\u017edy definova\u0165 miesto, kde sa atrib\u00fat nach\u00e1dza. V uvedenom pr\u00edklade n\u00e1jdeme atrib\u00fat pod gtm, element<\/strong>, nasleduje dataset<\/strong> a potom n\u00e1zov atrib\u00fatu<\/strong>.<\/p>\n

Tu treba d\u00e1va\u0165 pozor, aby n\u00e1zov atributu neobsahoval poml\u010dku \u201c-\u201d.<\/strong><\/p>\n

Ak by to tak bolo a n\u00e1zov atrib\u00fatu bol napr. gtm-button-cta, je potrebn\u00e9 definova\u0165 v premennej n\u00e1zov ako dataset.gtmButtonCta (nie dataGtmButtonCta) – teda je potrebn\u00e9 pou\u017ei\u0165 camelcase.<\/p>\n

 <\/p>\n

Triggery<\/h1>\n

 <\/p>\n

Pri nastavovan\u00ed triggerov m\u00f4\u017eeme tie\u017e postupova\u0165 r\u00f4znym sp\u00f4sobom.<\/p>\n

 <\/p>\n

1. Pou\u017eitie CSS selectora<\/h3>\n

V spom\u00ednanom pr\u00edpade klientovi i\u0161lo o kliknutie, tak\u017ee typ triggera bolo v tomto pr\u00edpade kliknutie na odkaz, pri\u010dom Click Element mus\u00ed sp\u013a\u0148a\u0165 podmienku:<\/strong><\/p>\n

matches CSS selector [data-gtm_button_cta], [data-gtm_button_cta] *<\/strong> (hviezdi\u010dka na konci je tam pre pr\u00edpad, \u017ee by i\u0161lo o vnoren\u00fd atrib\u00fat) :<\/p>\n

\"3Data<\/a><\/p>\n

<\/h3>\n

 <\/p>\n

2. Pou\u017eitie podmienky pre definovanie premennej<\/h3>\n

V tomto pr\u00edpade je mo\u017en\u00e9 pou\u017ei\u0165 niektor\u00fa z premenn\u00fdch, ktor\u00e9 sme vytv\u00e1rali vy\u0161\u0161ie.<\/p>\n

Ak by sme potrebovali tag odp\u00e1li\u0165 len na konkr\u00e9tnom elemente, ktor\u00e9ho data atrib\u00fat m\u00e1 nejak\u00fa \u0161pecifick\u00fa hodnotu, m\u00f4\u017eeme postupova\u0165 pri nastaven\u00ed triggera nasledovne:<\/p>\n

a) pridan\u00edm podmienky pre hodnotu DL premennej (equals informacie_o_sluzbach):<\/h4>\n

\"3Data<\/a><\/p>\n

<\/h4>\n

 <\/p>\n

b) pridan\u00edm podmienky pre hodnotu Auto Event premennej (equals informacie_o_sluzbach):<\/h4>\n

\"3Data<\/a><\/p>\n

 <\/p>\n

3. Pou\u017eitie vlastnej JS premennej<\/h3>\n

Tento sp\u00f4sob m\u00f4\u017eeme vyu\u017ei\u0165 napr\u00edklad, ak chceme odp\u00e1li\u0165 iba tak\u00e9 kliknutia, ktor\u00e9 nastan\u00fa vo vn\u00fatri elementu, ktor\u00fd obsahuje konkr\u00e9tny data atrib\u00fat (pr\u00edpadne aj s konkr\u00e9tnou hodnotou). Samotn\u00fd kliknut\u00fd prvok pritom tento atrib\u00fat obsahova\u0165 nemus\u00ed.<\/strong><\/p>\n

Pre lep\u0161ie pochopenie si m\u00f4\u017eeme predstavi\u0165 pr\u00edpad, ke\u010f chceme mera\u0165 v\u0161etky kliknutia na linky v r\u00e1mci \u0161pecifickej \u010dasti. Napr\u00edklad v r\u00e1mci obsahu \u010dl\u00e1nkov na str\u00e1nkach. (mo\u017eno nie tie, ktor\u00e9 sa nach\u00e1dzaj\u00fa mimo obsahovej \u010dasti)<\/p>\n

Obsahov\u00e1 \u010das\u0165 mo\u017ee obsahova\u0165 data atrib\u00fat data-gtm_article_content<\/strong>.<\/p>\n

Tu potrebujeme vytvori\u0165 spom\u00ednan\u00fa vlastn\u00fa JavaScript Premenn\u00fa s nasledovn\u00fdm k\u00f3dom:<\/p>\n

 <\/p>\n

function() {<\/p>\n

var e = {{Click Element}};<\/p>\n

var closestDataGtmArticleContent = e.closest(‚data-gtm_article_content‘);<\/p>\n

return closestDataGtmButtonCta.getAttribute(„data-gtm_article_content“);<\/p>\n

}<\/p>\n

 <\/p>\n

\"3Data<\/a><\/p>\n

 <\/p>\n

V pr\u00edpade, \u017ee kliknutie nebolo v r\u00e1mci obsahovej \u010dasti \u010dl\u00e1nku, dostaneme hodnotu undefined<\/strong>, v opa\u010dnom pr\u00edpade dostaneme hodnotu atrib\u00fatu<\/strong> (ak data atrib\u00fat pridelen\u00fa hodnotu nem\u00e1, dostaneme null<\/strong>)<\/p>\n

Z toho vypl\u00fdva, \u017ee ak chceme mera\u0165 kliknutia len v r\u00e1mci obsahovej \u010dasti \u010dl\u00e1nku s pr\u00edslu\u0161n\u00fdm data atrib\u00fatom, trigger nastav\u00edme nejako takto:<\/p>\n

\"Data<\/a><\/p>\n

 <\/p>\n

Pou\u017eitie data atrib\u00fatov je jedna z mo\u017enost\u00ed, ako vyrie\u0161i\u0165 implement\u00e1ciu r\u00f4znych meran\u00ed na webe.<\/strong><\/p>\n

M\u00f4\u017ee to by\u0165 odolnej\u0161ie rie\u0161enie ako je pou\u017eitie CSS selektorov, pr\u00edpadne Click Textu, URL a pod.<\/p>\n

Data atrib\u00faty sa nemaj\u00fa d\u00f4vod meni\u0165 tak \u010dasto, ako spom\u00ednan\u00e9 elementy. V porovnan\u00ed s met\u00f3dou datalayer push ide o menej n\u00e1ro\u010dn\u00fa implement\u00e1ciu pre web developera a rovnako nen\u00e1ro\u010dn\u00fa implement\u00e1ciu v GTM, ktor\u00e1 m\u00f4\u017ee ma\u0165 svoje opodstatnenie v z\u00e1vislosti od konkr\u00e9tneho pr\u00edpadu.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ak by si mohli analytici vybra\u0165, v\u00e4\u010d\u0161ina by pravdepodobne pri meraniach najrad\u0161ej vyu\u017e\u00edvala inform\u00e1cie z datalayera. Met\u00f3da datalayer…<\/p>\n","protected":false},"author":74,"featured_media":18759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[809,200],"tags":[829,602,663,830],"_links":{"self":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts\/18749"}],"collection":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/comments?post=18749"}],"version-history":[{"count":8,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts\/18749\/revisions"}],"predecessor-version":[{"id":18765,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts\/18749\/revisions\/18765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/media\/18759"}],"wp:attachment":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/media?parent=18749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/categories?post=18749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/tags?post=18749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}