Google Tag manager proměnná: Plná hodnota query selectoru

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é:

  1. Jít do Google tag manageru a zvolit příslušný GTM kontejner.
  2. Proměnné (variables)
  3. Povolit základní proměnnou Click element.
  4. .Založit novou proměnou.
  5. Vlastní javascript a vložit následující kód.
  6. Hotovo

 

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

.