Zpět na Blog

Sběrač události CSS selektorů | LEKCE #6

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

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

Jak nastavit události pomocí CSS selektoru?

Existují dva 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č byste měli sledovat události pomocí CSS selektorů?

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

Nastavení událostí pomocí sběrače událostí

Použijte sběrač událostí ke zjištění CSS selektoru prvku, na kterém chcete sledovat aktivitu kliknutí. Ve správci událostí klikněte na tlačítko „Vybrat událost na stránce“.

Vložte URL stránky, na které budete vybírat událost.

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

Vyberte prvek, který chcete sledovat a nastavte si událost.

Můžete nastavit přesnost CSS selektoru a 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áte prohlížeč Google Chrome, stačí kliknout pravý tlačítkem na prvek (1) webu a zvolit „Prozkoumat“ (2).

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

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

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

Nemůžete sledovat svoje události pomocí CSS selektoru?

Někdy má tlačítko, které chcete sledovat, opakující se selektor nebo chcete sledovat vyskakovací okno. V takovém případě si vytvote vlastní události pomocí naší API.

V této lekci jste se naučili:
  • 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 vás!

Sledujte události přesněji pomocí CSS selektorů. Které události sledujete díky CSS selektorům? Dejte nám vědět v komentářích.

Funnely pro kvalitativní analytiku | Lekce #7

Discussion