Zpět na Blog

Sleduj události pomocí CSS selektorů | LEKCE #6

Březen 23, 2018 | Alex Castro | | Smartlook škola

Když teď pomocí Smartlooku umíš sledovat události, je snadné seskupit data o tom, jak uživatelé používají tvůj web nebo produkt. Co když tě ale zajímá počet návštěvníků, kteří používají určitou funkci? V této lekci se dozvíš, jak na svém webu nastavit sledování událostí pomocí CSS selektorů, které tento problém řeší.

Jak nastavit události pomocí CSS selektoru?

Existují 2 způsoby:

Co je to vlastně CSS selektor?

Stavební kámen každého webu je jazyk HTML (který je tvořen prvky, jako jsou například obrázky, texty, navigační lišty, tlačítka, atd.). Je ale také dotvářen pomocí CSS (kaskádových stylů), které definují vzhled jednotlivých stránek.

U CSS se používají selektory k označení HTML prvků na stránce, které chceme „nastylovat“. Pro aplikaci stylů je třeba nastavit CSS selektory jako atributy pro jednotlivé HTML prvky. CSS selektor může vypadat následovně:

#sign-up-panel > div > div.button-with-note > a

Proč bych měl sledovat události pomocí CSS selektorů?

Je snadné nastavit sledování události jako kliknutí na tlačítko nebo na odkaz s konkrétním textem. Pokud máš ale web ve více jazycích a tlačítka obsahují odlišné texty kvůli překladům nebo pokud chceš sledovat události u prvků, kde není text (např. tlačítka pouze s ikonou), musíš použít CSS selektor pro výběr a sledování daného prvku.

Nastavení událostí pomocí Výběru událostí

Použij Výběr událostí k zjištění CSS selektoru prvku, na kterém chceš sledovat aktivitu kliknutí. Ve správci událostí klikni na tlačítko „Vybrat událost na stránce“.

Vlož URL stránky na které budeš vybírat událost.

Na stránce uvidíš vyskakovací okno, na které můžeš kliknout a povolit Výběr událostí.

Vyber prvek, který chceš sledovat a nastav si událost.

Můžeš nastavit přesnost CSS selektoru. Tímto způsobem můžeš zaznamenat kliknutí na prvky se společnými atributy CSS.

Data budou ihned k dispozici.

Manuální vložení CSS selektoru daného elementu

Jak získat CSS selektor konkrétního prvku?

Pokud používáš prohlížeč Google Chrome, stačí kliknout pravý tlačítkem na prvek (1) webu a zvolit „Prozkoumat“ (2).

Tím otevřeš v prohlížeči Vývojářské nástroje, ve kterých se daný prvek zvýrazní. Klikni pravým tlačítkem na zvýrazněný prvek (1) a vyber Kopírovat (2) a poté Kopírovat selektor (3).

CSS selektor tlačítka se uloží do schránky. Poté ho ve Smartlooku můžeš vložit do formuláře nastavení události (1), pojmenovat ho (2) a dokonce i kategorizovat (3). Celý proces dokončíš uložením události (4).

Skvělé je, že svá data o událostech uvidíš okamžitě!

V této lekci ses naučil:
  • Sledovat události kliknutí pomocí CSS selektorů
  • Zjistit CSS selektor prvku z libovolné stránky
  • Nastavit událost ve Smartlooku definováním CSS selektoru
  • Nastavit událost pomocí Výběru událostí (Event Picker)

Teď je to na tobě!

Sleduj události přesněji pomocí CSS selektorů. Které události sleduješ díky CSS selektorům? Dej nám vědět v komentářích.

Discussion