Veri katmanı, Google Etiket Yöneticisi ve gtag.js tarafından bilgileri etiketlere ekleyin. Etkinlikler veya değişkenler veri katmanı aracılığıyla iletilebilir. tetikleyiciler değişkenlerin değerlerine göre ayarlanabilir.
Örneğin, bir yeniden pazarlama kampanyası
etiketi purchase_total
değeri 100 TL'den büyük olduğunda veya
belirli olaylar, ör. bir düğme tıklandığında veri katmanınız
bu verileri etiketleriniz için kullanılabilir hale getirecek şekilde yapılandırılmıştır. Veri katmanı nesnesi
JSON biçiminde yapılandırılmıştır. Örneğin:
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
Google etiketleri, bir yöntem geliştirmek yerine düzenli ve tahmin edilebilir bir şekilde değişkenler, işlem bilgileri, sayfa kategorileri ve diğer sinyallerden dokunun. Değişkenler ve boyutlarla doldurulan alakalı verilerin kullanılabilmesini sağlar ve etiketleri gerekir.
Kurulum
Etiket Yöneticisi web sayfası yüklemeleri için bir veri katmanı oluşturmanız gerekir. İlgili içeriği oluşturmak için kullanılan aşağıda vurgulanan kod, Etiket'ten önce veri katmanının oluşturulduğu yeri gösterir Yönetici yüklendi.
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Etiketin içinden kopyalandığı standart gtag.js uygulamalarında bir web sayfasına eklendiğinde, veri katmanını oluşturan kod sağlar. Google etiketinin özel uygulamalarında veri katmanı kodunu ekleyin aşağıdaki örnekte gösterildiği gibi komut dosyanızın başına ekleyin:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Veri katmanı bilgilerinin işlenme şekli
Bir kapsayıcı yüklendiğinde Etiket Yöneticisi sıraya alınan tüm verileri işlemeye başlar katman push mesajlarıdır. Etiket Yöneticisi, mesajları ilk gelen, ilk çıkar temel: Her ileti alındığı sırayla teker teker işlenir. Eğer mesaj bir etkinlikse, tetikleyici koşulları karşılanmış tüm etiketler bir sonraki mesaja geçmeden önce tetiklenir.
Bir sayfadaki kodla gtag()
veya dataLayer.push()
çağrısı yapılmışsa Özel
Özel HTML etiketinde, ilişkili ileti sıraya alınır ve
diğer tüm bekleyen iletiler değerlendirildikten sonra işlenir. Yani, sisteme
güncellenmiş veri katmanı değerlerinin bir sonraki etkinlik için kullanılabileceği garanti edilmez.
Bu tür durumlarda olduğu gibi mesaja etkinlik adı eklemeniz gerekir.
aktarılan bir etkinliktir ve daha sonra, bu etkinlik adını Özel
Etkinlik tetikleyici.
Etkinlik işleyicilerle birlikte veri katmanı kullanma
dataLayer
nesnesi, etkinliklerin gönderilmesini başlatmak için bir event
komutu kullanır.
Google etiketi ve Etiket Yöneticisi,
JavaScript etkinlik işleyicileri tarafından, bir kullanıcı işlemi gerçekleştirdiğinde etiketleri tetiklemek için kullanılan event
Kullanıcı web sitesi öğeleriyle etkileşime girer. Örneğin, işletmeniz için değerli olan
İzleme etiketi. Etkinlikler:
Kullanıcılar çeşitli web sitesi öğeleriyle (ör. bağlantılar, düğmeler,
kaydırma vb.
Bu işlev, bir etkinlik şu anda dataLayer.push()
çağrılırılarak gerçekleştirilir.
gerçekleşir. dataLayer.push()
ile etkinlik göndermek için kullanılan söz dizimi aşağıdaki gibidir:
dataLayer.push({'event': 'event_name'});
Burada event_name
, etkinliği açıklayan 'login'
gibi bir dizedir.
purchase
veya search
.
İstediğiniz bir işlem gerçekleştiğinde etkinlik verilerini göndermek için dataLayer.push()
kullanın
yardımcı olur. Örneğin, kullanıcı bir düğmeyi tıkladığında etkinlik göndermek için
dataLayer.push()
işlevini çağırmak için düğmenin onclick
işleyicisi:
<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>
Veri katmanı değişkenlerini, veri katmanına dinamik olarak aktarabilirsiniz bir formda girilen veya seçilen değerler, ilişkili meta veriler gibi bilgiler ziyaretçinin oynattığı bir videoyla, bir ürünün rengiyle (ör. araba) kullanıcı tarafından özelleştirilmiş, tıklanan bağlantıların hedef URL'leri vb.
Etkinliklerde olduğu gibi bu işlev de push()
API'nin çağrılmasıyla gerçekleştirilir
veri katmanındaki veri katmanı değişkenlerini eklemek veya değiştirmek için kullanılır. Şunun için temel söz dizimi:
dinamik veri katmanı değişkenlerini ayarlamak için aşağıdaki adımları uygulayın:
dataLayer.push({'variable_name': 'variable_value'});
Burada 'variable_name'
, veri katmanının adını belirten bir dizedir
değişkeni ayarlanacak. 'variable_value'
ise değeri gösteren bir dizedir
ayarlanacak veya değiştirilecek veri katmanı değişkeni
Örneğin: Bir ziyaretçi bir web sitesini ziyaret ettiğinde renk tercihiyle birlikte bir veri katmanı değişkeni etkileşimde bulunduğunda, aşağıdaki dinamikleri veri katmanı değişkeni:
dataLayer.push({'color': 'red'});
Bir push, birden fazla değişken
Aynı anda birden çok değişkeni ve etkinliği aktarabilirsiniz:
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customize'
});
Veri katmanı değişkenlerini koruma
Web sayfaları arasında veri katmanı değişkenlerini kullanmak için sonrasında dataLayer.push()
işlevini çağırın
Her sayfa yüklemesinde veri katmanı örneklendirildiğinden ve
veri katmanına gider. Bu veri katmanı değişkenlerinin
Yönetici Konsolu'na giderek, kapsayıcı yüklendiğinde bir dataLayer.push()
çağrısı ekleyin.
Etiket Yöneticisi kapsayıcı kodu aşağıda gösterildiği gibidir.
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.googleanalytics.dev/pancakes',
'pageTitle': 'Pancake Event Signup',
'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Veri katmanı nesnesinde belirtilen her değişken yalnızca
ziyaretçi geçerli sayfada kalır. Alakalı veri katmanı değişkenleri
sayfa genelinde (ör. visitorType
), her bir
web sitenizin sayfasına gidin. Her bir projeye aynı değişken grubunu
her sayfada veri katmanı eklemek için tutarlı bir adlandırma kuralı kullanmalısınız. İçinde
diğer bir deyişle: sayfa kategorisini, kayıt sayfasında bir değişken kullanarak ayarlarsanız
pageCategory
adlı bir ürün kullanıyorsanız ürün ve satın alma sayfalarınızda
pageCategory
değişkeni de alabilirsiniz.
Sorun giderme
Veri katmanıyla ilgili sorunları gidermeye yönelik bazı ipuçlarını aşağıda bulabilirsiniz:
window.dataLayer
değişkeninin üzerine yazma: Verileri kullandığınızda
katmanın üzerine yazılır (ör. dataLayer = [{'item': 'value'}])
,
dataLayer
içindeki mevcut değerler. Etiket Yöneticisi yüklemeleri örneklenmelidir
veri katmanını, kaynak kodunda mümkün olduğunca yukarıda, kapsayıcının üzerinde
snippet'ini kullanabilirsiniz.window.dataLayer =
window.dataLayer || [];
dataLayer
beyan edildikten sonra
eklemek için dataLayer.push({'item': 'value'})
ve bu değerler
değerlerinin sayfa yüklendiğinde Etiket Yöneticisi tarafından kullanılabilmesi gerekir;
dataLayer.push()
çağrısının şu şekilde Etiket Yöneticisi kapsayıcı kodunun üzerinde olması gerekir:
olur.
dataLayer
nesne adı büyük/küçük harfe duyarlıdır: Bir değişken aktarmaya çalışırsanız
büyük/küçük harf kullanımı olmadığında, itme işlevi çalışmaz.
datalayer.push({'pageTitle': 'Home'}); // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'}); // Good (dataLayer in camel case)
dataLayer.push
, geçerli JavaScript nesneleriyle çağrılmalıdır. Tüm veri katmanı
değişken adları tırnak içine alınmalıdır.
dataLayer.push({new-variable: 'value'}); // Bad - no quote marks
dataLayer.push({'new-variable': 'value'}); // Good - proper quote marks
Değişken adlarının her sayfada tutarlı olmasını sağlayın: Farklı değişken kullanıyorsanız farklı sayfalarda aynı kavram için farklı adlar kullanıyorsanız etiketleriniz ve istenen tüm konumlarda sürekli olarak etkinleşir.
Kötü:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
İyi:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
Veri katmanını yeniden adlandırma
Google etiketi veya web sunucusu tarafından başlatılan veri katmanı nesnesinin varsayılan adı
Etiket Yöneticisi: dataLayer
. Hesabınız için farklı bir ad kullanmayı tercih ederseniz,
bunu yapmak için
İstediğiniz ada sahip Google etiketi veya Etiket Yöneticisi kapsayıcı snippet'i.
gtag.js
Yeni veri katmanı adını ayarlamak için URL'ye "l" adlı bir sorgu parametresi ekleyin.
ör. l=myNewName
Google etiketindeki tüm dataLayer
örneklerini güncelle
snippet'i yeni ada yerleştirin.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Etiket Yöneticisi
Kapsayıcınızdaki veri katmanı parametre değerini (aşağıda vurgulanmıştır) değiştirin. snippet'i ekleyin.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Yeniden adlandırıldıktan sonra veri katmanınıza yapılan tüm referanslar (verileri açıklarken)
veya etkinlikleri ya da dinamik veri katmanı değişkenlerini aktarırken
(.push()
komutuyla veri katmanına ekleyebilirsiniz)
özel veri katmanı adı:
<script>
myNewName = window.dataLayer || [];
myNewName.push({'variable_name': 'variable_value'});
</script>
Özel veri katmanı yöntemleri
Veri katmanına bir işlev aktarırsanız bu işlev, soyut veri modeli. Bu soyut veri modeli bir anahtara değer alıp bu anahtarın değerlerini ayarlayabilir değer deposunu oluşturur ve ayrıca, veri katmanını sıfırlamanın bir yolunu sunar.
grup
Soyut veri modelindeki set
işlevi,
almanın kolay bir yoludur.
window.dataLayer.push(function() {
this.set('time', new Date());
});
get
Soyut veri modelindeki get
işlevi,
ayarlanmıştı.
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
})
reset
Soyut veri modelindeki reset
işlevi,
veri katmanından yararlanın. Bu yöntem en çok, açık kalacak bir sayfa ve
katman boyutu zamanla büyümeye devam etmektedir. Veri katmanını sıfırlamak için
şu kodu kullanabilirsiniz:
window.dataLayer.push(function() {
this.reset();
})