Google Tag Manager - Server-side Tagging | ceaksan - E-ticaret & Kullanıcı Davranışı Analitiği

Web analitiği sürecinde, bir web sitesi ya da uygulaması üzerinde gerçekleştirilen etkinlikleri ağırlıklı olarak istemci (client) aracılığı ile ele almaktaydık. Ancak, veri gizliliği ve web sitesi / uygulaması ile ilgili performans optimizasyon süreçleri, veri ön-analiz işlemleri başta olmak üzere zaman içerisinde ortaya çıkan gereksinimler neticesinde kullanıcı etkinliklerin izlenmesi ve etiket yönetim süreçlerinde önemli yenilikler ve değişiklikler söz konusu olmaya başladı¹ ² ³. Bunlardan belki de en önemlisi Google Tag Manager tarafından duyurulan sunucu taraflı etiketleme (server-side tagging) özelliği oldu. Esasında, sunucu taraflı bu işlem bir kapsayıcı (container) türü olarak ele alınmakta⁴.

Sunucu Taraflı Etiketleme (Server-side Tagging) Nedir?

Sunucu taraflı etiketleme, ölçüm (measurement) etiketlerinin organizasyon sürecini web sitesinden veya uygulamadan başka bir platforma taşınması ve burada ele alınması sürecini ifade eder⁵. Bu platform, ön tanımlı olarak Google Cloud Platform (GCP) veya özelleştirilebilir farkı bir servis sağlayıcı olabilir⁶. Sunucu taraflı etiketleme (server-side tagging), istemci (client-side tagging) tarafı etiketlere göre birkaç avantaj sunar:

Web sitesi veya uygulamada daha az ölçüm etiketi yer alır. Bu, istemci tarafında çalıştırılacak daha az kod anlamına gelir.
Ziyaretçi verileri, müşteri tarafından yönetilen (customer-managed) bir sunucu tarafı ortamında toplanıp dağıtıldığından daha iyi korunur. Veriler, daha sonra işlenmek ve diğer servis sağlayıcılar tarafından kullanılmak üzere bulut üzerinde, kontrolü bir şekilde yönetilir.

Kapsayıcı (Container) Kurulumu İçin İzlenecek Adımlar

İşlemlerin büyük bölümü yine Google Tag Manager paneli üzerinden yürütülecek. Ek olarak, sunucu işlemleri için de GCP kullanacağım.

Sunucu Taraflı Etiketleme / Server-side Tagging

Öncelikle, yeni bir kapsayıcı (container) oluşturmamız gerekiyor. Kapsayıcı için tanımlanacak alanlar istemci ile aynı (hesap ve kapsayıcı adı, ülke, vb.). Ancak, kapsayıcı tipi olarak Sunucu (server) seçilmesi gerekmekte⁷.

İlgili bilgilerin onaylanmasının ardından Otomatik veya tüm işlemleri sizin yürüteceğiniz el yordamı ile ilerleme seçeneği karşınıza çıkacaktır⁶ ⁸. Otomatik tercihi sizi GCP ile ilişkili ödeme biçimini seçeceğiniz bir pencereye yönlendirecektir.

Bir ödeme yöntemi tanımlı ise ilgili ödeme yöntemini seçebilir veya yeni bir ödeme yöntemi tanımlayabilirsiniz⁹. Bu işlem birkaç dakika sürebileceği gibi kişisel bilgilerinizin teyit edilmesi amacıyla birkaç saate kadar da vakit alabilmekte¹⁰.

_Sunucu taraflı kapsayıcı transport_url aracılığı ile verileri edinir¹¹._

Doğrudan, GTAG üzerinden işlemler gerçekleştirilecekse kod parçacığı içerisindeki URL ve GA4 ID'in (bkz. <DOMAIN NAME> ve G-XXXXXX) güncellemesi gerekir. Bundan sonraki işlemlerde GTM aracılığı ile verilerin kapsayıcılar arasında iletilmesinden bahsedeceğim. Ancak, tek yöntem elbette bu değil. Sunucu taraflı kapsayıcıya, en temel hali ile aşağıdaki gibi düzenlenen GTAG kod parçacığı, measurement protocol'e ek olarak özelleştirilmiş yöntemlerle de veri iletmek mümkün ³.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://<DOMAIN NAME>/gtag/js?id=<G-XXXXXX>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-XXXXXX', {
  transport_url: '<DOMAIN NAME>'
});
</script>

Elbette, aynı durum GTM kod parçacığı için de geçerli.

<head>
    <!-- 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://<DOMAIN NAME>/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="<DOMAIN NAME>/ns.html?id=GTM-XXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
</body>

Sunucu taraflı kapsayıcı kurulumunun ardından Default URL olarak iletilen alan adı yerine (*.appspot.com) alan adı DNS yapılandırarak size ait bir alt alan adını tercih etmeniz daha uygun olacaktır.

Etiket Kurulumları

Bu aşamadan sonraki işlemler GTM istemci ve sunucu üzerinden yapılacak düzenlemeleri içerir. Belirtilen adımlar GTM tarafındaki güncelleme ve geliştirmelere bağlı olarak küçük farklılıklar gösterebilir ³.

İlk olarak, GA4 kurulumuna bakalım.

Google Analytics: GA4

Öncelikle bir sekmede istemci, bir diğer sekmede de sunucu taraflı kapsayıcıyı açalım.

İstemci taraflı kapsayıcı içerisinde, daha önce kurduysanız kurulu olan, kurulu değilse etiketler bölümü aracılığı ile GA4 yapılandırma etiketini seçebilirsiniz. Send to server container seçimini aktifleştirip URL alanına sunucu taraflı kapsayıcıya ait URL'i eklemeniz yeterli. Bu işlemin ardından, sunucu taraflı kapsayıcıya GA4 aracılığı ile veriler gönderilmeye başlanacaktır. Şimdi, sırada bu verileri karşılayacak etiketimizin kurulumunda.

Sunucu taraflı kapsayıcıyı açıp Clients bölümünden GA4 istemcisini aktifleştirelim. Artık, istemci taraflı kapsayıcıdan sunucu taraflı kapsayıcıya GA4 aracılığı ile gelen verileri karşılayabileceğiz.

O halde, Tags bölümünde GA4 etiketimizi oluşturabiliriz.

Tetikleyici olarak da GA4 istemcisi üzerinden gelen isteklere karşılık verebilmek adına Client Name için GA4 değerini verebiliriz.

Bu işlem sonrasında, istemci tarafında GA4 üzerinden gelen verileri sunucu tarafında ilgili etiket üzerinden işleyebileceğiz.

Google Analytics: UA

Universal Analytics (UA) kurulumu için de birkaç adım dışında benzer adımları izleyeceğiz.

Öncelikle, yine ilk işlemimizi istemci tarafında çalışan web kapsayıcısı üzerinde gerçekleştireceğiz. UA etiketine ait yapılandırma ayarlarını açalım ve Advanced Configuration altında yer alan burada yer alan Transport URL alanına sunucu taraflı kapsayıcı için edindiğimiz transport_url değerini yapıştıralım.

Bu işlemin ardından, UA ile ilişkili tüm verilere artık sunucu taraflı kapsayıcı ile ulaşabileceğiz. Artık, sunucu taraflı kapsayıcıda UA verileri ile ilişkilendirilecek etiketimizi kurabiliriz.

Yine İstemciler (clients) altından ilgili istemciyi aktifleştirmemiz gerekmekte; Google Analytics: Universal Analytics.

İstemcinin tanımlanmasının ardından Etiketler (tags) altında UA etiketimizi oluşturabiliriz.

UA için de işlemlerimiz tamamlanmış durumda. Preview modunda (hem web hem de server kapsayıcıları için) test ederek ilgili etkinliklerin ve sayfa görüntülemelerin doğru bir şekilde iletilip iletilmediğini kontrol edebiliriz¹².

Her şey yolunda görünüyor.

Google Analytics: Ads

Google Ads etiketlerinin kurulumunda, sunucu tarafında web kapsayıcısından gelen tüm sayfa görüntüleme ve etkinlikler temel alınabilir. Örneğin, yeniden pazarlama (remarketing) etiket kurulumu şu şekilde gerçekleştirilebilir.

Yeniden Pazarlama Etiketi

Sunucu tabanlı kapsayıcıya ait etiketler bölümünden Google Ads Remarketing etiketini seçip Conversion ID bölümüne Ads panelinizin üzerinden oluşturduğunuz dönüşüm kimliğini (ID) yapıştırmalısınız.

Bu işlemin ardından, tetikleyici (trigger) olarak All Pages seçimini yapmanız yeterli olacaktır¹³.

Dönüşüm Etiketi

Dönüşüm etiketini sayfa görüntüleme ve/veya bir etkinlik ile ilişkilendirmek mümkün. Her iki durum için de işlemleri yine yeniden pazarlama etiketinde olduğu gibi sunucu taraflı kapsayıcı içerisinde gerçekleştirmekteyiz. Şayet, dönüşüm tanımı bir sayfa görüntüleme ile ilişkilendirilecekse yeniden pazarlama etiketi ile benzer şekilde tetikleyici (trigger) olarak All Pages seçimi kullanılabilir¹⁴.

Ancak, eğer bir etkinlik ile ilişkilendirilmesi gerekiyorsa, bu durumda web kapsayıcısı üzerinden gelen etkinlikleri göz önünde bulundurmamız gerekir. Sunucu taraflı kapsayıcıya iletilen etkinlikleri görüntülemek için ilgili kapsayıcıyı Preview modunda izlemeniz yeterli olacaktır. Eğer dönüşüm işlemi için purchase etkinliğini temel almak istiyorsanız ancak bu etkinlik sunucu tarafına iletilmiyorsa sunucu taraflı kapsayıcıdaki dönüşüm etiketi de tetiklen(e)meyecektir. Bu durumda, öncelikle web kapsayıcısında ilgili etkinlik için bir GA4 Event etiketi oluşturmamız gerekir.

Bu etkinlik içerisinde gerekiyor ise parametrelere de (kullanıcı, ürün, vb.) yer verebilirsiniz. Ancak, parametre tanımı zorunlu değil.

Bu işlemin ardından, artık sunucu taraflı kapsayıcıya purchase etkinliği düşecektir. Artık bu etiket ile ilişkilendirilecek dönüşüm etiketini kurabiliriz. Tıpkı web kapsayıcısında olduğu gibi, etiketler altında bulunan Google Ads Conversion Tracking etiketini seçip Ads paneli aracılığı ile oluşturduğumuz dönüşüm etiketine ait ID ve etiket alanlarını doğru bir şekilde doldurmamız yeterli.

Tetikleyici olarak ise az önce yapılandırma işlemini tamamladığımız purchase etkinliğini seçebiliriz.

What Is Server Side Tagging. Elevar ↩
GTM Server Side Tagging Tutorial. Optimize Smart ↩
Server-side Google Tag Manager (sGTM). DNOMIA ↩ ↩ ↩
Server-side Tagging in Google Tag Manager ↩
"Server-side tagging". Google Tag Manager ↩
Farklı sunucu işlemleri ile ilgili "App Engine Setup Guide". Google Tag Manager ve Manual setup guide. Google Tag Manager dokümanları incelenebilir. İlerleyen zaman içerisinde de bu konuda ayrıca bir yazı yayınlayacağım. ↩ ↩
How To Create Server Side Container For GTM ↩
How To Configure DNS For Server Side Container. Elevar ↩
Varsayılan ayarlara sahip bir GCP projesi sunucusu çoğu durumda ücretsizdir. Özelleştirilmiş tercihlerin ücretlendirmesi değişkenlik gösterebilir. Bkz. "How much does the default deployment cost?". Google Tag Manager ↩
Stand by while your server is created. This may take a few minutes. ibaresi neticesinde GCP üzerinde sunucunuz oluşturulacak ve size ilgili kuruluma ait proje bilgileri iletilecektir. ↩
Send data to server-side Google Tag Manager ↩
Common event data. Google Tag Manager ↩
Google Ads remarketing. Google Tag Manager ↩
Google Ads conversions. Google Tag Manager ↩