Obecnie 592 forumowiczów jest online
Obecnie 592 forumowiczów jest online
Dowiedz się, jak ustawiać cele i śledzenie e-commerce. Zobacz, jak zweryfikować trafność źródła ruchu.
Poprowadź mnie
star_border
Odpowiedz

Wywołanie zdarzenia dla odsłonięcia znacznika div

Student ✭ ✭ ✭

Witam,

 

Na długiej stronie docelowej chciałem ustawić sobie jako jeden z celów przewinięcie strony do interesującego mnie elementu div. Jak za pomocą GTM dla UA ustawić regułę która pozwoli mi wysłać zdarzenie do analytica?

Odpowiedź eksperta 1verified_user

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Wojciech S
kwietnia 2016

Dot.: Wywołanie zdarzenia dla odsłonięcia znacznika div

Wschodząca Gwiazda

Jeżeli nasz div będzie miał id divID i chcemy śledzić zdarzenie po dotarciu krawędzi div'a do 50% ekranu to kod, który należy umieścić w niestandardowym tagu HTML będzie następujący:

 

 

<script>
var d = jQuery(document),w = jQuery(window),e = jQuery("#divID"),csp;
var est = e.position().top - w.height()/2;
w.on('scroll', function(){
    csp = d.scrollTop();
    if(csp>est){
        w.off("scroll");
	dataLayer.push({"event":"scroll"});
	console.log("scroll event");
    }
});
</script>

Linijka kodu:

 

console.log("scroll event");

jest tylko do celów diagnostycznych i potem można ją usunąć.

Wyświetla ona tekst "scroll event" do konsoli, gdy zostanie spełniony warunek.

 

Jeżeli chciałbyś wysyłać zdarzenie w momencie gdy krawędź div'a ledwo się pokaże na ekranie wówczas należy zmienić fragment:

var est = e.position().top - w.height()/2;

na:

var est = e.position().top - w.height();

Najpierw stwórz niestandardowy tag HTML z podanym kodem i zastąp #divID  identyfikatorem div'a, który chcesz śledzić.

Tag musi być uruchamiany za pomocą reguły "Wyświetlenie strony" > "Element DOM dostępny" lub gdy jQuery ładujesz asynchronicznie to za pomocą "Wyświetlenie strony" > "Wczytanie okna".

 

Po opublikowaniu kontenera sprawdź czy w konsoli JavaScript po przewinięciu ekranu wyświetli się komunikat "scroll event" we właściwym momencie.

 

Jeśli tak, to możesz utworzyć regułę na podstawie niestandardowego zdarzenie o nazwie "scroll" i tą regułą wywoływać tag Analytics przesyłający zdarzenie do GA.

 

Tomasz Ciepłucha

Wyświetl rozwiązanie w oryginalnym poście


Wszystkie odpowiedzi

Dot.: Wywołanie zdarzenia dla odsłonięcia znacznika div

Wschodząca Gwiazda
Musisz zrobić niestandardowy tag html z kodem JavaScript, który będzie przy przewijaniu ekranu sprawdzał, czy poziom przewinięcia w pikselach jest większy niż położenie danego bloku od góry ekranu i jeśli tak to przesyłasz do dataLayer zdarzenie niestandardowe, na podstawie którego ustawiasz regułę, która z kolei uruchomi Twój tag Google Analytics Emotikon: Szczęśliwy

Jeżeli używasz jQuery to mogę podpowiedzieć jakieś konkretne rozwiązanie. Tylko pytanie, czy zdarzenie ma być uruchamiane od razu jak element div będzie widoczny na ekranie - czyli jego górna krawędź minie dolną krawędź ekranu, czy np. dopiero gdy jego górna krawędź dojedzie do połowy ekranu?
Tomasz Ciepłucha

Dot.: Wywołanie zdarzenia dla odsłonięcia znacznika div

Student ✭ ✭ ✭
jquery używam, odnośnie uruchamiania, w konkretnym przypadku mógłbym zastosować gdy krawędź diva będzie np. w połowie ekranu, jednak myślę, że wykorzystałbym Twoją pomoc takżę w innych przypadkach gdzie div byłby na końcu kodu i w praktyce pozwalałby np. na utworzenie celu gdy ktoś przewinie cały artykuł
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Wojciech S
kwietnia 2016

Dot.: Wywołanie zdarzenia dla odsłonięcia znacznika div

Wschodząca Gwiazda

Jeżeli nasz div będzie miał id divID i chcemy śledzić zdarzenie po dotarciu krawędzi div'a do 50% ekranu to kod, który należy umieścić w niestandardowym tagu HTML będzie następujący:

 

 

<script>
var d = jQuery(document),w = jQuery(window),e = jQuery("#divID"),csp;
var est = e.position().top - w.height()/2;
w.on('scroll', function(){
    csp = d.scrollTop();
    if(csp>est){
        w.off("scroll");
	dataLayer.push({"event":"scroll"});
	console.log("scroll event");
    }
});
</script>

Linijka kodu:

 

console.log("scroll event");

jest tylko do celów diagnostycznych i potem można ją usunąć.

Wyświetla ona tekst "scroll event" do konsoli, gdy zostanie spełniony warunek.

 

Jeżeli chciałbyś wysyłać zdarzenie w momencie gdy krawędź div'a ledwo się pokaże na ekranie wówczas należy zmienić fragment:

var est = e.position().top - w.height()/2;

na:

var est = e.position().top - w.height();

Najpierw stwórz niestandardowy tag HTML z podanym kodem i zastąp #divID  identyfikatorem div'a, który chcesz śledzić.

Tag musi być uruchamiany za pomocą reguły "Wyświetlenie strony" > "Element DOM dostępny" lub gdy jQuery ładujesz asynchronicznie to za pomocą "Wyświetlenie strony" > "Wczytanie okna".

 

Po opublikowaniu kontenera sprawdź czy w konsoli JavaScript po przewinięciu ekranu wyświetli się komunikat "scroll event" we właściwym momencie.

 

Jeśli tak, to możesz utworzyć regułę na podstawie niestandardowego zdarzenie o nazwie "scroll" i tą regułą wywoływać tag Analytics przesyłający zdarzenie do GA.

 

Tomasz Ciepłucha