Bu kılavuzda, bir web sitesinde Google Etiket Yöneticisi kullanılarak Universal Analytics Geliştirilmiş E-ticaret özelliklerinin nasıl uygulanacağı açıklanmaktadır.
Genel bakış
Google Analytics Geliştirilmiş E-ticaret; ürün gösterimi, tanıtım ve satış verilerinin tüm Google Analytics sayfa görüntülemeleriniz ve etkinliklerinizle birlikte gönderilmesine olanak tanır. Ürün gösterimlerini ve ürün satın alma işlemlerini izlemek için sayfa görüntülemelerini, ödeme adımlarını ve ürün tıklamalarını izlemek için etkinlikleri kullanın.
Başlamadan önce
Uygulamanızı planlamanıza yardımcı olması için Geliştirilmiş E-ticaret Geliştirici Kılavuzu'nun Geliştirilmiş E-ticaret Veri Türleri ve İşlemleri bölümünü incelemenizi öneririz. Bu kılavuz, ölçmek istediğiniz e-ticaret etkileşimlerinin her biri için hangi alanların zorunlu ve isteğe bağlı olduğunu anlamanıza yardımcı olur.
Geliştirilmiş E-ticareti Etkinleştirme
Çoğu uygulamada, Universal Analytics sayfa görüntüleme veya etkinlik etiketlerinizin her birinde Geliştirilmiş E-ticaret özelliğini etkinleştirmeniz gerekir. Web arayüzünün etiket düzenleyici ekranında Geliştirilmiş E-ticaret'i etkinleştirmek için iki seçeneğiniz vardır:
- Veri Katmanı'nı kullanarak uygulama (Önerilen)
- Özel JavaScript Makrosu kullanarak uygulama
Her iki yöntem de eşdeğer e-ticaret işlevselliği sağlasa da, bir veri katmanını destekleyen tüm web sitelerinin Veri Katmanı yöntemini kullanmasını öneririz. Bu kılavuzda varsayılan olarak Veri Katmanı yöntemi gösterilmektedir. Özel JavaScript Makrosu Kullanma ise bu kılavuzun sonunda açıklanmıştır.
Veri Katmanını Kullanma
Aşağıdaki bölümlerde, aşağıdaki geliştirilmiş e-ticaret etkinliklerini ölçmek için veri katmanının nasıl kullanılacağı gösterilmektedir:
- Ürün Gösterimleri
- Ürün Tıklamaları
- Ürün Ayrıntısı Gösterimleri
- Alışveriş Sepetine Ekleme / Kaldırma
- Tanıtımın Gösterim Sayısı
- Promosyon Tıklamaları
- Ödeme
- Satın alma işlemleri
- Geri ödemeler
E-ticaret nesnesini temizleme
Bir e-ticaret etkinliğini veri katmanına aktarmadan önce e-ticaret nesnesini temizlemek için aşağıdaki komutu kullanmanız önerilir. Nesnenin temizlenmesi, bir sayfadaki birden çok e-ticaret etkinliğinin birbirini etkilemesini önler.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
Ürün Gösterimlerini Ölçme
- E-ticaret Ölçümü:
impressions - Veri kabul edilir:
impressionFieldObjectsdizisi
impression işlemini ve bir veya daha fazla impressionFieldObjects işlemini kullanarak ürün gösterimlerini ölçün. Aşağıdaki örnekte, sayfa yüklendiği sırada sayfada görüntülenen ürünlerle ilgili ayrıntıların bilindiği varsayılmaktadır:
<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'currencyCode': 'EUR', // Local currency is optional.
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Search Results',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Search Results',
'position': 2
}]
}
});
</script>
Ürün Tıklamalarını Ölçme
- E-ticaret Ölçümü:
click - Verileri kabul eder:
list,productFieldObjectsdizisi
Aşağıdaki örnekte olduğu gibi, tıklanan ürünü temsil etmek için bir productFieldObject ile birlikte veri katmanına bir click işlemi aktararak ürün bağlantılarındaki tıklamaları ölçün:
<script>
/**
* Call this function when a user clicks on a product link. This function uses the event
* callback datalayer variable to handle navigation after the ecommerce data has been sent
* to Google Analytics.
* @param {Object} productObj An object representing a product.
*/
function(productObj) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {'list': 'Search Results'}, // Optional list property.
'products': [{
'name': productObj.name, // Name or ID is required.
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant,
'position': productObj.position
}]
}
},
'eventCallback': function() {
document.location = productObj.url
}
});
}
</script>
Ürün Ayrıntılarının Görüntülenmelerini Ölçme
- E-ticaret Ölçümü:
detail - Verileri kabul eder:
list,productFieldObjectsdizisi
Görüntülenen ürünleri temsil eden bir veya daha fazla productFieldObjects ile birlikte, veri katmanına bir detail işlemi aktararak ürün ayrıntıları görünümünü ölçün:
<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
Alışveriş Sepetine Eklenen Eklemeleri veya Alışveriş Sepetinden Yapılan Çıkarmaları Ölçme
- E-ticaret Ölçümü:
add,remove - Verileri kabul eder:
list,productFieldObjectsdizisi
Benzer şekilde, bir add veya remove actionFieldObject ve bir productFieldObjects listesi kullanarak alışveriş sepetindeki ekleme ya da kaldırma işlemlerini ölçebilirsiniz:
Alışveriş Sepetine Ürün Ekleme
// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
Alışveriş Sepetinden Ürün Kaldırma
// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'remove': { // 'remove' actionFieldObject measures.
'products': [{ // removing a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
Tanıtımları Ölçme
Dahili site tanıtımlarında (sitenin kendisinde gösterilen ve belirli bir ürün alt kümesindeki bir indirimi veya ücretsiz kargo teklifinin reklamını yapan banner'lar) hem gösterim hem de tıklama sayısını ölçebilirsiniz.
Tanıtım Gösterimlerini Ölçme
- E-ticaret Ölçümü:
promoView - Veri kabul edilir:
promoFieldObjectsdizisi
Bir promosyon gösterimini ölçmek için e-ticaret veri katmanınızdaki promoView anahtarını, sayfada kullanıcılara gösterilen promosyonları açıklayan bir promoFieldObject değerine ayarlayın:
<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'promoView': {
'promotions': [ // Array of promoFieldObjects.
{
'id': 'JUNE_PROMO13', // ID or Name is required.
'name': 'June Sale',
'creative': 'banner1',
'position': 'slot1'
},
{
'id': 'FREE_SHIP13',
'name': 'Free Shipping Promo',
'creative': 'skyscraper1',
'position': 'slot2'
}]
}
}
});
</script>
Tanıtım Tıklamalarını Ölçme
Bir promosyondaki tıklamayı ölçmek için promoClick işlemini, tıklanan promosyonu açıklayan bir promoFieldObject içeren diziyle veri katmanına aktarın:
<script>
/**
* Call this function when a user clicks on a promotion. This function uses the eventCallBack
* datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
*
* @param {Object} promoObj An object representing an internal site promotion.
*/
function onPromoClick(promoObj) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'promotionClick',
'ecommerce': {
'promoClick': {
'promotions': [
{
'id': promoObj.id, // Name or ID is required.
'name': promoObj.name,
'creative': promoObj.creative,
'position': promoObj.pos
}]
}
},
'eventCallback': function() {
document.location = promoObj.destinationUrl;
}
});
}
</script>
Bir Ödemeyi Ölçme
Ödeme sürecindeki her adımı ölçmek için şunları yapmanız gerekir:
checkoutişlemini kullanarak ödeme işleminin her adımını ölçün.- Varsa
checkout_optionişlemini kullanarak ödeme seçeneklerini ölçün. - İsteğe bağlı olarak, web arayüzünün Yönetici bölümünde E-ticaret Ayarları'nı yapılandırarak ödeme dönüşüm hunisi raporu için kullanıcı dostu adım adları belirleyin.
1. Ödeme Adımlarını Ölçme
- E-ticaret Ölçümü:
checkout - Verileri kabul eder:
step,productFieldObjectsdizisi
Ödeme sürecini ölçmek için (ör. ödeme düğmesi ve kullanıcıların kargo ile ödeme bilgilerini girdiği bir veya daha fazla ödeme sayfası olabilir) ödeme işleminin hangi aşamasının ölçüldüğünü belirtmek için checkout işlemini ve step alanını kullanın.
option alanını, kullanıcı tarafından seçilen ödeme türü gibi sayfayla ilgili birtakım ek veriler sağlamak için de kullanabilirsiniz.
<script>
/**
* A function to handle a click on a checkout button. This function uses the eventCallback
* data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
*/
function onCheckout() {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Visa'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
},
'eventCallback': function() {
document.location = 'checkout.html';
}
});
}
</script>
2. Ödeme Seçeneklerini Ölçme
- E-ticaret Ölçümü:
checkout_option - Veri Kabul Edilir:
step,option
Ödeme seçeneği, bir ödeme adımını daha önce ölçtüğünüz ancak aynı ödeme adımıyla ilgili ek bilgiler elde etmek istediğiniz durumlarda kullanışlıdır. Örneğin, kullanıcı tarafından seçilen gönderim yöntemi.
Bunu ölçmek için step ve option alanlarıyla birlikte checkout_option işlemini kullanın.
<script>
/**
* A function to handle a click leading to a checkout option selection.
*/
function onCheckoutOption(step, checkoutOption) {
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'event': 'checkoutOption',
'ecommerce': {
'checkout_option': {
'actionField': {'step': step, 'option': checkoutOption}
}
}
});
}
</script>
3. Ödeme Dönüşüm Hunisi Yapılandırması
İsteğe bağlı olarak, ödeme sürecinizdeki her adıma raporlarda kullanılacak açıklayıcı bir ad verilebilir. Bu adları yapılandırmak için Google Analytics Web Arayüzü'nün Yönetici bölümünü ziyaret edin, görünümü (profil) seçin ve E-ticaret Ayarları'nı tıklayın. İzlemek istediğiniz her ödeme adımını etiketlemek için e-ticaret kurulum talimatlarını uygulayın.
Satın Almaları Ölçme
- E-ticaret Ölçümü:
purchase - Verileri Kabul eder:
id(İşlem Kimliği),productFieldObjectsdizisi
purchase işlemini ve geliştirilmiş e-ticaretin etkin olduğu bir etiketi tetikleyecek event işlemini kullanarak işlem ayrıntılarınızı Veri Katmanı'na aktarın. Bu örnekte, işlem ayrıntıları sayfa yüklendiği sırada bilinmektedir ve gtm.js komut dosyası şu değeri verdiğinde bir sayfa görüntülemeyle gönderilir:
<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>
Geri Ödemeleri Ölçme
- E-ticaret Ölçümü:
refund - Verileri Kabul eder:
id(İşlem Kimliği),productFieldObjectsdizisi
Bir işlemin eksiksiz geri ödemesini ölçmek için geri ödeme yapılan işlemin işlem kimliğiyle birlikte refund
actionFieldObject aktarın:
<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds.
}
}
});
</script>
Kısmi geri ödemeyi ölçmek için geri ödeme yapılan ürün kimlikleri ve miktarlar dahil olmak üzere productFieldObjects listesini ekleyin:
<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'}, // Transaction ID.
'products': [
{'id': 'P4567', 'quantity': 1}, // Product ID and quantity. Required for partial refunds.
{'id': 'P8901','quantity': 2}
]
}
}
});
</script>
Ürün Kapsamlı Özel Boyutları Geçirme
E-ticaret nesnesine ürün kapsamlı bir özel boyut geçirmek için boyutu ürüne eklemek üzere aşağıdaki gösterimi kullanın:
dimensionn
burada n doğal bir sayıdır, örneğin:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'dimension1': 'Same day delivery'
}]
}
}
});
</script>
Ürün Kapsamlı Özel Metrikleri iletme
Ürün kapsamlı bir özel metriği e-ticaret nesnesine iletmek için aşağıdaki gösterimi kullanarak metriği ürüne ekleyin:
metricn
burada n doğal bir sayıdır, örneğin:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Goal Flow Garden Hose',
'id': 'p001',
'brand': 'Google Analytics',
'category': 'Home Goods',
'variant': 'Green',
'price': '20',
'quantity': 1,
'metric3': '10' // Custom metric 'Cost'
}]
}
}
});
</script>
Gösterimleri ve İşlemleri Birleştirme
Hem ürün gösterimlerinizin hem de bir işlemin olduğu durumlarda, bunları tek bir isabette birleştirip ölçmek mümkündür.
Aşağıdaki örnekte, ilgili ürünler bölümünden ürün gösterimleri ile ürün ayrıntıları görünümünün nasıl ölçüleceği gösterilmektedir:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Related Products',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Related Products',
'position': 2
}],
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
Özel JavaScript Makrosu Kullanma
Web siteniz veri katmanını desteklemiyorsa e-ticaret veri nesnesini döndüren bir işlevi çağırmak için özel bir JavaScript makrosu kullanabilirsiniz. Bu nesne, bu kılavuzun daha önceki bölümlerinde gösterilen veri katmanı söz dizimini kullanmalıdır. Örneğin:
// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
var ecommerceData = {
'ecommerce': {
'purchase': {
'actionField': {'id': 'T12345'},
'products': [
// List of productFieldObjects
],
... // Rest of the code should follow the data layer syntax.
}
};
return ecommerceData;
}
Veri katmanı yerine özel bir JavaScript makrosu kullanmayı tercih ederseniz Geliştirilmiş E-ticaret Özelliklerini Etkinleştir'i seçip Verileri makrodan oku seçeneğini belirleyin.