Obecnie 215 forumowiczów jest online
Obecnie 215 forumowiczów jest online
Tutaj możesz rozmawiać na następujące tematy: zarządzanie kontem Analytics, przywracanie konta, ustawianie hierarchii kont, rozbieżności danych między AdWords a Analytics, łączenie AdWords z Analytics, importowanie celów e-commerce do AdWords, ustawienia remarketingu.
Poprowadź mnie
star_border
Odpowiedz

GTM Zliczanie kliknięć w blok div

Nowicjusz ✭

Witam serdecznie,

Proszę o pomoc, GTM ma zliczać przejścia z serwisu do sklepów zawierające w url: /site/redirect/ - to mam już  skonfigurowane, ale jest problem.  W jaki sposób ustawić w panelu GTM zliczanie kliknięć w podlinkowany blok <div>?

Przykład: http://market.pl/damskie-japonki-do-50-zl_k_438.html

 

Odpowiedź eksperta 1verified_user
1 ZAAKCEPTOWANE ROZWIĄZANIE

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez: Piotr Kazana (Community Manager)
marca 2016

Dot.: GTM Zliczanie kliknięć w blok div

Wschodząca Gwiazda

Cześć Paweł.

 

Rozumiem, że chcesz wysyłać do GA zdarzenia jeśli ktoś kliknie na stronie na produkt, a po kliknięciu zostanie przeniesiony na zewnętrzną stroną (tak jakby kliknął w link z przekierowaniem /site/redirect/product/xxx?url=yyy)?

 

Jeżeli to chcesz zrobić to najszybciej to osiągniesz poprzez drobną modyfikację kodu javascript. W pliku http://market.pl/js/main.js znajduje się fragment kodu odpowiedzialny za przeniesienie użytkownika albo na stronę ze szczegółami produktu, albo na stronę zewnętrzną.


Ten kod wygląda tak:


$(document).on('click', '.item-wrapper', function(e){
e.stopPropagation();
e.stopImmediatePropagation();
var link = $(this).find('a.open-new');
if (link.hasClass('open-new')) {

dataLayer.push({"event": "outboundClick"});
window.open(link.attr('href'));
return false;
} else {
var link = $(this).find('a.open-local');
window.location = link.attr('href');
}
});

 

Linijkę, którą musisz dopisać zaznaczyłem na czerwono.

Spowoduje to przesłanie do GTM niestandardowego zdarzenia o nazwie outboundClick.

 

Teraz wystarczy, że utworzysz nową regułę na podstawie tego zdarzenia niestandardowego, która to będzie odpalać Twój tag Google Analytics przesyłający zdarzenie.

 

Jeżeli dodatkowo chcesz w tagu przesyłającym zdarzenie mieć np. identyfikator produktu to musisz zrobić następujące rzeczy:

 

1. za pomocą następującej funkcji wydobyć z URL'a id produktu:

var product_id = link.attr('href').split("/")[4].split("?")[0];

 

2. przekazać id produktu wraz ze zdarzeniem:

dataLayer.push({"event": "outboundClick", "product_id": product_id});

 

3. Utworzyć w GTM zmienną wartswy danych product_id, którą następnie wstawisz jako dynamiczną wartość etykiety lub akcji w tagu Analytics przesyłającym zdarzenie (wpisując {{product_id}} )

 

Kod zatem po modyfikacji będzie wyglądał tak:

 

$(document).on('click', '.item-wrapper', function(e){
e.stopPropagation();
e.stopImmediatePropagation();
var link = $(this).find('a.open-new');
if (link.hasClass('open-new')) {

var product_id = link.attr('href').split("/")[4].split("?")[0];

dataLayer.push({"event": "outboundClick", "product_id": product_id});
window.open(link.attr('href'));
return false;
} else {
var link = $(this).find('a.open-local');
window.location = link.attr('href');
}
});

 

Ewentualnie zamiast 

var product_id  = link.attr('href').split("/")[4].split("?")[0];

można użyć:

var product_id  = link.attr('href').match(/([0-9])+/)[0];

 

Najbezpieczniej jednak by było, gdyby id produktu było wstawione jako jakiś atrybut w linku.

 

Czyli zamiast linku w postaci:

<a rel="nofollow" href="/site/redirect/product/554614?url=....." target="_new" class="open-new">

byłby na stronie:

<a rel="nofollow" href="/site/redirect/product/554614?url=....." target="_new" class="open-new" data-product_id="554614">

 

Wówczas nawet gdy zmieni się schemat linków parametr product_id będzie można łatwo pobrać w następujący sposób:

var product_id  = link.attr('data-product_id');

 

 

Tomasz Ciepłucha

Wyświetl rozwiązanie w oryginalnym poście

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez: Piotr Kazana (Community Manager)
marca 2016

Dot.: GTM Zliczanie kliknięć w blok div

Wschodząca Gwiazda

Cześć Paweł.

 

Rozumiem, że chcesz wysyłać do GA zdarzenia jeśli ktoś kliknie na stronie na produkt, a po kliknięciu zostanie przeniesiony na zewnętrzną stroną (tak jakby kliknął w link z przekierowaniem /site/redirect/product/xxx?url=yyy)?

 

Jeżeli to chcesz zrobić to najszybciej to osiągniesz poprzez drobną modyfikację kodu javascript. W pliku http://market.pl/js/main.js znajduje się fragment kodu odpowiedzialny za przeniesienie użytkownika albo na stronę ze szczegółami produktu, albo na stronę zewnętrzną.


Ten kod wygląda tak:


$(document).on('click', '.item-wrapper', function(e){
e.stopPropagation();
e.stopImmediatePropagation();
var link = $(this).find('a.open-new');
if (link.hasClass('open-new')) {

dataLayer.push({"event": "outboundClick"});
window.open(link.attr('href'));
return false;
} else {
var link = $(this).find('a.open-local');
window.location = link.attr('href');
}
});

 

Linijkę, którą musisz dopisać zaznaczyłem na czerwono.

Spowoduje to przesłanie do GTM niestandardowego zdarzenia o nazwie outboundClick.

 

Teraz wystarczy, że utworzysz nową regułę na podstawie tego zdarzenia niestandardowego, która to będzie odpalać Twój tag Google Analytics przesyłający zdarzenie.

 

Jeżeli dodatkowo chcesz w tagu przesyłającym zdarzenie mieć np. identyfikator produktu to musisz zrobić następujące rzeczy:

 

1. za pomocą następującej funkcji wydobyć z URL'a id produktu:

var product_id = link.attr('href').split("/")[4].split("?")[0];

 

2. przekazać id produktu wraz ze zdarzeniem:

dataLayer.push({"event": "outboundClick", "product_id": product_id});

 

3. Utworzyć w GTM zmienną wartswy danych product_id, którą następnie wstawisz jako dynamiczną wartość etykiety lub akcji w tagu Analytics przesyłającym zdarzenie (wpisując {{product_id}} )

 

Kod zatem po modyfikacji będzie wyglądał tak:

 

$(document).on('click', '.item-wrapper', function(e){
e.stopPropagation();
e.stopImmediatePropagation();
var link = $(this).find('a.open-new');
if (link.hasClass('open-new')) {

var product_id = link.attr('href').split("/")[4].split("?")[0];

dataLayer.push({"event": "outboundClick", "product_id": product_id});
window.open(link.attr('href'));
return false;
} else {
var link = $(this).find('a.open-local');
window.location = link.attr('href');
}
});

 

Ewentualnie zamiast 

var product_id  = link.attr('href').split("/")[4].split("?")[0];

można użyć:

var product_id  = link.attr('href').match(/([0-9])+/)[0];

 

Najbezpieczniej jednak by było, gdyby id produktu było wstawione jako jakiś atrybut w linku.

 

Czyli zamiast linku w postaci:

<a rel="nofollow" href="/site/redirect/product/554614?url=....." target="_new" class="open-new">

byłby na stronie:

<a rel="nofollow" href="/site/redirect/product/554614?url=....." target="_new" class="open-new" data-product_id="554614">

 

Wówczas nawet gdy zmieni się schemat linków parametr product_id będzie można łatwo pobrać w następujący sposób:

var product_id  = link.attr('data-product_id');

 

 

Tomasz Ciepłucha

Dot.: GTM Zliczanie kliknięć w blok div

Nowicjusz ✭

W tym momencie mam ustawionego GTM zgodnie z wytycznymi w poście wcześniejszym: Instalacja dwóch tagów w GTM dla pasażu handlowego

W serwisie mamy dwa miejsca linkowania zewnętrznego:

- na stronie produktu: http://market.pl/japonki-model-kbhp8486-yellow-heppin_p_554614.html przycisk przejdź do sklepu (są zliczane te kliknięcia)

- w kolekcji:  np. http://market.pl/damskie-japonki-do-50-zl_k_438.html - GTM Niestety tu nie zlicza kliknięć w blok <div>.

 

<div class="image-wrapper">
<a rel="nofollow" href="/site/redirect/product/554614?url=http%3A%2F%2Fheppin.com%2F%3Fstr%3Dprod%26id%3D29708" target="_new" class="open-new" />

(..)

 

 

Rozumiem, że dodatkowy wiersz, spowoduje przesyłanie informacji o każym kliknięciu w serwisie do GTM?

ale będzie trzeba przestawić regułę kliknięcie na zliczanie outbandClick?

 

dataLayer.push({"event": "outboundClick"});

 

 

Dot.: GTM Zliczanie kliknięć w blok div

Wschodząca Gwiazda
Niczego nie przestawiaj, tylko utwórz dodatkową regułę.
Ta wcześniejsza jest odpowiedzialna za kliknięcie w sam link, a ta nowa jest po to by łapać pozostałe kliknięcia w blok z klasą item_wrapper, które są oprogramowana przez wasz kod javascript na stronie.

Natomiast sam tag przesyłający zdarzenie do GTM może być wyzwalany wieloma regułami.
Tomasz Ciepłucha