{"id":1474,"date":"2023-04-28T09:16:44","date_gmt":"2023-04-28T08:16:44","guid":{"rendered":"https:\/\/www.6clickz.com\/?p=1474"},"modified":"2023-04-28T09:16:44","modified_gmt":"2023-04-28T08:16:44","slug":"google-tag-manager-tvorba-datalayer-premennych","status":"publish","type":"post","link":"https:\/\/www.6clickz.com\/sk\/google-tag-manager-tvorba-datalayer-premennych\/","title":{"rendered":"Google Tag Manager a tvorba dataLayer premenn\u00fdch"},"content":{"rendered":"

Google tag manager je n\u00e1stroj, v\u010faka ktor\u00e9mu m\u00f4\u017eeme na n\u00e1\u0161 web vklada\u0165 r\u00f4zne tagy (zna\u010dky) r\u00fdchlo a jednoducho bez potreby modifik\u00e1cie zdrojov\u00e9ho k\u00f3du. To znamen\u00e1, \u017ee k tomu nie je potrebn\u00e1 pr\u00e1ca program\u00e1torov. Jednou z najd\u00f4le\u017eitej\u0161\u00edch \u010dast\u00ed Google Tag Managera je dataLayer.<\/p>\n

DataLayer (d\u00e1tov\u00e1 vrstva) je jedn\u00fdm z k\u013e\u00fa\u010dov\u00fdch pojmov vo svete Google Tag Manager (GTM). Je to javaskriptov\u00e1 premenn\u00e1, a v analytike n\u00e1m sl\u00fa\u017ei na pred\u00e1vanie d\u00e1t z webu do GTM. Zjednodu\u0161ene povedan\u00e9 je to ak\u00e1si virtu\u00e1lna vrstva webu, ktor\u00e1 obsahuje r\u00f4zne d\u00e1ta a GTM si z dataLayeru na\u010d\u00edtava hodnoty potrebn\u00fdch premenn\u00fdch. Teda za predpokladu, \u017ee sa v \u0148om nach\u00e1dzaj\u00fa. \u00dadaje v dataLayery s\u00fa generovan\u00e9 jednotliv\u00fdmi u\u017e\u00edvate\u013emi, ktor\u00ed s webom nejak\u00fdm sp\u00f4sobom interaguj\u00fa. Napr\u00edklad klikn\u00fa na n\u00e1h\u013ead produktu, alebo si pridaj\u00fa produkt do ko\u0161\u00edka. V dataLayery s\u00fa teda ulo\u017een\u00e9 inform\u00e1cie ako napr\u00edklad text kliknut\u00e9ho tla\u010didla, cena produktu alebo hodnota objedn\u00e1vky.<\/p>\n

\"\"<\/p>\n

Na prv\u00fd poh\u013ead sa m\u00f4\u017ee dataLayer zda\u0165 komplikovan\u00fd. Z\u00e1klady, ktor\u00e9 potrebujeme vedie\u0165 na tvorbu premenn\u00fdch sa daj\u00fa celkom jednoducho a r\u00fdchlo pochopi\u0165.<\/p>\n

Kde v GTM n\u00e1jdeme dataLayer?<\/h2>\n

V GTM kliknite na pravej strane na tla\u010didlo \u201cpreview\u201d – otvor\u00ed sa n\u00e1m nov\u00e9 okno – Google Tag Assistant. Vypln\u00edte url adresu webovej str\u00e1nky a dostanete sa do debug modu na danej str\u00e1nke. N\u00e1sledne sa vr\u00e1\u0165te na str\u00e1nku Google Tag Assistant.<\/p>\n

\"\"<\/p>\n

Z\u00e1kladn\u00fd princ\u00edp dataLayer<\/h2>\n

Ka\u017ed\u00fd objekt v dataLayery sa sklad\u00e1 z k\u013e\u00fa\u010da a hodnoty. K\u013e\u00fa\u010d zost\u00e1va rovnak\u00fd, men\u00ed sa n\u00e1m len jeho hodnota. V na\u0161om pr\u00edklade to vyzer\u00e1 nasledovne:<\/p>\n

K\u013e\u00fa\u010d = pageType<\/em>, hodnota = productDetail<\/em><\/p>\n

DataLayer je tvoren\u00fd viacer\u00fdmi vrstvami, tie s\u00fa od seba oddelen\u00e9 tabul\u00e1torom a {} z\u00e1tvorkou. Jedn\u00e1 sa o vnoren\u00e9 d\u00e1tove vrstvy, ktor\u00e9 s\u00fa hierarchicky usporiadan\u00e9. Ka\u017ed\u00e1 vnoren\u00e1 vrsta je posunut\u00e1 doprava.<\/p>\n

\"\"<\/p>\n

Ak chcete pracova\u0165 s \u00fadajmi z dataLayeru a pou\u017e\u00edva\u0165 ich v tagoch (zna\u010dk\u00e1ch), \u010di triggroch (sp\u00fa\u0161\u0165a\u010doch) mus\u00edte si z nich vytvori\u0165 dataLayer variables (premenn\u00e9). Premenn\u00e9 tohto typu (dataLayer variables) s\u00fa asi najpou\u017e\u00edvanej\u0161\u00ed typ premenn\u00fdch a pri pr\u00e1ci v GTM sa s nimi budete stret\u00e1va\u0165 \u010dasto.<\/p>\n

Vytv\u00e1ranie premenn\u00fdch z dataLayeru<\/h2>\n

Po\u010fme si vytvori\u0165 premenn\u00fa, v\u010faka ktorej zist\u00edme o ak\u00fd typ str\u00e1nky sa jedn\u00e1. V e-shopoch sa be\u017ene nach\u00e1dzaj\u00fa produktov\u00e9 alebo kategorick\u00e9 str\u00e1nky, \u010di str\u00e1nka ko\u0161\u00edka.
\n1. V Google Tag Manager vyberte Premenn\u00e9 > v sekcii \u201cUser – Defined Variables\u201d New > Data Layer Variable
\n<\/strong>2. V\u013eavo hore vypln\u00edme n\u00e1zov premennej. Pri premenn\u00fdch z d\u00e1tovej vrstvy zvykneme pou\u017e\u00edva\u0165 ozna\u010denie DLV – \/n\u00e1zov k\u013e\u00fa\u010da, ktor\u00fd zodpoved\u00e1 hodnote, ktor\u00fa chceme vytiahnu\u0165\/
\n3. Vypln\u00edme Data Layer Variable Name<\/em>. Ke\u010f\u017ee v dataLayery m\u00e1m viac vnoren\u00fdch vrstiev, pri p\u00edsan\u00ed dataLayer Variable Name<\/em> budeme pou\u017e\u00edva\u0165 \u0161peci\u00e1lnu bodkov\u00fa not\u00e1ciu<\/strong>. Jednotliv\u00e9 vrstvy od seba odde\u013eujeme bodkou a p\u00ed\u0161eme ich od najvy\u0161\u0161ej po najni\u017e\u0161iu. Zjednodu\u0161ene povedan\u00e9, zhora nadol a sprava do\u013eava. N\u00e1zov na\u0161ej premennej bude vyzera\u0165 takto:<\/p>\n

shoptet.pageType<\/strong><\/p>\n

\"\"<\/p>\n

4. Nov\u00fa premenn\u00fa ulo\u017e\u00edme<\/p>\n

Premenn\u00fa pageType vyu\u017eijete napr\u00edklad v pr\u00edpade, \u017ee chcete odp\u00e1li\u0165 ur\u010dit\u00fd tag iba na str\u00e1nke produktu. V\u010faka nej vytvor\u00edte trigger, ktor\u00fd sa bude sp\u00fa\u0161\u0165a\u0165 iba na ur\u010ditom type str\u00e1nky.<\/p>\n

Po\u010fme si skontrolova\u0165, \u010di premenn\u00e1 funguje spr\u00e1vne. Op\u00e4\u0165 prejdite do preview modu. V Preview mode sa na va\u0161ej str\u00e1nke prekliknite napr\u00edklad na produkt. V Google Tag Assistant tentokr\u00e1t zvo\u013ete mo\u017enos\u0165 Variables, na \u013eavej strane vyberte pr\u00edslu\u0161n\u00fa udalos\u0165 (v na\u0161om pr\u00edpade sa jedn\u00e1 o Window Loaded). Medzi premenn\u00fdmi by ste mali vidie\u0165 pr\u00e1ve vytvoren\u00fa premenn\u00fa DVL – pageType aj s pr\u00edslu\u0161nou hodnotou.<\/p>\n

\"\"\"\"<\/p>\n

Ako vytiahnu\u0165 \u00fadaje z po\u013ea premenn\u00fdch?<\/h2>\n

Pri pr\u00e1ci s dataLayerom sa m\u00f4\u017eete stretn\u00fa\u0165 aj s in\u00fdm typom vnoren\u00e9ho objektu, a t\u00fdm je pole. Pole je v Javascripte ohrani\u010den\u00e9 hranat\u00fdmi z\u00e1tvorkami a je tvoren\u00e9 viacer\u00fdmi prvkami. Zjednodu\u0161ene m\u00f4\u017eeme pole zap\u00edsa\u0165 ako:<\/p>\n

[A, B, C]<\/p>\n

Poz\u00edcie prvkov po\u013ea s\u00fa o\u010d\u00edslovan\u00e9. \u010c\u00edslovanie za\u010d\u00edna nulou. N\u00e1\u0161 pr\u00edklad vyzer\u00e1 takto.<\/p>\n

A = poloha 0 B = poloha 1 C = poloha 2<\/p>\n

S po\u013eom premenn\u00fdch sa stretneme napr\u00edklad v ko\u0161\u00edku, alebo na \u010fakovacej str\u00e1nke po odoslan\u00ed objedn\u00e1vky. Je to jednoducho povedan\u00e9, ak jeden objekt (riadok) dataLayeru obsahuje \u010fal\u0161ie objekty, ktor\u00e9 maj\u00fa svoje osobitn\u00e9 hodnoty. Napr\u00edklad viacero produktov v ko\u0161\u00edku, alebo objedn\u00e1vke. Ka\u017ed\u00fd z t\u00fdchto produktov m\u00e1 pritom svoj n\u00e1zov, id, cenu, kateg\u00f3riu, at\u010f. Po\u010fme si do ko\u0161\u00edka vlo\u017ei\u0165 viac produktov a pozrime sa ako vyzer\u00e1 dataLayer na str\u00e1nke ko\u0161iku.<\/p>\n

\"\"<\/p>\n

Ak by sme chceli do premennej d\u00e1tovej vrstvy ulo\u017ei\u0165 napr\u00edklad ID prv\u00e9ho produktu n\u00e1\u0161 k\u013e\u00fa\u010d by bol v tomto pr\u00edpade ecommerce.checkout.product.0.id<\/strong><\/p>\n

Pre cenu prv\u00e9ho produktu by k\u013e\u00fa\u010d vyzeral nasledovne ecommerce.checkout.product.0.price<\/strong><\/p>\n

V pr\u00edpade \u017ee chceme zadefinova\u0165 premenn\u00e9 druh\u00e9ho produktu 0 nahrad\u00edme 1<\/p>\n

Funk\u010dnos\u0165 vytvorenej premennej si over\u00edme tak isto ako v prvom pr\u00edpade. Cez Tag Assistant sa dostaneme na str\u00e1nku ko\u0161\u00edka, v hornej li\u0161te zvol\u00edme mo\u017enos\u0165 variables, n\u00e1jdeme novo vytvoren\u00fa premenn\u00fa a skontrolujeme, \u010di sa jej hodnota zhoduje s realitou.<\/p>\n

E\u0161te upozornenie na z\u00e1ver – pri vytv\u00e1ran\u00ed premenn\u00fdch z d\u00e1tovej vrstvy rozli\u0161ujte ve\u013ek\u00e9 a mal\u00e9 p\u00edsmen\u00e1, preto\u017ee Javascript je tak ako v\u00e4\u010d\u0161ina programovac\u00edch jazykov case – sensitive. Preto Product<\/strong> a product<\/strong> nie je to ist\u00e9.<\/p>\n