22 stycznia 2014

Śledzenie zdarzeń w Google Analytics w sytuacjach bez wyjścia

Masz swoją stronę WWW lub sklep internetowy i nie masz możliwości dodania zdarzeń Google Analytics poprzez edycję kodu strony? Podpowiadamy jak skutecznie umieścić kod w panelu administracyjnym.

Śledzenie kliknięć w poszczególne elementy na stronie jest jednym z podstawowych elementów prawidłowego wdrożenia Google Analytics. Dzięki temu możemy określić, ile osób zapisuje się na listę subskrybentów newslettera, który banner ma najwyższy CTR oraz jak sprawnie działa nawigacja w naszym serwisie. Zazwyczaj tego typu wdrożenie opiera się na przesłaniu do GA zdarzeń z wykorzystaniem JavaScriptowej funkcji onClick.

Niestety, nie zawsze system CMS, na którym oparta jest dana strona internetowa, umożliwia edycję kodu HTML. Na szczęście są z tej sytuacji dwa wyjścia. Możemy przygotować własny kod, który wepniemy w <head>  strony, co umożliwiają nawet zamknięte CMSy, albo wykorzystać Google Tag Managera, ale to już temat na oddzielny artykuł.

W naszym przykładzie kodu oparliśmy się na jQuery, który w porównaniu do standardowego JavaScripta, zdecydowanie upraszcza cały proces. Na początku należy upewnić się, że kod został wczytany dopiero po załadowaniu całego dokumentu. Pomoże nam w tym funkcja:

$(document).ready(function() {
//kod wykonany po wczytaniu całej strony

});

Za pomocą kodów łatwo możemy dodać zdarzenia do każdego elementu na stronie. Oto kilka prostych przykładów, które dodają zdarzenia onclick dla danych elementów...

Pierwszy

​$('img').click(function(){
//umieszczony tutaj kod pozwoli mierzyć zdarzenia kliknięć w wszystkie obrazki na stronie

});​​

drugi

​$('#logo')​. click(function(){
//umieszczony tutaj kod pozwoli mierzyć zdarzenia kliknięć w element o id "logo"

});​​

trzeci

$('.menu')​. click(function(){
//umieszczony tutaj kod pozwoli mierzyć kliknięcia we wszystkie elementy zawierające klasę "menu"

});​​

Przykład kodu, którego zadaniem jest śledzenie w Universal Analytics kliknięć w banner posiadający klasę "slider":

$(document).ready(function() {
               $('.slider').click(function() {
                              ga('send','event','Banner','Wejście');
});

});

A dla kodu wykonanego po załadowaniu strony, tak:

$(document).ready(function() {
               $('.banner').click(function() {
                              _gaq.push(['_trackEvent','Banner','Wejście']);
});

});

Po przygotowaniu odpowiedniego pliku wystarczy zapisać go w formacie .js i podlinkować go w nagłówku strony za pomocą <script>. Należy pamiętać jednak o tym, że korzystając z jQuery konieczne jest podlinkowanie również odpowiedniej biblioteki. Wszystkich chcących bliżej zapoznać się z jQuery zachęcamy do przeczytania oficjalnej dokumentacji.

Jak można zauważyć, wdrożenie prostych zdarzeń wcale nie musi być trudne, a może dostarczyć bardzo wartościowych informacji o naszej stronie internetowej. W tekście podaliśmy typowy przykład podpinania zdarzeń. Każda strona internetowa czy sklep, ze względu na budowę i funkcjonalność, wymaga indywidualnego podejścia. Proponujemy więc przeprowadzenie własnych testów i czekamy na Wasze wyniki.

--
Maciek Stanasiuk – Junior Web Analyst
Piotr Kosiński – Paid Search Manager


Udostępnij:

Etykiety: , ,


do góry

0 komentarzy:

Prześlij komentarz