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:

Napsat komentář

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

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..