Existuje několik odůvodněných případů, kdy je vhodné měřit událost kliknutí na odkaz, který načítá novou stránku:

  • když odkaz vede na stránku, kterou nemáme pod kontrolou (a nemůžeme tedy provést měření tam);
  • když odkaz vede na soubor (zde není kam umístit měřicí kód);
  • když nás zajímá samotná akce kliknutí a ne tolik už její výsledek.

Obdobně lze uvažovat některá odeslání formulářů, ale k dosažení rozumného zjednodušení se v tomto článku budu zabývat výhradně odkazy. Intuice člověka, který zatím nemá s JavaScriptem vybudován dostatečně silný vztah, by napovídala takovéto řešení (neuvádím zde kód pro měření do některého konkrétního nástroje, ale obecnou funkci, kterou každý z vás může nahradit voláním měření v syntaxi vašeho zvoleného nástroje):

<a href="http://www.webanalytics.cz/" onclick="zaznamenejKlik();">Nějaký odkaz</a>

VAROVÁNÍ: Veškeré příklady přímo v článku využívají z důvodu názornosti atribut onclick. V reálném projektu je vhodnější využít jiné metody zachytávání událostí nad elementy ve stránce.

Proč to nebude fungovat

Problémem je práce prohlížeče s událostmi, která v tento moment sice vykoná samotnou měřicí funkci, ale zároveň do seznamu „K realizaci“ okna prohlížeče zařadí akci načtení cíle daného odkazu – pro tuto chvíli jí říkejme „Relokace“. Měřicí funkce ale sama většinou změření neprovádí. To je v drtivé většině nástrojů realizováno až prostřednictvím vygenerování měřicího pixelu s URL adresou obsahující měřené údaje. Tato akce je ale na stejný seznam zařazena až funkcí zaznamenejKlik a je tedy na řadě až po Relokaci. Relokace je ale destruktivní a při jejím vykonávání celý seznam K realizaci zaniká. Na samotné měření se tedy již nedostane.

Tři způsoby řešení

Vím nejméně o následujících třech řešeních, které se mohou hodit v různých případech.

Zachování původního okna

Asi nejjednodušším způsobem je zajištění toho, že původní okno nezanikne a změření se tak provede ještě v něm. K tomu stačí otevřít odkaz v jiném okně (nebo tabu):

<a href="http://www.webanalytics.cz/" target="_blank" onclick="zaznamenejKlik();">Nějaký odkaz</a>

Tato metoda je ale poměrně zásadním zásahem do způsobu obsluhy kliknutí a většině návrhářů interakcí při této myšlence zamrazí v zátylku. Proto bych ji doporučil pouze v případě měření kliknutí na odkazy, které vedou na stažení souboru. V některých případech to může dávat smysl též u externích odkazů (např. odkaz na Facebook stránku firmy).

Využití krátké časové prodlevy

Dalším způsobem, který je celkem rozšířený, je využití funkce setTimeout. K tomu je nutné nejprve prohlížeči zabránit v umístění Relokace na seznam K realizaci, abychom později obdobnou akci mohli vykonat až v momentě, kdy již změření pravděpodobně proběhlo.

<script type="text/javascript">
    function vykonejMereni() {
        zaznamenejKlik();    // zde proved samotne zmereni v syntaxi daneho nastroje
        setTimeout(function() {
            window.location = 'http://www.webanalytics.cz/';
        }, 500);   // 500 milisekund by melo stacit
    }
</script>
<a href="http://www.webanalytics.cz/" onclick="vykonejMereni(); return false;">Nějaký odkaz</a>

Tato metoda ale znamená, že:

  • i když bude změření rychlejší, než zvolený timeout, bude se vždy čekat celou tuto dobu;
  • někdy naopak ani zvolená prodleva nemusí stačit k tomu, aby se změření stihlo provést.

Využití zpětného volání

Většina mně známých nástrojů webové analytiky poskytuje metodu o něco lepší, než je metoda časové prodlevy. Samotná měřicí funkce umí detekovat, že již k měření došlo a dá o tom vědět prostřednictvím zpětného volání. To má tyto výhody:

  • když bude měření rychlejší, bude prodleva minimální;
  • když bude měření pomalé, bude se čekat déle, ale změření se provede.

Druhá výhoda nemusí být výhodou zejména proto, že rychlost provedení změření nemusí být plně v našich rukou a příliš velká prodleva by měla již velmi negativní dopad na návštěvníky. Proto lze často s touto metodou dopředu určit v nastavení, jaká je maximální časová prodleva, po kterou má prohlížeč čekat na změření (obvykle 1000 milisekund). Zde již nemá smysl využívat obecné příklady, protože jednotlivé syntaxe se liší. Uvedu proto příklad řešení v Google Universal Analytics:

<script type="text/javascript">
    function vykonejMereni() {
        ga('send', {
            'hitType': 'event',
            'eventCategory': 'link',
            'eventAction': 'click',
            'eventLabel': 'http://www.webanalytics.cz/',
            'hitCallback': function() {
                window.location = 'http://www.webanalytics.cz/';    // vykona se po zmereni udalosti
            }
        });
    }
</script>
<a href="http://www.webanalytics.cz/" onclick="vykonejMereni(); return false;">Nějaký odkaz</a>

Bonus: Řešení přes Google Tag Manager

Pokud navíc využíváte k nasazování měřicích skriptů Google Tag Manager, mohlo by vás zmást, že tato možnost v něm není na první pohled k nalezení.

Jak to bude vypadat v kódu

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-T5KQZJ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

<script type="text/javascript">
    function vykonejMereni() {
        dataLayer.push({
            'event': 'link-click',
            'hitCallback': function() {
                window.location = 'http://www.webanalytics.cz/'; // vykona se po zmereni udalosti
            }
        });
    }
</script>
<a href="http://www.webanalytics.cz/" onclick="vykonejMereni(); return false;">Nějaký odkaz</a>

Co je třeba nastavit v GTM

1) Vytvořte značku Universal Analytics ke změření daného kliknutí: Zakladni-nastaveni-znacky

2) Nastavte parametry měřené události:

Nastaveni-mereneho-eventu

3) Nastavte pravidlo spouštění dle připraveného kódu ve stránce:

Pravidlo-spousteni

4) Nastavte pole s funkcí zpětného volání:

Polek-k-nastaveni

4) Vytvořte nové makro, které funkci převezme ze stránky:

Vytvoreni-makra

Bonus k bonusu: Live verze s využitím jQuery

Update

Google umožnil využití nové funkčnosti sendBeacon některých moderních prohlížečů (ano, IE toto nepodporuje) na zasílání asynchronních požadavků i při probíhající Relokaci nebo zavírání okna.

Tags:

Komentáře

  1. Ahoj Lukáši,

    díky za článek. HitCallback je super, ten jsem neznal a určitě ho zkusím. 🙂

    Napadají mě ještě 3 věci k tomu měření:
    1, Proč používáš onClick? Respektive, není „lepší“ používat onMouseDown? S přihlédnutím k předpokladu, že false positive u onMouseDown je menší než počet „positives“, tj. klikání na prostřední tlačítko myši, nebo otevírání oken do nové záložky přes pravé tlačítko a kontextovou nabídku.
    2, Skript by možná šlo udělat tak, aby si vzal href z toho odkazu a poslal ho jako parametr té funkce, ne? Ať se to nemusí „hardkódovat“?
    3, Jak se ten skript chová k více klikům? Dvojklik na jeden link započte jako 2 události, nebo jednu?

    Jarda

    • Díky za podnětný komentář – veškeré body z něj jsou skvělým doplněním.
      Zvolil jsem nejjednodušší možný způsob příkladů a též způsob zápisu, se kterým se čtenáři setkají nejčastěji. Já sám bych v reálném projektu nevyužíval HTML atributy a hardcodování, ani pokud by šlo o měření byť jediného odkazu, protože dáváme důraz na udržovatelnost a rozšiřovatelnost našich kódů. „Pěknější“ způsob použití je pak v posledním odkázaném příkladu, kde to je vidět v akci.

    • A ad 3) Ano – změří se to násobně, dokonce i vícekrát, pokud na odkaz budeš klikat jak zběsilý. Ale některé krajní případy mi nepřijde až tak důležité řešit – navíc někdy lze takové chování vysledovat a rozhodnout, zda tím je či není měření příliš ovlivněno.

  2. Ahoj,

    mám za to, že tento problém GTM řeší volbou Počkat na značky (https://support.google.com/tagmanager/answer/3415369?hl=en#ClickListener), která je u značky Poslouchač kliknutí na odkaz.

    Volám tedy při zobrazení každé stránky tuto značku, kde mám (defaultní) limit 2000 milisekund prodlevy.
    Značka pro samotný GA Event tracking je pak vázana na událost gtm.linkClick.

    Používám to takto na několika webech a prokliky na ext. weby (ve stejném okně) se zaznamenávají, zdá se, v pohodě.

    Máte někdo s tímto postupem špatné zkušenosti?

    • To je zajímavá možnost k prozkoumání, o které jsem ještě nevěděl. Mám ale pochybnosti – technicky je možné: a) buď že jde o variantu s timeoutem (pak by ale nedávala smysl maximální prodleva, která se nastavuje), nebo b) že jde o čekání na callbacky, ale pak je to podmíněno tím, že GTM ví, na které callbacky má čekat. To podle mě ví pouze v případě vlastních skriptů (Google Analytics, možná Adwords – tam nevím, zda je něco takového vůbec k dispozici), ale nemusí znát princip (názvosloví) u všech ostatních nástrojů.

      Takže za mě je výhodnější toto hlídat ručně, než se spoléhat na nejasné řešení obsažené v UI GTM.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *