Obecnie 187 forumowiczów jest online
Obecnie 187 forumowiczów jest online
Przeanalizuj informacje ze swoich raportów i rozwiąż problemy z nimi związane.
Poprowadź mnie
star_border
Odpowiedz

Tagowanie elementów po najechaniu myszki

B
Student ✭ ✭

Witam wszystkich,

 

dzisiaj chciałbym spytać się was czy jest możliwość otagowania zdarzeniem zakładek z boku strony, które po najechaniu rozwijają się. W tym przypadku chodzi o opinie klientów (przykład na http://sklep.szykownydom.pl). Chciałbym dowiedzieć się ile osób w ogóle rozwija tą zakładkę, ale jedyne co udało mi się otagować to link, który znajduję się już w niej. 

Czy można np. otagować jakieś pole <div>, które wysłałoby zdarzenie, jeśli pojawi się w tym polu myszka.

Skądś mi coś świta, że można tagować komendę/komendą onMouseOver, ale przyznam się, że nie wiem do końca co, gdzie i w jaki sposób. 

 

Z góry dziękuję.

 

Pozdrawiam

Odpowiedź eksperta 2verified_user
2 ZAAKCEPTOWANYCH ROZWIĄZAŃ ()

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: B
września 2015

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
Profesjonalista ✭

Bartek,

 

  1. Usuń to onmouseover z div'a
  2. Na samym końcu tego kodu przed </script> (albo linijkę wyżej czyli przed })(); ) dodaj:
    $('oiTab').addEvents({
        mouseover: function(){
            ga('send', 'event', 'Okazje.info widget', 'Rozwinięcie', 'Widget boczny');
        }
    });
  3. Ciesz się wysyłanymi zdarzeniami Emotikon: Mrugający

Możesz też zastanowić się czy zdarzenie ma mieć wpływ na bounce rate tak jak pisał Tomasz i odpowiednio dodać sobie parametr nonInteraction

Wyświetl rozwiązanie w oryginalnym poście

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: B
września 2015

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
Wschodząca Gwiazda

Dodanie kodu onmouseover do elementu div też powinno działać. Kod powinien wyglądać tak:

 

<div id="oiTab" style="width:47px; height:169px; position:absolute; cursor: pointer; right:-48px; top:76px; background-color:#a18d9f;" onmouseover="ga('send', 'event', 'Okazje.info widget', 'Rozwinięcie', 'Widget boczny')">

 

Natomiast zwróć uwagę, że masz na stronie dwa kody GA - jeden Universal wstawiony na początku, a drugi klasyczny wstawiony na końcu.

W obu są podane różne identyfikatory usług. Kod śledzenia podany przez nas działa dla kodu Universal. Może po prostu patrzyłeś wcześniej nie na tą usługę w GA i dlatego nie widziałeś zdarzeń?

W Google Chrome łatwo sprawdzić, czy zdarzenie się wysyła. Po otworzeniu konsoli JavaScript (ctrl + shift + J) i przejściu na kartę Network po najechaniu myszą na element, do którego mamy przypisane zdarzenie widać jak następuje połączenie z www.google-analytics.com i są wysyłane dane.

Tomasz Ciepłucha

Wyświetl rozwiązanie w oryginalnym poście

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
Wschodząca Gwiazda

Witaj Bartosz,
 
zdarzenia możesz przypisywać praktycznie dowolnym czynnościom, które można zdefiniować za pomocą kodu javascript. 
Czyli może to być zarówno najechanie myszą na dowolny element, kliknięcie w coś, wkliknięcie się w pole formularza, dokonanie wyboru na liscie rozwijanej, czy nawet określony upływ czasu na danej stronie lub po wykonaniu określonej czynności.
 
W Twoim konkretnym przypadku jak najbardziej możesz przypisać zdarzenia do najechania myszą na zakładki menu, które się rozwijają.
 
Wystarczy, że do tych konkretnych zakładek (do kodu html) podczepisz kod javascript np. taki:
onmouseover="ga('send', 'event', 'menu', 'mouseover', 'nazwa_zakładki_menu')"
 
Spowoduje to wysłanie do GA zdarzenia, które zostanie odnotowane w kategorii "menu", z akcją "mouseover" oraz etykietą "nazwa_zakładki_menu".
 
Oczywiście w miejsce nazwa_zakładki_menu dla poszczególnych zakładek, które chcesz monitorować wstawiasz ich nazwy.
 
Musisz pamiętać, że domyślnie wykonanie zdarzenia ma wpływ na współczynnik odrzuceń. Czyli jeżeli ktoś wejdzie na stronę i najedzie myszką na dany element menu, który spowoduje wysłanie zdarzenia, ale nie kliknie w ten element i wyjdzie ze strony nie przechodząc nigdzie dalej jego czas wizyty będzie wynosił 0, ale współczynnik odrzuceń również będzie 0.
 
Jeśli nie chcesz, by zdarzenie miało wpływ na współczynnik odrzuceń możesz wysyłając zdarzenie dodać parametr:
{'nonInteraction': 1}
 
czyli będzie to wyglądać tak:
onmouseover="ga('send', 'event', 'menu', 'mouseover', 'nazwa_zakładki_menu',{'nonInteraction': 1})"
 
Więcej o śledzeniu zdarzeń znajdziesz tutaj:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=pl

Tomasz Ciepłucha

Dot.: Tagowanie elementów po najechaniu myszki

B
Student ✭ ✭

Rozumiem, czyli jest nadzieja. Tylko teraz chciałbym się dowiedzieć dodatkowo.

 

Czy mogę onmouseover="ga('send', 'event', 'menu', 'mouseover', 'nazwa_zakładki_menu')" dodać do komendy <div>? Bo na początku dodałem tą składnię do javascript, ale to nie zadziałało, później do div i nadal nic, więc pytanie moje brzmi, do jakiego znacznika html mogę dodać to by analytics zczytał to jako odpowiednie zdarzenie na stronie.

 

Pozdrawiam Emotikon: Szczęśliwy

Dot.: Tagowanie elementów po najechaniu myszki

Wschodząca Gwiazda
Możesz dodać to do div'a. Może wstawiałeś kod w niewłaściwym miejscu?
Jaki konkretnie element chcesz monitorować?
Najlepiej napisz (wklej) dokładny fragment kodu ze swojej strony odpowiadający temu elementowi, dla którego chcesz by następowało zdarzenie po najechaniu myszą.
Tomasz Ciepłucha

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
B
Student ✭ ✭

Dobrze, a więc mam na mojej stronie widget, który prezentuję opinie moich klientów. Chciałbym dowiedzieć się ile osób go rozsuwa. 

 

Kod:

<div id="oiOpinionWidget" style="width:238px; min-height:271px; position:fixed; left:-260px; top:150px; padding:17px 10px; background-color:white; border:1px solid #d8d8d8; font-family:Verdana, sans-serif; font-size:11px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; z-index:2147483647;">
<!--[if gte IE 9]>
<style type="text/css" scoped>
#oiOpinionWidget * {filter:none !important;}
</style>
<![endif]-->
<!--[if lte IE 8]>
<style type="text/css" scoped>
#oiOpinionWidget .corner {display:block !important;}
</style>
<![endif]-->
<div id="oiTab" style="width:47px; height:169px; position:absolute; cursorEmotikon: Językointer; right:-48px; top:76px; background-color:#a18d9f;" onmouseover="ga('send', 'event', 'Widget', 'Cały-serwis', 'opinie|onmouseover')">
<div style="width:15px; height:128px; margin-top:21px; margin-left:19px; background:url('http://szykownydom.pl/widget/oiOpinion.png');"></div>
<div style="width:12px; height:100%; position:absolute; left:0; top:0; background:#a18d9f; background:-moz-linear-gradient(left, #7c6d7a 0%, #a18d9f 100%); background:-webkit-gradient(linear, left top, right top, color-stop(0%,#a18d9f), color-stop(100%,#7c6d7a)); background:-webkit-linear-gradient(left, #7c6d7a 0%,#a18d9f 100%); background:-o-linear-gradient(left, #7c6d7a 0%,#a18d9f 100%); background:-ms-linear-gradient(left, #7c6d7a 0%,#a18d9f 100%); background:linear-gradient(to right, #7c6d7a 0%,#a18d9f 100%); filterEmotikon: JęzykrogidEmotikon: Bardzo szczęśliwyXImageTransform.Microsoft.gradient(startColorstr='#a18d9f', endColorstr='#7c6d7a',GradientType=1) !important;"></div>
<div style="position:absolute; right:-10px; top:0; width:10px; height:169px; background:url('http://szykownydom.pl/widget/oiOpinion.png') -184px 0;"></div>
</div>
<div style="padding:0 9px 0 11px; overflow:auto;">
<a style="float:left; font-size:0;" href="http://okazje.info.pl/sklep-internetowy/sklep-szykownydom-pl/" target="_blank" onClick="_gaq.push(['_trackEvent', 'Widget', 'Cały-serwis', 'opinie|click']);">
<img style="width:104px; height:40px;" alt="Opinie o Szykowny Dom w Okazje.info" src="http://images.okazje.info.pl/s/104/sklep-szykownydom-pl.png"/>
<div style="float:right; width:75px; height:31px; margin:7px 0 0 39px; background:url('http://szykownydom.pl/widget/oiOpinion.png') -98px -34px;"></div>
</a>
</div>
<div id="oiLoading" style="text-align:center; margin-top:20px;">Pobieranie danych...</div>
</div>
<script type="text/javascript">
(function() {
var oiW = document.createElement('script'); oiW.type = 'text/javascript'; oiW.async = true;
oiW.src=('https:' == document.location.protocol ? 'https://' : 'http://')
+ 'widgets.okazje.info.pl/c2tsZXAtc3p5a293bnlkb20tcGwsMSwxLDAsMCwwLDA=/oiOpinionWidget.js';
document.getElementsByTagName('head')[0].appendChild(oiW);
})();
</script>

 

Kod, który poleciłeś mi dodać dodałem w pierwszym znaczniku elementu, który trzeba najechać na stronie by w ogóle rozsunął się ten widget, ale to nie za działało. Wyżej zamieściłem cały kod odpowiadający za ten element. Może w takim razie jakoś umieścić go w <script>?

 

Pozdrawiam

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: B
września 2015

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
Profesjonalista ✭

Bartek,

 

  1. Usuń to onmouseover z div'a
  2. Na samym końcu tego kodu przed </script> (albo linijkę wyżej czyli przed })(); ) dodaj:
    $('oiTab').addEvents({
        mouseover: function(){
            ga('send', 'event', 'Okazje.info widget', 'Rozwinięcie', 'Widget boczny');
        }
    });
  3. Ciesz się wysyłanymi zdarzeniami Emotikon: Mrugający

Możesz też zastanowić się czy zdarzenie ma mieć wpływ na bounce rate tak jak pisał Tomasz i odpowiednio dodać sobie parametr nonInteraction

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: B
września 2015

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
Wschodząca Gwiazda

Dodanie kodu onmouseover do elementu div też powinno działać. Kod powinien wyglądać tak:

 

<div id="oiTab" style="width:47px; height:169px; position:absolute; cursor: pointer; right:-48px; top:76px; background-color:#a18d9f;" onmouseover="ga('send', 'event', 'Okazje.info widget', 'Rozwinięcie', 'Widget boczny')">

 

Natomiast zwróć uwagę, że masz na stronie dwa kody GA - jeden Universal wstawiony na początku, a drugi klasyczny wstawiony na końcu.

W obu są podane różne identyfikatory usług. Kod śledzenia podany przez nas działa dla kodu Universal. Może po prostu patrzyłeś wcześniej nie na tą usługę w GA i dlatego nie widziałeś zdarzeń?

W Google Chrome łatwo sprawdzić, czy zdarzenie się wysyła. Po otworzeniu konsoli JavaScript (ctrl + shift + J) i przejściu na kartę Network po najechaniu myszą na element, do którego mamy przypisane zdarzenie widać jak następuje połączenie z www.google-analytics.com i są wysyłane dane.

Tomasz Ciepłucha

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
Profesjonalista ✭

Tomasz nie wnikałem w szczegóły ale przetestowałem na jednym sklepie który działa na shoper i ma ten widget z okazje i... o dziwo dodanie onmouseover do diva nie wysyłało zdarzeń a ten kawałek kodu js działał poprawnie.
Tak jak napisałem już nie zgłębiałem dlaczego nie działało onmouseover (podejrzewam że dlatego, że js z okazje info robi coś z tym divem ale trzeba by to sprawdzić).

 

--- edit ---

na potwierdzenie kawałek kodu z okazje.info:

document.getElementById ("oiTab").onmouseover = function(e) {....

 jak widać to co ustalimy w DOM zostaje nadpisane dlatego nasza funkcja onmouseover nigdy nie zostanie wykonana Emotikon: Mrugający

---


Ten kawałek kodu oparty na mootools (bo z tej biblioteki korzysta shoper) działa bezproblemowo.

Dot.: Tagowanie elementów po najechaniu myszki

Wschodząca Gwiazda
Wiem, że to mootools, bo doszukałem się w kodzie strony zlinkowanej biblioteki mootools.js pod inną nazwą pliku. Ja osobiście akurat preferuję jQuery i też nie wstawiam kodu do śledzenia zdarzeń wewnątrz elementów html'owych - jednak jestem przekonany, że w tym konkretnym przypadku powinno to też zadziałać.

Jak odczepiłem poprzez konsolę za pomocą metody removeEvent to co zostało przypisane to po najechaniu myszą nic się nie działo, a jak dodałem onmouseover do diva to zdarzenie było znów wysyłane.
Tomasz Ciepłucha

Dot.: Tagowanie elementów po najechaniu myszki

Wschodząca Gwiazda
No to wszystko jasne Emotikon: Szczęśliwy
Tomasz Ciepłucha

Dot.: Tagowanie elementów po najechaniu myszki

B
Student ✭ ✭
Super dzięki Panowie, tak jak napisaliście wszystko pięknie działa i spływa do GA. Emotikon: Szczęśliwy
Faktycznie wszystko było ok, tylko do innego widoku spływało. Zostawiłem w końcu w skrypcie.

To takie na szybko jeszcze dwa krótkie pytania, bo w tym momencie faktycznie mam dwa kody śledzące. Chciałem przesiąść się na UA, ale kod śledzenia ecommerce w oprogramowaniu Shopera zawodzi i nie chce przenieść mi zmiennych do Google Analytics.

Stąd pytanie do @Marcin S: Czy wiesz może w jaki sposób powinny być skonfigurowane zmienne w podsumowaniu zamówienia? Ceny z podatkiem/bez, opłata za wysyłkę wszystko pięknie spływa, a gdy dochodzi do ilości, nazw, kategorii to wyskakuje (not set).

Oraz drugie pytanie to:
Czy można w jednym znaczniku np. <a> dodać dwa kody śledzące zdarzenia (GA i UA), bo w tym momencie mam oba zainstalowane w script i to działa, a gdy dodałem do znacznika to już nie wysłało do raportu UA tylko do jednego.

Dot.: Tagowanie elementów po najechaniu myszki

Profesjonalista ✭

1: jak to masz teraz zrobione? wklejasz swój kod w panelu w integracjach własnych? modyfikujesz pliki? może pokażesz jaki kod masz teraz to podpowiem.

 

2: możesz wysyłać do GA i UA 

<a href="/jakis-url" onclick="_gaq.push([...]);ga('send', '..', ..);">link</a>

 

Dot.: Tagowanie elementów po najechaniu myszki

[ Edytowane ]
B
Student ✭ ✭

Tak w integracjach własnych mam wklejony kod:

 

<script type="text/javascript">
ga('create', 'UA-47193820-3');
ga('send', 'pageview');
ga('require', 'ecommerce', 'ecommerce.js'); // Wczytanie wyczki e-commerce.
ga('ecommerce:addTransaction', {
  'id': '{order_id}',                     // Transaction ID. Required.
  'affiliation': 'https://sklep.szykownydom.pl',   // Affiliation or store name.
  'revenue': '{sum}',               // Grand Total.
  'shipping': '{shipping_cost}',                  // Shipping.
  'tax': '{tax_noship}'                     // Tax.
});
ga('ecommerce:addItem', {
  'id': '{order_id}',                     // Transaction ID. Required.
  'name': '{products}{products.name}{/products}',    // Product name. Required.
  'sku': '{products}{products.code}{/products}',                 // SKU/code.
  'category': '{products}{products.category}{/products}',         // Category or variation.
  'price': '{products}{products.amount}{/products}',                 // Unit price.
'quantity': '{products}{products.quantity}{/products}'                   // Quantity.
});
ga('ecommerce:send'); // Wyślij dane transakcji i elementów do Google Analytics.
</script>

 

 

I tak już wcześniej pisałem, wysyła on ceny itp. czyli tak jakby tą pierwszą część wykonywał, ale miał problem z wysyłaniem drugiej.

Na początku dałem wszystkie zmienne np.: {products.name} itp. bez znaczników przed i po {products}. Wtedy w GA pokazywało się (not set). W tym momencie dodałem przed zmiennymi {products} i w GA pokazują się jakieś dziwne liczby: [302,1], 

 

Jeśli chodzi o podpunkt 2 to dodałem jak powiedziałeś i wszystko działa.

Dzięki Emotikon: Szczęśliwy

Dot.: Tagowanie elementów po najechaniu myszki

Profesjonalista ✭

Może tak:

<script type="text/javascript">
ga('create', 'UA-47193820-3');
ga('send', 'pageview');
ga('require', 'ecommerce', 'ecommerce.js'); // Wczytanie wyczki e-commerce.
ga('ecommerce:addTransaction', {
  'id': '{order_id}',                     // Transaction ID. Required.
  'affiliation': 'https://sklep.szykownydom.pl',   // Affiliation or store name.
  'revenue': '{sum}',               // Grand Total.
  'shipping': '{shipping_cost}',                  // Shipping.
  'tax': '{tax_noship}'                     // Tax.
});

{products}
ga('ecommerce:addItem', {
  'id': '{order_id}',           // Transaction ID. Required.
  'name': '{products.name}',    // Product name. Required.
  'sku': '{products.code}',     // SKU/code.
  'category': '{products.category}', // Category or variation.
  'price': '{products.amount}',      // Unit price.
'quantity': '{products.quantity}'    // Quantity.
});
{/products}

ga('ecommerce:send'); // Wyślij dane transakcji i elementów do Google Analytics.
</script>

 

Dot.: Tagowanie elementów po najechaniu myszki

B
Student ✭ ✭
Niestety, ale taki sposób znów powoduje, że nie spływają do GA odpowiednie raporty (cały czas brak nazw, kategori, sku i ilości). Choć ogólnie to dziwne, ponieważ na stronie dziękującej za zakupy sprawdziłem jak skrypt sklepu wkleił dane w źródle i wszystko było dobrze.
Tak jakby był problem z przekazywaniem danych zawartych do GA.
Czy można sprawdzić czy dane te są zawarte w ciastku?

Może widzicie Panowie jakieś inne pomysły na rozwiązanie tego problemu?