Google Tag Manager ile Tıklama İzleme

Sitenizle etkileşim kurmanın üç ana yolu sayfa görüntüleme , kaydırma ve öğe tıklamalarıdır. İlk iki yöntem hakkında daha önce 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 üzere herhangi bir öğeye yapılan tıklamaları izlemenize olanak tanır. Sadece Bağlantılar – yalnızca bağlantılara yapılan tıklamaları izlemenizi sağlar. Şimdi muhtemelen mantıklı bir sorunuz var

Bir Tüm Öğeler türü varsa neden Just Links tetikleyicisi kullanıyorsunuz?

Tetikleyicilerin her biri farklı ş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 yükselecektir . Tüm Elemanlar ise gereksiz hareketler yapmayacak ve aslında tıklanan elemanda – yayılma alanında duracaktır . Fark etmiş olabileceğiniz gibi, bu tetikleyicilerin çalışması oldukça farklı 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 değerini döndürür ) Classes’ı tıklayın – öğe sınıfının dize değerini döndürür (anahtar değeri gtm.elementClasses ). Tıklama Kimliği – öğe tanımlayıcısının dize değerini döndürür ( gtm.elementId anahtarının değeri ). Hedefi tıklayın – otomatik olay öğesinin hedef özniteliğinin değeriyle ( gtm.elementTarget anahtarının değeri ) bir dize döndürür URL’yi tıklayın – auto olay öğesinin href veya eylem özniteliğinin değeriyle ( gtm.elementUrl anahtarının değeri ) bir dize döndürür . Metni Tıkla – auto olay öğesinin textContent  innerText özniteliğinin değerine sahip bir dize döndürür ( gtm.elementText anahtarının değeri )

Tıklamaları izlemek için CSS seçicilerini kullanma

 Bazen istenen koşulu yazmak için bir elemanın ayırt edici özelliğini tanımlamak çok zordur. Örneğin, sayfada aynı özelliklere sahip birkaç öğe var, ancak 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 veya birkaç öğeyi kapsayabilir. Tarayıcı geliştirici araçlarını kullanarak seçiciyi kopyalayın. Böyle bir seçici yalnızca belirli bir öğeyi kapsayacaktır. İkinci yöntem üzerinde duralım. Bunu yapmak için, istediğiniz öğeye sağ tıklayın ve Kodu Görüntüle\’yi seçin: Otomatik olay değişkenini kullanarak ek bilgi toplama id , class , targe t, href veya action       özelliklerinden bilgi toplamak elbette güzeldir . Ancak bazen başka bir özelliğin değerlerini almanız gerekir. Örneğin alt . Otomatik olay değişkeni türünde bir değişken bu konuda bize yardımcı olacaktır

HTMLButtonElement] ve HTMLSpanElement] nesneleri Ne olduğunu?

Google Etiket Yöneticisinin bize ne söylemeye çalıştığını anlamak 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 herkesin bir body [HTMLBodyElement] öğesi , HTML işaretlemesinin ayrılmaz bir parçası veya örneğin bir veya daha fazla [HTMLDivElement] divs vardır . GTM tıklama işleyicisi her zaman 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 liste döndürür (nasıl belirlenir – yukarıya bakın). Benim örneğimde, bu #cart > button. Ve elem diye ilan ve bu değeri 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. Öğe sayısı kadar (uzunluk) kadar çalışır; elem [i] .addEventListener (\’click\’, function () {dataLayer.push ({\’event\’: \’customClick\’}); – her öğe için, bir click olayı ve bir işleyici işlevi içeren bir addEventListener yöntemi oluşturun. veri katmanına özel bir customClick olayı yazın ; customClick – olayın keyfi 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 özel bir customClick olayı tetiklenir . Olayları dinleme ve addEventListener hakkında daha fazla bilgiyi buradan edinebilirsiniz . Özel HTML Etiketi türünde bir etikete eklenmelidir . Etkinleştirme koşulu Tüm Sayfalar’dır . Etiketi kaydediyoruz. Şimdi, Özel olay türünün bir tetikleyicisini kurduk . İçinde etkinliğimizin adını belirtiyoruz. Kurtarırız. Geriye sadece web analitiği araçları için etiket(ler) eklemek kalıyor. Bu bilgileri Google Analytics‘e aktarmak için Google Analytics türünde bir etiket oluşturmak yeterlidir.