Jak obserwować zdarzenia na Twojej stronie dzięki Google Analytics?

  • Poziom trudności:

Zazwyczaj instalacja Google Analytics kojarzy się nam z podpięciem kodu śledzenia, który załatwia sprawę. Faktycznie to podstawowe działanie pozwalające na uzyskanie informacji o ilości sesji, odsłon, zachowania na witrynie czy czasu spędzanego na podstronach. Wystarczy jednak dokonać pewnych modyfikacji w linkach lub dodać pewien fragment kodu na stałe do wszystkich Twoich podstron, aby Google Analytics przekazało Ci jeszcze więcej danych.

Na początku sprawdź czy korzystasz z nowego kodu śledzenia Google Analytics (zwanego Analytics.js lub UA) czy ze starego ga.js. Aby dokonać sprawdzenia przejdź do miejsca gdzie został on umieszczony (możliwe że w header.php a jeśli tam go nie ma to możesz przeszukać źródło strony korzystając z kombinacji na Windowsie: Ctrl + U).

Jeśli kod będzie rozpoczynał się od:

<pre class="lang:js highlight:0 decode:true">  var _gaq = _gaq || [];

znaczy to, że to na Twojej stronie widnieje stary kod. Jeśli jednak pierwsza linijka kodu GA wygląda następująco:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

wtedy możesz mieć pewność, że Twoja strona korzysta z nowego kodu śledzenia. A skoro tak, to możesz umieścić kod śledzenia reagujący automatycznie z wszystkimi linkami wychodzącymi jak i ręczny kod do śledzenia plików do pobrania na Twojej stronie, bannerów reklamowych albo innych elementów. Na początku automatyka.

Automatyczne śledzenie linków do zewnętrznych serwisów

Aby śledzić każdy link kierujący do innej niż Twoja strona wystarczy przed znacznikiem </head> w sekcji Wygląd -> Edytor w pliku header.php wystarczy wkleić poniższy skrawek kodu:

<script type="text/javascript">
    function _gaLt(event) {

        /* If GA is blocked or not loaded then don't track */
        if (!ga.hasOwnProperty("loaded") || ga.loaded != true) {
            return;
        }

        var el = event.srcElement || event.target;

        /* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
        while (el && (typeof el.tagName == 'undefined' || el.tagName.toLowerCase() != 'a' || !el.href)) {
            el = el.parentNode;
        }

        /* if a link has been clicked */
        if (el && el.href) {

            var link = el.href;

            /* Only if it is an external link */
            if (link.indexOf(location.host) == -1 && !link.match(/^javascript\:/i)) {
                /* Is target set and not _(self|parent|top)? */
                var target = (el.target && !el.target.match(/^_(self|parent|top)$/i)) ? el.target : false;

                var hbrun = false; // tracker has not yet run

                /* HitCallback to open link in same window after tracker */
                var hitBack = function() {
                    /* run once only */
                    if (hbrun) return;
                    hbrun = true;
                    window.location.href = link;
                };

                /* If target opens a new window then just track */
                if (el.target && !el.target.match(/^_(self|parent|top)$/i)) {
                    ga(
                        "send", "event", "Linki wychodzace", link,
                        document.location.pathname + document.location.search
                    );
                } else {
                    /* send event with callback */
                    ga(
                        "send", "event", "Linki wychodzace", link,
                        document.location.pathname + document.location.search, {
                            "hitCallback": hitBack
                        }
                    );

                    /* Run hitCallback if GA takes too long */
                    setTimeout(hitBack, 1000);

                    /* Prevent standard click */
                    event.preventDefault ? event.preventDefault() : event.returnValue = !1;
                }
            }

        }
    }

    /* Attach the event to all clicks in the document after page has loaded */
    var w = window;
    w.addEventListener ? w.addEventListener("load", function() {
        document.body.addEventListener("click", _gaLt, !1)
    }, !1) : w.attachEvent && w.attachEvent("onload", function() {
        document.body.attachEvent("onclick", _gaLt)
    });
</script>

Ręczne śledzenie linków

Jeśli z jakichś powodów chcesz ręcznie ustawiać śledzenie linków, możesz to zrobić przy pomocy krótkiego kodu doklejonego do linka. Aby rozwiać wszelkie wątpliwości zobacz na poniższy link:

<a href="http://linkwychodzacy.pl" target="_blank">Tekst dla tego odnośnika</a>

Nie ma w nim niczego specjalnego. Ot zwyczajny link do zewnętrznego serwisu otwierany w nowej karcie. Dopiero po dodaniu dodatkowego elementu staje się superlinkiem, który można śledzić przy pomocy Google Analytics.

<a href="http://linkwychodzacy.pl" onclick="ga('send','event','Linki wychodzace','linkwychodzacy.pl')" target="_blank">Tekst dla tego odnośnika</a>

Analogicznie wyglądają linki kierujące do plików do pobrania z Twojej witryny. Poniżej przykład linka z plikiem .zip:

<a href="/wp-content/uploads/2016/02/plik.zip" onclick="ga('send','event','Do pobrania','plik.zip')" target="_blank">Tekst dla tego odnośnika</a>

Jak na pewno zauważyłeś od zwykłego linku różni się dopiskiem:

onclick="ga('send','event','Do pobrania','plik.zip')"

Śmiało możesz zmienić trzecią i czwartą nazwę podaną w tej linijce. Trzecią potraktuj jak katalog, a czwartą jako bezpośredni identyfikator pozwalający na zlokalizowanie klikniętego linka.

Gdzie znaleźć raporty dotyczące śledzonych linków?

Raporty znajdziesz w dwóch miejscach w Google Analytics:

na-zywo

Raport na żywo

zachowanie

Zachowanie -> Zdarzenia czyli raport z wybranego przedziału czasowego

UDOSTĘPNIJ