Geçtiğimiz hafta, yıldızlardan oluşan Adobe Dinamik Etiket Yönetimi ekibi, DTM'nin etkinliğe dayalı kurallarına bazı çekici yeni özellikler ekledi. Etkinlik tabanlı kurallar için kullanabileceğiniz 2 yeni etkinlik türü vardır.

1. Gelenek
2. pushState veya hashchange

Her olay türü hakkında daha fazla bilgi için aşağıdaki bölümleri okuyun.

Olaya Dayalı Kural: Özel

İlk olarak, özel bir etkinlik tanımlayalım. DTM'deki diğer olay tabanlı kurallara ilişkin birkaç örneğe bakalım. Olay tabanlı kurallar için olay türlerinin listesi aşağıdadır.

Olay tabanlı bir kural oluştururken, bunu belirli varsayılan olaylar için ayarlayabilirsiniz. Her tarayıcının (hatta Internet Explorer'ın) belirli eylemler için tetiklenebilen varsayılan olayları vardır. Kolay olanlardan bazıları şunlardır:

• fare tıklamaları
• fareyle üzerine gelme (sayfadaki bir şeyin üzerine gelme)
• form alanı odağı (imleç bir form alanının içine girer)
• form alanı bulanıklaşıyor (imleç bir form alanından çıkıyor)
• form gönderir
• vesaire.

Bunların hepsi mantıklı; bunlar internette her gün yaptığımız şeyler. Bazen bir şeyi izlemeniz gerekir ve bunu doğru şekilde yapmak neredeyse imkansızdır. JavaScript olaylarını kullanmayı bu yüzden seviyorum. Bir olayı radyo dalgaları olarak düşünün. Herkesin duyması için yayınlanırlar, ancak onları duymak için doğru frekansı ayarlamanız gerekir. Yayın yapıyorsanız ve kimse dinlemiyorsa, önemli değil (radyo reklamcılarına söyleme). Olaylarla aynı: Bir olayı tetikleyebilirsiniz ve onu dinleyen bir şey yoksa herhangi bir soruna veya hataya neden olmaz. Ve asla gerçekleşmeyen bir olayı dinlerseniz, herhangi bir soruna veya hataya neden olmaz.

Bu neden önemli? Eylemleri izlemenin eski yollarından biri, özel bir JavaScript işlevi oluşturmak ve ardından onu çağırmak ya da bir etiket yönetim sistemine veya başka bir kod tabanına özgü çok özel bir kod kümesi uygulamaktı. Peki ya bu işlev bir şekilde kaldırılırsa veya yeniden adlandırılırsa? Bazen bir siteyi bozabilecek JavaScript hataları alırsınız. Olaylar bu sorunu çözer.

DTM'nin doğrudan arama kurallarına aşina iseniz, kendinize "Neden doğrudan arama kuralı kullanmıyorsunuz?" diye soruyor olabilirsiniz. Geçerli bir soru. Sorun, doğrudan arama kurallarının DTM'ye bir bağımlılık oluşturmasıdır. Bir geliştiriciysem ve birisi bana koduma _satellite.track'i referans alan bir grup kod koymamı söylerse, bunu sorgular ve büyük olasılıkla hayır derim! Bunun yerine, bağımlılığı olmayan bir olay kullanabilirsiniz.

Bir olayı dinleyebilmek için önce onu tetiklemeniz gerekir. Etkinlikler, geliştiricileriniz tarafından sitenin kodunda tanımlanmalıdır. Birinin ne zaman ve nerede kullanılacağını belirlemek biraz zor olabilir, ancak basit bir kural, izlemek istediğiniz bir şeyse ve onu önceden tanımlanmış bir DTM olay türüyle izleyemiyorsanız, özel bir olay kullanın. Mozilla'dan bunun nasıl yapılacağına dair bazı iyi bilgiler bulabiliriz. 2 temel olay türü vardır:

• Olay – olayla ilgili herhangi bir ek veri göndermeden bir şeyin olduğunu tetikleyin
• CustomEvent – ​​etkinliğe bazı veriler ekleyin

Veri eklemenize izin verdiği için özel bir olayla ilgili bir örnek kullanacağım. Diyelim ki bir alışveriş sepetimiz var ve sepete bir şey eklediğinizde AJAX kullanıyor. Bu, yeni bir sayfanın yüklenmediği, bunun yerine sepete bir ürün eklendiğini bildiren bir açılır pencere veya mesaj olabileceği anlamına gelir. Bu olduğunda, bana tam olarak neyin eklendiğini söyleyen özel bir etkinlik oluşturabilirim:

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

Yukarıdaki kodda “veri” adlı bir nesneden veriye atıfta bulunduğumu görebilirsiniz. Özel "ayrıntı" verilerini, olayı dinlerken başvurabileceğim bir nesne olarak tanımlıyorum. Etkinliği oluşturduktan sonra, onu belirli bir öğe üzerinde tetikliyorum, bu durumda sayfadaki "minicart" kimliğine sahip bir öğe. Artık dinlemek isteyen herkes için yayın yapan özel bir etkinliğim var.

Sonra, DTM'de dinlemek için bir kural yapılandıracağım:

1. Olaya dayalı yeni bir kural ekle
2. Bir isim ver
3. Olay tipini “özel” olarak seçin ve “addToCart” olarak tanımladığımız olay adını girin.
   
4. Bu olaya sahip olacak etiketi veya öğeyi tanımlayın. CSS seçicileri kullanılarak bu "#minicart" olacaktır
   
5. Kuralı yapılandırın. Burası serinlediği yer. Etkinlikte verilen "ayrıntıyı" kullanabilir ve hatta bir nesne olarak kullanabilirsiniz. TEŞEKKÜRLER ADOBE! İşte istediğim verilerle bir Google Analytics etkinliği gönderiyorum. Verilere %event.detail% kullanarak başvurabilirsiniz veya bir nesneniz varsa ona %event.detail.<<ad>>% olarak başvurabilirsiniz. Aşağıdaki örneğe bakın.
   
   Muhtemelen asla böyle bir etkinlik göndermezdim ama nasıl kullanılabileceğinin ana fikrini anladınız. Özel kodda kullanmanız gerekirse, diyelim ki Adobe Analytics aracı için, buna _satellite.getVar(“%event.detail.product_id%”) olarak başvurabilirsiniz. MUHTEŞEM SOS!!!

Bunun bir roman olması amaçlanmadı, ancak bu özelliğin ne kadar harika olduğunu göstermek istedim. Doğrudan arama kurallarını ne kadar sevsem de, uygulamalarımda arka planda kalıyorlar ve özel etkinlikler av tüfeği gibi oturuyor.

pushState veya hashchange

pushState

Şimdi pushState'e bakalım. Temel olarak, yeni bir sayfa yüklemek zorunda kalmadan sayfanın/sitenin URL'sini güncellemenize izin verir. Kendi içinde hiçbir şey yapmaz, ancak tek sayfalık uygulamaların kullanılmasına izin verir. Bu özellikten yararlanan birkaç çerçeve vardır. Bu nedenle, siteniz bu şekilde oluşturulmuşsa, pushState özelliği gerçekten kullanışlı olabilir!

Kuralı ayarlarken, elbette yeni olay türünü seçeceksiniz.

Daha fazla tanımlamak için hiçbir CSS seçiciye gerek yoktur. Ancak, birkaç koşula bakmak isteyeceksiniz. Yalnızca yeni URL'ye bakıyorsanız, kullanacağınız ana yol yol'dur. Bu kadar!

karma değişiklik

Twitter sayesinde hepimiz hash'in ne olduğunu biliyoruz (hash etiketleri), dolayısıyla hashchange, hash'teki bir değişikliği ifade etmelidir! Karma ile ilgili harika olan şey, onu istediğiniz kadar değiştirebilmeniz ve sayfanın yüklenmesine neden olmamasıdır. Hash'ler birçok amaç için kullanılabilir, bu yüzden birisinin buna sahip olmasının nedenlerine girmeyeceğiz. PushState ortalıkta dolaşmadan önce, karmayı AJAXy veya tek sayfa siteleri için yeni içerikle güncellemek alışılmadık bir durum değildi.

Yeni bir kural yapılandırmak için pushState ile aynı olay tipini seçin. Tek fark, artık hash'e kriteriniz olarak bakabilmenizdir. Örneğin:

Çözüm

Adobe DTM piyasadaki en iyi etiket yönetim sistemidir ve şanslısınız ki Adobe müşterileri için ücretsiz! Gücünden ve potansiyelinden yararlanmanıza yardımcı olması için bu faydalı ipuçlarını kullanın ve daha fazlası için sık sık kontrol edin! Web sitenizin analiziyle ilgili yardım arıyorsanız, Bize Ulaşın ve size nasıl yardımcı olabileceğimize dair ücretsiz bir teklif göndereceğiz!