Analityka internetowa

Wywołania zwrotne w Google Analytics

0 napisany przez Bogusław Wójcik, , 30 października 2013

Pod koniec marca bieżącego roku Google udostępniło najnowszą odsłonę swojego skryptu Google Analytics wprowadzającą między innymi wywołania zwrotne. Do czego służą oraz jak poprawnie ich używać?

Google Analytics jest dzisiaj niewątpliwie podstawowym narzędziem do zbierania i przetwarzania danych na temat ruchu generowanego przez strony internetowe. Już samo zainstalowanie skryptu w domyślnej postaci będzie w zupełności wystarczało dla celów ogólnej analizy ruchu i badania konwersji. Jeżeli jednak nasza witryna posiada elementy interaktywne takie jak formularze kontaktowe, inne przyciski funkcjonalne lub ważne odsyłacze do plików i zewnętrznych witryn, to najprawdopodobniej będziemy również chcieli zliczać oraz analizować kliknięcia użytkowników powiązane z nimi. Niestety, w wielu przypadkach proste dodanie wywołania Google Analytics do zdarzenia kliknięcia (np. za pomocą atrybutu HTML onclick) nie przyniesie pożądanych rezultatów. Dlaczego tak się dzieje?

Przerwanie wywołania asynchronicznego

Wyobraźmy sobie standardowy formularz w którym po kliknięciu przycisku „Wyślij” strona zostaje przeładowana. Za pomocą atrybutu HTML onclick dodajemy wywołanie śledzenia zdarzenia Google Analytics (ga.js) do przycisku „Wyślij”.

<form>
    <label>Podaj imię i nazwisko:</label>
    <input type="text" name="imie" />
    <input type="text" name="nazwisko" />
    <button type="submit" onclick="_gaq.push(['_trackEvent', 'Formularze', 'Wyślij', 'Formularz osobowy']);">Wyślij</button>
</form>

Niestety powyższe rozwiązanie nie przyniesie pożądanych rezultatów. Dzieje się tak, ponieważ skrypt Google Analytics działa na zasadzie wywołań asynchronicznych, czyli akcji działających transparentnie w tle poza kolejką wykonywanych operacji.

W momencie kliknięcia przycisku „Wyślij” jednocześnie uruchamiane są dwie akcje: dodane przez nas asynchroniczne wywołanie Google Analytics oraz domyślna akcja wysłania formularza z przeładowaniem strony. Ponieważ wywołanie Google Analytics jest akcją rozłożoną w czasie, natychmiastowe wysłanie formularza przerwie wykonywanie wszystkich skryptów na stronie, w tym wywołanie Google Analytics, w rezultacie czego kliknięcie użytkownika nie odłoży się w statystykach.

Z podobną sytuacją mamy do czynienia w przypadku bezpośrednich odsyłaczy do plików otwieranych w przeglądarce (np. katalog produktów w formacie PDF), zewnętrznych witryn, a w przypadku urządzeń mobilnych również przycisków skojarzonych z akcjami systemowymi, takimi jak wybór numeru telefonu czy uruchomienie zainstalowanej aplikacji do nawigacji. W jaki sposób poradzić sobie z tym problemem?

Wywołanie z opóźnieniem

Jednym z najprostszych rozwiązań jest zastosowanie wywołania z opóźnieniem. Za pomocą JavaScript blokujemy wykonanie domyślnej akcji powiązanej z klikniętym elementem, następnie wywołujemy interesującą nas metodę Google Analytics oraz ostatecznie wykonujemy zablokowaną akcję elementu z około jedno- lub dwu-sekundowym opóźnieniem. Przykładowe rozwiązanie z użyciem biblioteki jQuery może wyglądać następująco:

<a id="odsylacz" href="naszKatalog.pdf">Nasz katalog</a>
<script>
    // Przypisujemy własną funkcję do zdarzenia kliknięcia w odsyłacz
    $('#odsylacz').click(function(event) {
        // Blokujemy wykonanie domyślnej akcji odsyłacza	
        event.preventDefault();
        // Pobieramy adres odsyłacza
        var adres = $(this).attr('href');
        // Wywołujemy śledzenie wirtualnego adresu
        _gaq.push(['_trackPageview', '/wirtualnyAdres.html']);
        // Opóźniamy wywołanie własnej funkcji
        setTimeout(function() {
            // Wywołujemy adres odsyłacza
            window.location = adres;
        }, 2000);
    });
</script>

Pomimo swojej prostoty, powyższe rozwiązanie cechuje brak elegancji oraz zawodność. Nikt nie jest w stanie zagwarantować nam, że asynchroniczne wywołanie Google Analytics zostanie zakończone pomyślnie w ciągu dwóch sekund, jeżeli na przykład mamy chwilowy spadek jakości sygnału na urządzeniu mobilnym podczas jazdy pociągiem. Natomiast brak elegancji przejawia się w zauważalnym opóźnieniu reakcji naszej witryny. Czy istnieje lepszy sposób rozwiązania tego problemu?

Wywołania zwrotne

Najnowsza odsłona Google Analytics (analytics.js) wprowadza między innymi możliwość stosowania wywołań zwrotnych, które w znakomity sposób ułatwiają śledzenie kłopotliwych zdarzeń na naszej witrynie internetowej. W trakcie wywoływania interesującej nas metody Google Analytics wystarczy zadeklarować własną funkcję, która uruchomiona zostanie dopiero gdy nasze zdarzenie lub wirtualny adres zostaną poprawnie zliczone w statystykach. Przykładowe rozwiązanie z użyciem biblioteki jQuery może wyglądać następująco:

<a id="odsylacz" href="naszKatalog.pdf">Nasz katalog</a>
<script>
    // Przypisujemy własną funkcję do zdarzenia kliknięcia w odsyłacz
    $('#odsylacz').click(function(event) {
        // Blokujemy wykonanie domyślnej akcji odsyłacza	
        event.preventDefault();
        // Pobieramy adres odsyłacza
        var adres = $(this).attr('href');
        // Wywołujemy śledzenie wirtualnego adresu
        ga('send', 'pageview', {
            'page': '/wirtualnyAdres.html',
             // Deklarujemy funkcję zwrotną
            'hitCallback': function() {
                window.location = adres;
            }
        });
    });
</script>

Coś za coś

Powyższe rozwiązanie jest niewątpliwie eleganckim sposobem na upewnienie się, że statystyki zliczane są poprawnie i bez uciążliwego opóźnienia w działaniu naszej strony. Nie jest ono jednak w pełni niezawodne. W rzadkich przypadkach internauta odwiedzający naszą witrynę może mieć zainstalowane wtyczki blokujące reklamy i skrypty śledzące, w tym również Google Analytics.

Nasza witryna może też być przeglądana w trybie offline bez aktywnego połączenia z internetem lub wreszcie połączenie z serwerem Google może się z różnych przyczyn w danej chwili nie udać.

W takich przypadkach powyżej przedstawione rozwiązanie nie tylko nie spełni swojego zadania, ale również poskutkuje całkowitym zablokowaniem funkcjonalności odsyłacza. Stanie się tak, ponieważ nasz skrypt będzie próbował odwoływać się do zablokowanych fragmentów kodu lub też czekać będzie na odpowiedź serwera Google, która nigdy nie nastąpi. Ponieważ nie jesteśmy w stanie z poziomu JavaScript wyeliminować wszystkich powyższych scenariuszy, jedynym sposobem na zabezpieczenie przed taką sytuacją jest zastosowanie funkcji awaryjnej uruchamianej z opóźnieniem.

<a id="odsylacz" href="naszKatalog.pdf">Nasz katalog</a>
<script>
   // Deklarujemy flagę odsyłacza jako zmienną globalną
   var flaga = false;
   $('#odsylacz').click(function(event) {
        event.preventDefault();
        var adres = $(this).attr('href');
        // Deklarujemy funkcję awaryjną z opóźnieniem
        setTimeout(function() {
            // Sprawdzamy czy funkcja zwrotna nie została już wykonana
            if (flaga === false) {
                // Awaryjnie wywołujemy adres odsyłacza
                window.location = adres;
            }
        }, 2000);
        ga('send', 'pageview', {
            'page': '/wirtualnyAdres.html',
            'hitCallback': function() {
                // Oznaczamy flagę wykonania funkcji zwrotnej
                flaga = true;
                window.location = adres;
            }
        });
    });
</script>

A co z ga.js?

Okazuje się, że w jednej z aktualizacji Google zaimplementowało wywołania zwrotne również w starej wersji skryptu Google Analytics (ga.js). Podstawowa różnica w użyciu polega na tym, że funkcję zwrotną definiujemy globalnie dla całego obiektu Google Analytics. Każde wywołanie metody zliczającej uruchomi globalnie zdefiniowaną funkcję zwrotną. Dlatego dobrą praktyką jest każdorazowe jej kasowanie.

Dowiedz się jak, wdrożyć nową wersję GA4 i zarządzać jej ustawieniami.

Umów się na bezpłatną wycenę!

<a id="odsylacz" href="naszKatalog.pdf">Nasz katalog</a>
<script>
    var flaga = false;
    $('#odsylacz').click(function(event) {
        event.preventDefault();
        var adres = $(this).attr('href');
        setTimeout(function() {
            if (flaga === false) {
                window.location = adres;
            }
        }, 2000);
        // Deklarujemy globalną funkcję zwrotną
        _gaq.push(['_set', 'hitCallback', function() {
                // Usuwamy funkcję zwrotną
                _gaq.push(['_set', 'hitCallback', function() {
                        return false;
                    }]);
                // Oznaczamy flagę wykonania funkcji zwrotnej
                flaga = true;
                // Wywołujemy adres odsyłacza
                window.location = adres;
            }]);
        // Wywołujemy śledzenie zdarzenia
        _gaq.push(['_trackEvent', 'Katalogi', 'Oglądaj', 'Nasz Katalog']);
    });
</script>

Uwaga! Opcja hitCallback nie jest oficjalnie wspierana w starej wersji Google Analytics (ga.js).

Rate this post

Polecamy również: