Autorem tekstu jest Maciek Stanasiuk – Junior Web Analyst & Piotr Kosiński – Paid Search Manager z firmy Bluerank, z którą współpracujemy na co dzień. Warto zapoznać się z ofertą SEM na stronie www.bluerank.pl
Posiadasz sklep internetowy lub stronę i nie masz możliwości dodania zdarzeń Google Analytics poprzez edycję kodu strony? Podpowiadamy Wam 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 niemu możemy określić, ile osób zapisuje się do newslettera, który banner ma najwyższy CTR oraz jak sprawnie działa nawigacja. Zazwyczaj wdrożenie tego typu opiera się na przesłaniu do GA zdarzeń z wykorzystaniem JavaScriptowej funkcji onClick.
Niestety nie zawsze system CMS, na którym oparta jest strona umożliwia, edycję kodu HTML. Na szczęście są dwa wyjścia. Możemy przygotować własny kod, który wepniemy w 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:
$(’img’).click(function(){
//umieszczony tutaj kod pozwoli mierzyć zdarzenia kliknięć w wszystkie obrazki na stronie
});
$(’#logo’). click(function(){
//umieszczony tutaj kod pozwoli mierzyć zdarzenia kliknięć w element o id „logo”
});
$(’.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ęć na banner, posiadający klasę „slider” wygląda następująco:
$(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 jednak pamiętać 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. 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.
Statystyki Twojej strony nie są zadowalające? Skorzystaj z bezpłatnej wyceny pozycjonowania: https://home.pl/reklama-internetowa/pozycjonowanie/
