<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JavaScript &#8211; Medio Blog</title>
	<atom:link href="https://blog.medio.cz/stitky/javascript/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.medio.cz</link>
	<description></description>
	<lastBuildDate>Wed, 17 Sep 2014 13:55:49 +0000</lastBuildDate>
	<language>cs</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.1</generator>
	<item>
		<title>Jmenné konvence pro Google Tag Manager</title>
		<link>https://blog.medio.cz/gtm-jmenne-konvence</link>
					<comments>https://blog.medio.cz/gtm-jmenne-konvence#comments</comments>
		
		<dc:creator><![CDATA[André Heller]]></dc:creator>
		<pubDate>Wed, 02 Jul 2014 07:00:05 +0000</pubDate>
				<category><![CDATA[Analytika]]></category>
		<category><![CDATA[Google Analytics]]></category>
		<category><![CDATA[Google Tag Manager]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Jmenné konvence]]></category>
		<category><![CDATA[Nástroje]]></category>
		<category><![CDATA[Universal Analytics]]></category>
		<guid isPermaLink="false">https://blog.medio.cz/?p=1500</guid>

					<description><![CDATA[Google Tag manager, nástroj na správu měřících scriptů na webu. Pro manažery noční můra, pro vývojáře podivná náhrada jejich práce. GTM je velmi mocný nástroj a v dnešní době už dokáže pořádnou spoustu věcí. Jedním z jeho problémů, a je to problém dost veliký, je možnost pojmenovávání.]]></description>
										<content:encoded><![CDATA[<p>Google Tag manager, nástroj na správu měřících scriptů na webu. Pro manažery noční můra, pro vývojáře podivná náhrada jejich práce. GTM je velmi mocný nástroj a v dnešní době už dokáže pořádnou spoustu věcí. Jedním z jeho problémů, a je to problém dost veliký, je možnost pojmenovávání. V praxi jsem se setkal s klienty, kteří mají desítky kontejnerů a stovky různých tagů, pravidel a maker. Udržet v nich pořádek a přehlednost je velmi náročný úkol. Chtěl bych vás zasvětit do jmenných konvencí, které jsme si postupem času osvojili a celkem úspěšně ozkoušeli v <a title="Medio Interactive" href="http://www.medio.cz">Mediu</a>. Často se setkávám s GTM nových klientů, do kterého si předtím každý &#8222;bastlil to svoje&#8220;. Většinou je to naprosto bez logiky, polovina v angličtině, polovina v češtině. Část používá jednu notaci, jiná část pak zase raději žádnou. Prvním dobrým krokem je tedy překvapivě <strong>zavedení firemních konvencí.</strong> Kdysi už o podobném tématu vyšel <a href="http://online-behavior.com/analytics/tag-manager-conventions">článek od Douga Halla</a>. Z počátku jsme se s ním celkem ztotožňovali, postupem času jsme se od nich dost odchýlili.</p>
<h2>Obecně na úvod</h2>
<p>U nás používáme primárně angličtinu. Velká většina názvů má více slov, a protože GTM neumožnuje v názvech prakticky žádné speciální znaky, jako oddělovač používáme spojovník s mezerami &#8220; &#8211; &#8222;. V některý případech využíváme ještě standardní javascriptovou tečku &#8222;.&#8220;. Všechny ty to případy vám dále na příkladech vysvětlím, ale ještě než se do toho pustím, je důležité, abyste si uvědomili, že každá pravidla mají své hranice. Existují případy, kdyby byl název dle pravidel tak šílené dlouhý a nepřehledný, že je lepší pojmenovat ho trochu více lidsky. Efektivita stojí vždy nad přesností.</p>
<p style="text-align: center;"><img fetchpriority="high" decoding="async" class=" wp-image-1517 aligncenter" src="http://3.bp.blogspot.com/-my0di_JDdTk/TbXpTkfxZDI/AAAAAAAABTc/s9ix4WZQycE/s1600/file-naming-convention-110423.gif" alt="konvence" width="640" height="199" /></p>
<h2>Tagy</h2>
<p>Obecně se ve všech tazích na <strong>začátku píše jejich typ.</strong> Následuje pomlčkový oddělovač a případný podtyp. Jako poslední přidáváme nějaké upřesnění, abychom věděli, k čemu daný tag patří, resp. stručný zápis, kde se spouští. Tagů existuje velká spousta druhů, tak jsme si je rozdělili do několika skupin:</p>
<ul>
<li>Analytics Tagy</li>
<li>Ostatní předdefinované tagy</li>
<li>Custom HTML tagy</li>
</ul>
<h3>Analytics tagy</h3>
<p>Tyto tagy mají trochu odlišnou konvenci od ostatních tagů. Po zkušenostech u nich <strong>upřednostňujeme upřesnění před podtypem</strong>. Je to proto, že Analytics tagů se obvykle nasazuje řádově nejvíc a nejčastěji se s nimi nějak manipuluje. Pro jeden měřený účet máme někdy tři, jindy třeba devět tagů. Narozdíl od Adwords, kde máme obvykle třeba dva. Na začátek tedy napište jejich typ (GA/UA). Pokud máte v kontejneru více než jeden analytics účet nebo property, <strong>využijte jejich názvy</strong> jako další součást názvu tagu (právě to upřesnění):</p>
<ul>
<li>UA &#8211; Hlavní weby &#8211; Blog <span style="color: #808080;">(Účet <em>Hlavní weby</em> a property <em>Blog)</em></span></li>
<li>UA &#8211; Global <span style="color: #808080;">(Účet <em>Global </em> s jedním property, proto ho neuvádím vůbec.<em>)</em></span></li>
</ul>
<p>Následně napište podtyp (Pageview, Ecommerce/Transaction, Event, Social, &#8230;) a další upřesňující hodnoty, jsou-li třeba:</p>
<ul>
<li>UA &#8211; Hlavní weby &#8211; Blog &#8211; Pageview <span style="color: #808080;">(Obecná pageview pro měřící kód blogu.)</span></li>
<li>UA &#8211; Global &#8211; Event &#8211; header.logo <span style="color: #808080;">(Konkrétní označení události pro <em>Global</em> účet.)</span></li>
<li>UA &#8211; Pageview <span style="color: #808080;">(Základní tag pro universaly, pokud v kontejneru <strong>nemám</strong> jiné měřící UA kódy.)</span></li>
</ul>
<p><strong>Každé slovo začíná velkým písmenem</strong>. Neplatí to pouze tehdy, objeví-li se v názvu skutečná hodnota. Typicky výše zmíněný header.logo (Jeho význam není v tomto článku důležitý.)</p>
<h3>Ostatní předdefinované tagy</h3>
<p>Tyto tagy rovněž uvozujte typem (Adwords, Listener, &#8230;). Pak konečně následuje to <strong>upřesnění</strong>. Obvykle to znamená <strong>umístění kódu z hlediska hostname nebo URL</strong> &#8211; Místo, kde se kód má spustit. Umístění nerozepisujte do detailu (To se dělá v definici pravidla. Zde jde pouze o základní rozlišení, co nejobecnější možnost.) Pokud spouštíte tag úplně všude (All pages), nebude mít žádné upřesnění.</p>
<ul>
<li>Listener – Link Click <span style="color: #808080;">(Posluchač pro kliky na odkazy, All pages)</span></li>
<li>Listener – Form Submit <span style="color: #808080;">(Posluchač pro odeslané formuláře, All Pages)</span></li>
<li>Adwords – Remarketing – Blog <span style="color: #808080;">(Adwords Remarketing kód pro sekci Blog. Alternativní zápis je <em>Adwords – Remarketing – blog.medio.cz</em>. Záleží na složitosti účtů a webu. Většinou stačí první varianta.)</span></li>
<li>Adwords – Conversion – Akademie <span style="color: #808080;">(Adwords konverzní kód pro objednávku školení.)</span></li>
</ul>
<h3>Custom HTML tagy</h3>
<p>Pro tyto tagy platí vesměs <strong>stejná pravidla jako pro ty předdefinované</strong>. Uvozujte typem, pokračujte podtypy a nějakým upřesněním pozice.</p>
<ul>
<li>Adform – Global tracking Point – news.medio.cz</li>
<li>Etarget – Remarketing</li>
<li>FB – Remarketing</li>
<li>Gemius</li>
<li>Gemius – Heatmaps</li>
</ul>
<p>Jednoduše řečeno jde o přehlednost a pochopitelnost. Pokud to název splňuje, je to v pořádku.</p>
<p style="text-align: center;"><a href="https://blog.medio.cz/wp-content/uploads/tags_thumb.png"><img decoding="async" class="aligncenter wp-image-1583 size-full" src="https://blog.medio.cz/wp-content/uploads/tags_thumb.png" alt="Tagy" width="613" height="481" /></a></p>
<h2>Pravidla</h2>
<p>Event – ga.event <span style="color: #888888;">(Spouštění obecných eventů s předurčenými hodnotami v dataLayeru. Toto pravidlo se spustí jakmile se v dataLayeru objeví &#8218;event&#8216;: &#8218;ga.event&#8216;)</span>. Názvy pravidel jsou velmi jednoduché a striktní. <strong>Obsahují naprosto přesně svůj obsah.</strong> (Jaké makro nabývá jaké hodnoty.)</p>
<ul>
<li>Event – header.logo <span style="color: #888888;">(Spouštění konkrétnějších eventů pevně danými hodnotami v GTM. Rozdíl mezi tímto a předchozím pravidlem spočívá pouze ve využitelnosti, o které povím něco v jiném článku. Jmenné konvence jsou identické.)</span></li>
<li>URL – All pages <span style="color: #888888;">(Předdefinované pravidlo. Musíte se s ním smířit, protože dokud GTM nezačne podporovat speciální znaky v názvech, tak lepší alternativu pojmenování asi nenajdeme. Jinak bych ho přejmenoval na <em>URL &#8211; .*</em>)</span></li>
<li>Hostname – akademie.medio.cz <span style="color: #888888;">(Zde asi není, co vysvětlovat)</span></li>
<li>Event – gtm.formSubmit <span style="color: #888888;">(Obecné pravidlo formulářového posluchače, v reálu prakticky nevyužitelné, protože vždycky chceme specifikovat konkrétní formulář nebo odkaz apod. -&gt; viz Submit – id.objednat)</span></li>
<li>Submit – id.objednat <span style="color: #888888;">(Pravidlo pro odeslání formuláře s objednávkou. Navěšené na posluchače. Nemusíte specifikovat složité pravidlo typu Event – gtmFormSubmit, Element id &#8211; objednat. Místo toho <strong>vytvoříme typ <em>Submit</em></strong>, který sám o sobě je jasný, a doplníme upřesněním, kterou část elementu připojujeme. Stále doufám, že budou jednou ty speciální znaky povolené a fungovat. V tomhle případě by to velmi radikálně usnadnili. Podobu s nimy (alternativy) uvádím v závorkách na konci.):</span>
<ul>
<li>id. &#8211; Element ID <span style="color: #888888;">(Submit &#8211; #objednat)</span></li>
<li>class. – Element Classes <span style="color: #888888;">(Click &#8211; .box &#8211; tahle alternativa funguje i dnes)</span></li>
<li>url. – Element URL <span style="color: #888888;">(Link Click &#8211; ?.*\.pdf)</span></li>
<li>target. – Element Target <span style="color: #888888;">(Link Click &#8211; _blank)</span></li>
</ul>
</li>
</ul>
<p>Výše uvedená pravidla jsou jednoduchá. U složitějších pravidel to nazvat takhle jednoduše nelze. To je přesně ten případ, který jsem zmiňoval na začátku. Místo nějakých dlouhých názvů typu:</p>
<ul>
<li><strong>Event</strong> – gtm.linkClick, <strong>ElementClasses</strong> – button, <strong>Element URL</strong> – medio.cz-verejnaskoleni-individualni-skoleni-zdarma, <strong>URL</strong> – medio.cz-verejna-skoleni</li>
</ul>
<p>by se to dle výše uvedených pravidel dalo zkrátit jako:</p>
<ul>
<li><strong>Link Click</strong> &#8211; <strong>class.</strong>button <strong>url.</strong>medio.cz-verejna-skoleni-individualni-skoleni-zdarma, <strong>URL</strong> – medio.cz-verejna-skoleni</li>
</ul>
<p>To je však stále dost nepřehledné a v seznamu pravidel je to pro vás prakticky nepoužitelné. Proto je asi lepší využít nějakého stručného jasně popisného slovního popisu. Bohužel vám nikdy nedá úplnou přesnost, ale stejně budete muset takto napsané pravidlo pravděpodobně otevřít, abyste se podívali, co představuje. I tak je dobré alespoň zachovat spouštěcí typ. Ve výsledku by to mohlo vypadat tedy takto:</p>
<ul>
<li><strong>Link Click</strong> – Button Individuální Zdarma</li>
</ul>
<p>Někdy je těžké tuto pomyslnou hranici mezi efektivitou a přesností najít, ale vždy tam ta hranice být musí.</p>
<p style="text-align: left;"><a href="https://blog.medio.cz/wp-content/uploads/rules_thumb.png"><img decoding="async" class="aligncenter wp-image-1582 size-full" src="https://blog.medio.cz/wp-content/uploads/rules_thumb.png" alt="" width="426" height="374" srcset="https://blog.medio.cz/wp-content/uploads/rules_thumb.png 426w, https://blog.medio.cz/wp-content/uploads/rules_thumb-300x263.png 300w" sizes="(max-width: 426px) 100vw, 426px" /></a></p>
<h2>Makra</h2>
<p><strong>1st Party Cookie</strong> – cookie.název (&#8222;datový typ&#8220; cookies označuje v makrech, že se jedná o cookies, aby se nám nepletla s datalayerem a JS proměnnýma. Po tečce následuje její název). Google Tag Manager některá makra předvytváří. Jejich názvosloví je lehce odlišné od toho, které používáme u nových maker proto si je buďto přejmenujte nebo se s nimi smiřte a zvykněte si na ně, není jich tolik. Základním pravidlem názvů je <a title="camelCase - velbloudí notace" href="http://en.wikipedia.org/wiki/CamelCase"><strong>camelCase</strong></a>, tedy velbloudí notace. To samozřejmě vychází z javascriptu, ve kterém rovněž vytváříme dataLayer a většinu tagů. První písmeno prvního slova je malé, první písmena ostatních slov jsou velká. Toto pravidlo se různě doupravuje podle typů maker:</p>
<ul>
<li><strong>Auto-Event Variable</strong> – tato makra už jsou většinou předdefinovaná pomocí nešikovného oddělovače „mezery“. Můžeme je také přejmenovat na tečkovou notaci (element.url, element.id, atd..) nebo se s tím prostě smířit. <em>element</em> je opět &#8222;datový typ&#8220;.
<ul>
<li>element</li>
<li>element url</li>
<li>element classes</li>
<li>element id</li>
<li>element target</li>
</ul>
</li>
<li><strong>Constant String</strong> – konstanty pojmenováváme velkými písmeny s oddělovačem mezerou (UA ID, GA ID, MEDIO.CZ)</li>
<li><strong>Container Version Number</strong> – version.77</li>
<li><strong>Custom Javascript</strong> – Vždy vrací nějakou hodnotu, takže se jedná vlastně o standardní getter. (getRMKPageType, getUAID, &#8230;). V případě, kdy vrací boolean využijte klasicky „is“ (isCrossDomain, …)</li>
<li><strong>Data Layer Variable</strong> – Nejpoužívanější typ maker. Uvádíme datový typ dl. (dl.pageType, dl.visitorId, …)</li>
<li><strong>Debug mode</strong> – isDebugMode &#8211; vrací hodnotu stejně jako Custom javascript.</li>
<li><strong>DOM Element</strong> – id.identifikator (rozlišujeme pomocí ID, takže datový typ id.)</li>
<li><strong>HTTP Referrer</strong> – hodnoty referreru
<ul>
<li>referrer</li>
<li>referrer.protocol</li>
<li>referrer.hostname</li>
<li>referrer.port</li>
<li>referrer.path</li>
<li>referrer.query</li>
<li>referrer.fragment</li>
</ul>
</li>
<li><strong>JavaScript Variable</strong> – js.název (datový typ js označuje v makrech, že se jedná o javascriptové proměnné, aby se nám nepletla s datalayerem a cookies. Po tečce následuje její název)</li>
<li><strong>Lookup Table</strong> –vrací hodnoty, platí pro ní totéž co pro Custom Javascript.</li>
<li><strong>Random Number</strong> – randomNumber</li>
<li><strong>URL</strong> – jednotlivé hodnoty
<ul>
<li>url</li>
<li>url.protocol</li>
<li>url.hostname</li>
<li>url.port</li>
<li>url.path</li>
<li>url.query</li>
<li>url.fragment</li>
</ul>
</li>
</ul>
<p style="text-align: left;"><a href="https://blog.medio.cz/wp-content/uploads/macros_thumb.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-1581 size-full" src="https://blog.medio.cz/wp-content/uploads/macros_thumb.png" alt="" width="482" height="323" /></a></p>
<p>A to je vše. Samozřejmě najdete mnoho případů, kdy konvence nebudou úplně ideální a budete si je muset přiohnout. Například pokud máte analytics s jedním účtem a mnoha properties nebo využíváte stejně pojmenované cookies s jiným významem přes několik různých webů. Nebo jednoduše nepotřebujete názvy dělit na tolik skupin, datových typů, apod. V podobných scénářích je nutné si doupřesnit nebo naopak zrušit nějaká pravidla a tyto konvence brát pouze jako základ. Mějte na paměti, že to nejdůležitější je, aby se váš tým neztrácel, věděl a mohl efektivně pracovat.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.medio.cz/gtm-jmenne-konvence/feed</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
