Google Tag Manager ile Tıklama İzleme
Sitenizle etkileşim kurmanın üç ana yolu sayfa görüntüleme , kaydırma ve unsur tıklamalarıdır. İlk iki yöntem hakkında daha ilkin yazmıştım. Bugün ikincisi hakkında konuşacağız. Etiket Yöneticisi‘nde tıklamalar iki türe ayrılır: Tüm Öğeler – bağlantılar dahil olmak suretiyle herhangi bir öğeye meydana getirilen tıklamaları izlemenize olanak tanır. Yalnız Bağlantılar – yalnızca bağlantılara meydana getirilen tıklamaları izlemenizi sağlar. Şimdi muhtemelen mantıklı bir sorunuz var
Bir Tüm Öğeler türü var ise niçin Just Links tetikleyicisi kullanıyorsunuz?
Tetikleyicilerin her biri değişik şekilde çalışır: Just Links, bağlantı öğesine ulaşana kadar DOM ağacına tırmanacaktır. Ve bizim durumumuzda, span öğesinden a öğesine terfi edecektir . Tüm Elemanlar ise gereksiz hareketler yapmayacak ve aslen tıklanan elemanda – yayılma alanında duracaktır . Farklıymış olabileceğiniz benzer biçimde, bu tetikleyicilerin emek vermesi oldukça değişik olduğundan, materyal iki makalede yayınlanacaktır: her tetik türü için bir tane. All Elements tetikleyicisiyle başlayacağız Yerleşik Kategori Değişkenleri Tıklayın Tamamlanan tıklamayla ilgili tüm ek bilgiler aşağıdaki değişkenlerde bulunur: Öğeyi Tıkla – tıklanan HTML öğesini döndürür. (Başka bir deyişle, dataLayer ile gtm.element anahtar kıymetini döndürür ) Classes’ı tıklayın – unsur sınıfının mısra kıymetini döndürür (anahtar kıymeti gtm.elementClasses ). Tıklama Kimliği – unsur tanımlayıcısının mısra kıymetini döndürür ( gtm.elementId anahtarının kıymeti ). Hedefi tıklayın – otomatik vaka öğesinin hedef özniteliğinin değeriyle ( gtm.elementTarget anahtarının kıymeti ) bir mısra döndürür URL’yi tıklayın – auto vaka öğesinin href yada fiil özniteliğinin değeriyle ( gtm.elementUrl anahtarının kıymeti ) bir mısra döndürür . Metni Tıkla – auto vaka öğesinin textContent innerText özniteliğinin değerine haiz bir mısra döndürür ( gtm.elementText anahtarının kıymeti )
Tıklamaları seyretmek için CSS seçicilerini kullanma
Kimi zaman istenen koşulu yazmak için bir elemanın ayırt edici hususi durumunu tanımlamak fazlaca zor olsa gerek. Mesela, sayfada aynı özelliklere haiz birkaç unsur var, sadece belirli bir öğeyle ilgileniyoruz. CSS seçicilerinin kullanışlı olduğu yer burasıdır. Bir sayfadaki her öğenin kendi benzersiz CSS seçicisi vardır. Bu, her öğenin ayrı ayrı ele alınmasını sağlar. CSS seçici almanın iki yolu vardır: Seçiciyi kendiniz yazın: bu durumda seçici, duruma bağlı olarak bir yada birkaç öğeyi kapsayabilir. Tarayıcı geliştirici araçlarını kullanarak seçiciyi kopyalayın. Bu şekilde bir seçici yalnızca belirli bir öğeyi kapsayacaktır. İkinci yöntem üstünde duralım. Bunu yapmak için, istediğiniz öğeye sağ tıklayın ve Kodu Görüntüle’yi seçin: Otomatik vaka değişkenini kullanarak ek informasyon toplama id , class , targe t, href yada action özelliklerinden informasyon toplamak elbet güzeldir . Sadece kimi zaman başka bir özelliğin değerlerini almanız gerekir. Mesela alt . Otomatik vaka değişkeni türünde bir değişken bu mevzuda bizlere destek olacaktır
HTMLButtonElement] ve HTMLSpanElement] nesneleri Ne işe yaradığını?
Google Etiket Yöneticisinin bizlere ne anlatmaya çalıştığını idrak etmek için DOM tanımına geri dönmemiz gerekiyor. Belge Nesne Modeli (DOM) , bir site sayfasını oluşturan öğeleri içeren bir ağaç yapısı olan bir belge nesne modelidir. Sitedeki her insanın bir body [HTMLBodyElement] öğesi , HTML işaretlemesinin ayrılmaz bir parçası yada mesela bir yada daha çok [HTMLDivElement] divs vardır . GTM tıklama işleyicisi daima geçerli kullanıcının tıkladığı öğeyi döndürür. Birçok nesne türü vardır.
Kodu daha yakından inceleyelim:
document.querySelectorAll (’CSS Seçici’); – yöntem, belirtilen seçiciyle eşleşen belgenin tüm bulunan öğelerini içeren statik bir sıralama döndürür (iyi mi belirlenir – yukarıya bakın). Benim örneğimde, bu #cart > button. Ve elem diye duyuru ve bu kıymeti atamak bir değişkendir; for (var i = 0; i <elem.length; i ++) – belgede verilen seçiciyle eşleşen tüm öğeleri arayacak bir döngü oluşturun. Unsur sayısı kadar (uzunluk) kadar çalışır; elem .addEventListener (’click’, function () {dataLayer.push ({’event’: ’customClick’}); – her unsur için, bir click vakası ve bir işleyici işlevi içeren bir addEventListener yöntemi oluşturun. veri katmanına hususi bir customClick vakası yazın ; customClick – olayın hazzı adı. Ne istediğini sorabilirsin.
Detaylar
Başka bir deyişle: belirli bir seçiciyi içeren herhangi bir öğeye tıklandığında, GTM tetikleyicisi olarak kullanabileceğimiz hususi bir customClick vakası tetiklenir . Vakaları dinleme ve addEventListener hakkında daha çok bilgiyi buradan edinebilirsiniz . Hususi HTML Etiketi türünde bir etikete eklenmelidir . Etkinleştirme koşulu Tüm Sayfalar’dır . Etiketi kaydediyoruz. Şimdi, Hususi vaka türünün bir tetikleyicisini kurduk . İçinde etkinliğimizin adını belirtiyoruz. Kurtarırız. Geriye bir tek web analitiği araçları için etiket(ler) eklemek kalıyor. Bu detayları Google Analytics‘e aktarmak için Google Analytics türünde bir etiket oluşturmak yeterlidir.