W ubiegłym tygodniu gwiazdorski zespół Adobe Dynamic Tag Management dodał kilka atrakcyjnych nowych funkcji do zasad DTM opartych na zdarzeniach. Dostępne są 2 nowe typy zdarzeń dla reguł opartych na zdarzeniach, z których można korzystać.

1. Zwyczaj
2. pushState lub hashchange

Przeczytaj poniższe sekcje, aby uzyskać więcej informacji na temat każdego typu zdarzenia.

Reguła oparta na zdarzeniu: niestandardowa

Najpierw zdefiniujmy zdarzenie niestandardowe. Przyjrzyjmy się kilku przykładom innych reguł opartych na zdarzeniach w DTM. Poniżej znajduje się lista typów zdarzeń dla reguł opartych na zdarzeniach.

Tworząc regułę opartą na zdarzeniu, możesz skonfigurować ją dla określonych zdarzeń domyślnych. Każda przeglądarka (nawet Internet Explorer) ma domyślne zdarzenia, które mogą być wyzwalane w przypadku określonych działań. Niektóre z łatwych to:

• kliknięcia myszką
• najechanie myszką (najechanie kursorem na coś na stronie)
• fokus pola formularza (kursor przechodzi do wnętrza pola formularza)
• rozmycie pola formularza (kursor opuszcza pole formularza)
• formularz przesyła
• itp.

To wszystko ma sens; to rzeczy, które robimy każdego dnia w sieci. Czasami trzeba coś śledzić i jest to prawie niemożliwe, aby zrobić to poprawnie. Właśnie dlatego uwielbiam używać zdarzeń JavaScript. Pomyśl o wydarzeniu jak o falach radiowych. Są one nadawane tak, aby każdy mógł je usłyszeć, ale aby je usłyszeć, trzeba nastroić się na odpowiednią częstotliwość. Jeśli nadajesz i nikt nie słucha, nic wielkiego (nie mów reklamodawcom radiowym). To samo ze zdarzeniami: możesz wywołać zdarzenie i nie spowoduje to żadnych problemów ani błędów, jeśli coś go nie nasłuchuje. A jeśli nasłuchujesz wydarzenia, które nigdy się nie wydarzy, nie spowoduje to również żadnych problemów ani błędów.

Dlaczego to jest ważne? Jednym ze starych sposobów śledzenia działań było utworzenie niestandardowej funkcji JavaScript, a następnie wywołanie jej, lub zaimplementowanie bardzo określonego zestawu kodu, który jest specyficzny dla systemu zarządzania tagami lub innej bazy kodu. Ale co, jeśli ta funkcja została w jakiś sposób usunięta lub zmieniono jej nazwę? Pojawiały się błędy JavaScript, które czasami mogły uszkodzić witrynę. Wydarzenia rozwiązują ten problem.

Jeśli znasz zasady bezpośredniego połączenia DTM, możesz zadać sobie pytanie „Dlaczego po prostu nie skorzystać z reguły bezpośredniego połączenia?” Prawidłowe pytanie. Problem polega na tym, że reguły połączeń bezpośrednich budują zależność od DTM. Jeśli jestem programistą i ktoś mówi mi, żebym umieścił w moim kodzie kilka kodów odwołujących się do _satellite.track, zakwestionowałbym to i najprawdopodobniej odmówiłbym! Zamiast tego możesz użyć zdarzenia, które nie ma zależności.

Aby móc odsłuchać zdarzenie, musisz je najpierw wywołać. Zdarzenia powinny być zdefiniowane w kodzie witryny przez programistów. Określenie, kiedy i gdzie użyć jednego z nich, może być nieco trudne, ale prosta praktyczna zasada jest taka, że ​​jeśli coś chcesz śledzić, a nie możesz tego śledzić za pomocą predefiniowanego typu zdarzenia DTM, użyj zdarzenia niestandardowego. Dobre informacje o tym, jak to zrobić, możemy znaleźć w Mozilli. Istnieją 2 podstawowe typy zdarzeń:

• Zdarzenie – wywołaj, że coś się wydarzyło bez wysyłania żadnych dodatkowych danych o zdarzeniu
• CustomEvent – ​​dodaj dane do zdarzenia

Użyję przykładu ze zdarzeniem niestandardowym, ponieważ pozwalają one dodawać dane. Powiedzmy, że mamy koszyk, a kiedy dodajesz coś do koszyka, używa on AJAX. Oznacza to, że nowa strona nie ładuje się, ale zamiast tego może pojawić się wyskakujące okienko lub komunikat informujący o dodaniu produktu do koszyka. Kiedy tak się stanie, mogę utworzyć niestandardowe wydarzenie, które powie mi dokładnie, co zostało dodane:

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

W powyższym kodzie widać, że odwołuję się do danych z obiektu o nazwie „data”. Definiuję niestandardowe dane „szczegółowe” jako obiekt, do którego mogę się następnie odwoływać podczas nasłuchiwania zdarzenia. Po zbudowaniu zdarzenia uruchamiam je na określonym elemencie, w tym przypadku elemencie na stronie o identyfikatorze „minicart”. Teraz mam niestandardowe wydarzenie, które jest transmitowane dla każdego, kto chce słuchać.

Następnie skonfiguruję regułę do nasłuchiwania w DTM:

1. Dodaj nową regułę opartą na zdarzeniu
2. Daj temu imię
3. Wybierz typ wydarzenia „custom” i wpisz nazwę wydarzenia, którą zdefiniowaliśmy jako „addToCart”
   
4. Zdefiniuj tag lub element, który będzie miał to zdarzenie. Używając selektorów CSS, będzie to „#minicart”
   
5. Skonfiguruj regułę. Tutaj robi się chłodno. Możesz użyć „szczegółu”, który został podany w zdarzeniu, a nawet użyć go jako obiektu. DZIĘKI ADOBIE! Tutaj wysyłam zdarzenie Google Analytics z danymi, które chcę. Możesz odwoływać się do danych, używając %event.detail%, lub jeśli masz obiekt, możesz odwoływać się do niego jako %event.detail.<<nazwa>>%. Zobacz przykład poniżej.
   
   Prawdopodobnie nigdy nie wysłałbym takiego wydarzenia, ale wiesz, jak można go użyć. A jeśli chcesz użyć go w niestandardowym kodzie, powiedzmy w narzędziu Adobe Analytics, możesz odwołać się do niego jako _satellite.getVar("%event.detail.product_id%"). NIESAMOWITY SOS!!!

To nie miała być powieść, ale chciałem pokazać, jak niesamowita jest ta funkcja. Chociaż uwielbiam zasady połączeń bezpośrednich, zajmują one tylne miejsce w moich implementacjach, a zdarzenia niestandardowe są strzelbą.

pushState lub hashchange

PushState

Teraz spójrzmy na pushState. Zasadniczo umożliwia aktualizację adresu URL strony/witryny bez konieczności ładowania nowej strony. Samo w sobie to nic nie robi, ale pozwala na używanie aplikacji z jedną stroną. Istnieje kilka frameworków, które korzystają z tej funkcji. Jeśli więc Twoja witryna jest zbudowana w ten sposób, funkcja pushState może być naprawdę przydatna!

Konfigurując regułę, oczywiście wybierzesz nowy typ zdarzenia.

Do dalszego zdefiniowania nie są potrzebne żadne selektory CSS. Jednak będziesz chciał spojrzeć na kilka warunków. Głównym, którego będziesz używać, jeśli patrzysz tylko na nowy adres URL, jest ścieżka. Otóż ​​to!

haszzmiana

Dzięki Twitterowi wszyscy wiemy, czym jest hash (hash tags), więc hashchange musi odnosić się do zmiany hasha! Fajną rzeczą w haszu jest to, że możesz go dowolnie zmieniać i nie powoduje to ładowania strony. Hashe mogą być używane do wielu celów, więc nie będziemy wchodzić w powody, dla których ktoś miałby to mieć. Zanim pojawił się pushState, nie było niczym niezwykłym aktualizowanie skrótu o nową zawartość dla AJAXy lub witryn jednostronicowych.

Aby skonfigurować nową regułę, wybierz ten sam typ zdarzenia co pushState. Jedyna różnica polega na tym, że możesz teraz spojrzeć na skrót jako na swoje kryterium. Na przykład:

Wniosek

Adobe DTM to najlepszy dostępny system zarządzania tagami, który na szczęście dla klientów Adobe jest bezpłatny! Skorzystaj z tych pomocnych wskazówek, które pomogą Ci wykorzystać jego moc i potencjał, i często sprawdzaj, aby uzyskać więcej! Jeśli szukasz pomocy w zakresie analityki swojej witryny, skontaktuj się z nami, a prześlemy bezpłatną propozycję, w jaki sposób możemy Ci pomóc!