Co to je?
Plná cesta ke kliknutému viděnému prvku v HTML, jednoznačně určující daný prvek.
K čemu to je?
- Pěkné popisky kliknutí.
- Použití ve vlastních proměnných a podmínkách
Námitky:
Ano, když si v podmínce vyberete „click element“ tak máte možnost použít „CSS selector“. Lze to použít, ale nejde si v tom tolik hrát ještě s reguláry etc. a už vůbec to nemůžete použít jako vstup do RegEx vyhledávací tabulky etc.
Postup tvorby proměnné:
- Jít do Google tag manageru a zvolit příslušný GTM kontejner.
- Proměnné (variables)
- Povolit základní proměnnou Click element.
- .Založit novou proměnou.
- Vlastní javascript a vložit následující kód.
- Hotovo
function() {
if ({{Event}}=="gtm.click"||{{Event}}=="gtm.linkClick" ||{{Event}}=="gtm.elementVisibility"){
var el = {{Click Element}};
var stack = [];
while ( el.parentNode != null ) {
var sibCount = 0;
var sibIndex = 0;
for ( var i = 0; i < el.parentNode.childNodes.length; i++ ) {
var sib = el.parentNode.childNodes[i];
if ( sib.nodeName == el.nodeName ) {
if ( sib === el ) {
sibIndex = sibCount;
}
sibCount++;
}
}
if ( el.hasAttribute('id') && el.id != '' ) {
stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
} else if ( sibCount > 1 ) {
stack.unshift(el.nodeName.toLowerCase() + ':eq(' + sibIndex + ')');
} else {
stack.unshift(el.nodeName.toLowerCase());
}
el = el.parentNode;
}
return (stack.slice(1)).join(' > ');
}
}
Příklady výstupu této proměnné:
Řekněme, že bych chtěl měřit třeba kliknutí na obrázek v pravém sloupci.
Asi nejjednoduší je kliknou na daný obrázek pravým tlačítkem a dát „prozkoumat “ ¨(inspect chrome)
Následovně vybrat prvek v HTML a dát zase pravé tlačítko > kopírovat > kopírovat Seletor.
Výsledek takto získané cesty bude zkrácená verze selectoru.
#text-3 > div > div > img
Určující dostatečně unikátně o který prvek se jedná na stránce.
Pokud bych chtěl měřit jen tento jeden obrázek, mohu to udělat pravidlo, přes zmíněný „Click element“ v kombinaci CSS selectoru v GTM.
Pokud použijete mou GTM proměnou získáte celou cestu CSS selectoru a na konci bude předešlí krátký selector.
body > div#page > div#content > div:eq(1) > div > div#secondary > div > aside#text-3 > div > div > img
Pokud bych však chtěl šetřit množství značek a pravidel a chtěl přitom měřit více obrázků a chtěl je třeba i pěkně popsat nastane problém. CSS selector je jen v podmínce a nejde použít nikde jinde a proto jsem napsal i tento skript.
Tímto způsobem si můžete třeba vytvořit jednoduché podmínky v pravidlech kliknutí a kliknutí na odkazy. Zvláště to je super pokud máte více stejně pojmenovaných tlačítek a chce je navzájem rozlišit.
Jedno z použití je třeba vytváření pěkných popisků pro eventy dle bloku obsahu.
Třeba u mě wordpresu to bude, pokud obsahuje selector:
- #footer-area je to odkaz z patičky
- #secondary pravý sloupec
- article#post odkaz z článku
- etc.
To vložíte do RegEx tabulky, vypnete plnou shodu a hurá do toho. U interních odkazů to posílám místo evetnAction, kde normálně mívám doménu externího odkazů.
Můžete si tak třeba třídit interní odkazy… rozlišíte, které kliknutí na odkaz bylo z patičky, menu, přes logo etc. Možností je nepočítaně.
Napište mi na sociálních sítích, jestli se vám takové scripty hodí / libí.
Komentáře jsem vypnul, diskuzi prosím směrovat na Facebook či Twitter
Update 2021-10-22
Detailní css selector:
Může se hodit, když původní verze nestačí a potřebujete se dostat k většímu detailu, propisuje vždy element class a ID.
Tato verze dělá soupis všeho a nic nevynechává.
function() {
var e= {{Click Element}};
var s = "", t, i, c, p, n;
do{
t = e.tagName.toLowerCase();
i = e.hasAttribute("id") ? "#" + e.id : "";
c = e.hasAttribute("class") ? "." + e.className.split(/\s+/).join(".") : "";
p = e.parentNode;
n = Array.prototype.filter.call(e.parentNode.childNodes,function(x){
return x.nodeType == Node.ELEMENT_NODE;
}).indexOf(e) + 1;
s = t + i + c + ":nth-child(" + n + ") > " + s;
}while( !p || !(e = p).tagName.match(/^HTML$/i) );
return s.slice(0,-3);
}