Săptămâna trecută, echipa Adobe Dynamic Tag Management a adăugat câteva funcții noi atractive regulilor DTM bazate pe evenimente. Există două tipuri noi de evenimente pentru reguli bazate pe evenimente pe care le puteți folosi.

1. Personalizat
2. pushState sau hashchange

Citiți secțiunile de mai jos pentru mai multe informații despre fiecare tip de eveniment.

Regula bazată pe eveniment: Personalizat

Mai întâi, să definim un eveniment personalizat. Să ne uităm la câteva exemple de alte reguli bazate pe evenimente în DTM. Mai jos este lista de tipuri de evenimente pentru regulile bazate pe evenimente.

Când creați o regulă bazată pe evenimente, o puteți configura pentru anumite evenimente implicite. Fiecare browser (chiar și Internet Explorer) are evenimente implicite care pot fi declanșate pentru anumite acțiuni. Unele dintre cele ușoare sunt:

• clicuri de mouse
• trecerea mouse-ului (pasarea cursorului peste ceva de pe pagină)
• focus câmpul de formular (cursorul intră în interiorul unui câmp de formular)
• câmpul de formular este estompat (cursorul părăsește un câmp de formular)
• se depune formularul
• etc.

Toate acestea au sens; sunt lucruri pe care le facem în fiecare zi pe web. Uneori trebuie să urmăriți ceva și este aproape imposibil să faceți corect. Acesta este motivul pentru care îmi place să folosesc evenimente JavaScript. Gândiți-vă la un eveniment ca la unde radio. Sunt difuzate pentru ca toată lumea să le audă, dar trebuie să vă acordați frecvența potrivită pentru a le auzi. Dacă difuzați și nimeni nu ascultă, nu e mare lucru (nu spuneți agenților de publicitate radio). Același lucru cu evenimentele: puteți declanșa un eveniment și nu va cauza probleme și nu va genera erori dacă nu există ceva care să-l asculte. Și dacă ascultați un eveniment care nu se întâmplă niciodată, nu va cauza nicio problemă și nici nu va genera erori.

De ce este acest lucru important? Una dintre modalitățile vechi de urmărire a acțiunilor a fost de a crea o funcție JavaScript personalizată și apoi de a o apela sau de a implementa un set foarte specific de cod, care este fie specific unui sistem de management al etichetelor, fie unei alte baze de cod. Dar ce se întâmplă dacă acea funcție a fost cumva eliminată sau redenumită? Veți primi erori JavaScript care uneori ar putea distruge un site. Evenimentele rezolvă această problemă.

Dacă sunteți familiarizat cu regulile pentru apeluri directe ale DTM, s-ar putea să vă întrebați „De ce nu folosiți o regulă pentru apeluri directe?” O intrebare valabila. Problema este că regulile de apel direct creează o dependență de DTM. Dacă sunt dezvoltator și cineva îmi spune să pun o grămadă de coduri care fac referire la _satellite.track în codul meu, l-aș pune la îndoială și, cel mai probabil, aș spune nu! În schimb, puteți utiliza un eveniment, care nu are dependențe.

Pentru a putea asculta un eveniment, mai întâi trebuie să declanșezi unul. Evenimentele ar trebui să fie definite în codul site-ului de către dezvoltatorii dvs. Identificarea când și unde să utilizați unul poate fi puțin dificil, dar o regulă simplă este că dacă este ceva ce doriți să urmăriți și nu îl puteți urmări cu un tip de eveniment DTM predefinit, utilizați un eveniment personalizat. Putem găsi câteva informații bune despre cum să faceți acest lucru din Mozilla. Există 2 tipuri de evenimente de bază:

• Eveniment – ​​declanșează că ceva sa întâmplat fără a trimite date suplimentare despre eveniment
• CustomEvent – ​​adăugați câteva date la eveniment

Voi folosi un exemplu cu un eveniment personalizat, deoarece vă permit să adăugați date. Să presupunem că avem un coș de cumpărături, iar când adaugi ceva în coș folosește AJAX. Aceasta înseamnă că o pagină nouă nu se încarcă, dar, în schimb, ar putea apărea o fereastră pop-up sau un mesaj care vă anunță că un articol a fost adăugat în coș. Când se întâmplă acest lucru, pot crea un eveniment personalizat care îmi spune exact ce a fost adăugat:

 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);

În codul de mai sus puteți vedea că fac referire la date de la un obiect numit „date”. Definesc datele personalizate „detalii” ca obiect, la care pot face referire atunci când ascult evenimentul. După construirea evenimentului, îl declanșez apoi pe un anumit element, în acest caz un element din pagină cu id-ul „minicart”. Acum am un eveniment personalizat care este difuzat pentru oricine vrea să asculte.

În continuare, voi configura o regulă pentru a asculta în DTM:

1. Adăugați o nouă regulă bazată pe evenimente
2. Dă-i un nume
3. Selectați tipul de eveniment „personalizat” și introduceți numele evenimentului, pe care l-am definit ca „addToCart”
   
4. Definiți eticheta sau elementul care va avea acest eveniment. Folosind selectoare CSS, acesta va fi „#minicart”
   
5. Configurați regula. Aici se răcește. Puteți folosi „detaliul” care a fost furnizat în eveniment și îl puteți folosi chiar ca obiect. MULȚUMESC ADOBE! Aici trimit un eveniment Google Analytics cu datele pe care le doresc. Puteți face referire la date utilizând %event.detail% sau, dacă aveți un obiect, îl puteți referi ca %event.detail.<<name>>%. Vezi exemplul de mai jos.
   
   Probabil că nu aș trimite niciodată un eveniment ca acesta, dar înțelegeți esențialul modului în care poate fi folosit. Și dacă trebuie să îl utilizați în cod personalizat, să spunem pentru instrumentul Adobe Analytics, îl puteți referi ca _satellite.getVar(„%event.detail.product_id%”). SOS GROZAV!!!

Acesta nu a fost menit să fie un roman, dar am vrut să arăt cât de minunată este această caracteristică. Oricât de mult îmi plac regulile pentru apeluri directe, ele ocupă un loc din spate în implementările mele, iar evenimentele personalizate sunt puse în picioare.

pushState sau hashchange

pushState

Acum să ne uităm la pushState. Practic, vă permite să actualizați adresa URL a paginii/site-ului fără a fi nevoie să încărcați o pagină nouă. În sine, acest lucru nu face nimic, dar permite utilizarea aplicațiilor pe o singură pagină. Există mai multe cadre care profită de această caracteristică. Deci, dacă site-ul dvs. este construit astfel, funcția pushState poate fi foarte utilă!

Când configurați regula, veți selecta desigur noul tip de eveniment.

Nu sunt necesare selectoare CSS pentru a-l defini în continuare. Cu toate acestea, veți dori să vă uitați la câteva condiții. Principalul pe care îl veți folosi, dacă vă uitați doar la noua adresă URL, este calea. Asta este!

hashchange

Datorită Twitter, știm cu toții ce este un hash (etichete hash), așa că hashchange trebuie să se refere la o modificare a hash-ului! Lucrul tare despre hash este că îl poți schimba tot ce vrei și nu provoacă încărcarea paginii. Hashe-urile pot fi folosite în multe scopuri, așa că nu vom intra în motivele pentru care cineva ar avea acest lucru. Înainte ca pushState să existe, nu era neobișnuit să actualizezi hash-ul cu conținut nou pentru site-urile AJAXy sau cu o singură pagină.

Pentru a configura o nouă regulă, selectați același tip de eveniment ca pushState. Singura diferență este că acum puteți privi hash-ul ca criteriu. De exemplu:

Concluzie

Adobe DTM este cel mai bun sistem de gestionare a etichetelor de acolo și, norocos pentru clienții Adobe, este gratuit! Folosiți aceste sfaturi utile pentru a vă ajuta să profitați de puterea și potențialul său și să reveniți des pentru mai multe! Dacă căutați ajutor cu analiza site-ului dvs., contactați-ne și vă vom trimite gratuit o propunere despre cum vă putem ajuta!