Makaleye başlamadan önce her ne kadar tamamını bu yazımızda görmesek bile Facebook Pixel, Google Analytics ve ya Yandex Metrica gibi veri toplama araçlarının ne işe yaradığını bildiğinizi varsayıyorum.
Google Tag Manager (GTM), veri toplama araçlarının scriptlerini yönetebilmenize yardımcı TMS (tag management system) araçlarından birisidir.
GTM, 3 önemli içeriye sahiptir. Bu içerikler sırayla: Tags: Etiketler, Triggers: Tetikleyiciler ve Variables: Değişkenlerdir. Bu içerikler bir biri ile ilişki içerisinde çalışırlar. Şöyle ki; Değişkenler, kullanıcının sitede yaptığı tüm eylemlerdir. Bu şekilde aklınızda tutmanızı öneriyorum. Çünkü esasında değişken sadece kullanıcı eylemleri için değildir. Bu eylemleri Tetikleyici gözlemler (dinler) ve uygun şartın karşılandığı her eylemi bağlı olduğu Etikete bildirir. Bu şekilde Etiket, örneğin Facebook Pixel’e sepete ekle gibi eylemleri göndermiş olur.
Soru: Peki Facebook Pixel script kodunu direk sitemize ekleyemez miyiz?
Cevap: Tabi ki ekleyebiliriz.
Soru: O zaman Google Tag Manager’a ne ihtiyacımız var?
Cevap: Bunu bir örnekle anlatmak daha iyi olur. Faraza Facebook Pixel sadece Sepete Ekle özelliğini kabul ediyor ve sitemizde kimler sepete eklemiş bunu bize bildirme üzerine kurulmuş bir algoritmadır. Google Analytics 4 bize sadece hangi coğrafi konumlardan girdiklerini göstermekte ve Yandex Metrica da sadece ısı haritalarını kullanma üzerine kuruludur. Her üçü de çok güzel özellikler sunuyor ve hepsinden faydalanmak doğal hakkım, değil mi? Bu sefer yapmam gereken hepsini tek tek siteme yerleştirmek olacaktır. Burası da bir ihtimal çok kolaydır ama iş bununla bitmiyor be kardeşim. Hem bitse o da iyi. Buradaki hassas konu senin site altyapı kodları ile oynaman olacaktır, ki bu da bilip bilmeden, kaş yapayım derken göz çıkarmana sebep olabilir.
Netice ve Öneri 💡: Bu karmaşa içerisinde işte GTM ağabey yardımımıza koşuyor. Diyor ki mealen; sen sitene bunları yerleştirmekle uğraşma koçum. Sadece beni yerleştir ve ben onlara ne lazımsa gönderirim. Mesele bundan ibaret.
GTM nedir, ne işe yarar kısmını az da olsa çözdüğümüze göre ikinci aşamaya geçebiliriz.
GTM içerisinde 3 adet içerik türünün olduğunu anlattık. Çok fazla teknik ayrıntılara girmeden içerik türlerini kısa başlıklar altında inceleyelim.
Variables sitedeki buton tıklama, link tıklama, sayfayı kaydırma, forum doldurma, video izleme gibi eylemlerdir. Bu değişkenlerden tüm sitelerde sabit olanları yakalamak için GTM bize hazır değişken türleri vermektedir. Mesela sayfa linki Page Url, Page Path, tıklama işlemleri Click Classes değişkenlerde tutuluyor. Bu ve benzeri sabit değişkenler haricinde her sitenin yapısı aynı olmadığından ürün fiyatı, ismi gibi özel değişkenlerin takibi için Javascript ile özel fonksiyon (kullanıcı tanımlı değişken) yazarak izleyebiliriz. Fakat bunlar için şimdiden kafanızı karıştırmayalım.
Bir sonraki gelen içerik türü Triggers: Tetikleyici fonksiyonuna sahiptir. Değişkenlerin ne olduğundan bahsederken ismini saydığımız link tıklaması, buton tıklanması gibi değişkenlerin tamamını dinleyen içerik türüdür. Pratik kısmına az kaldı sabr edin 🙂
Ve son olarak da ilk başta yer alan içerik türü Tags. Siteden almak istediğimiz verilerin etiket halinde bir araya topladığımız alandır.
Toparlayalım:
1. Tags emir komutadır. Bir takım emirler içerir; “Sepete ekle eylemini bul getir bana koçum” der.
2. Bunu Tetikleyici dinler. Der ki mesela Sepete Ekleme eyleminde Click Classes değişkeni içinde addtocart değeri geçiyor. Demek bu buton tıklama işlemi Sepete Eklemedir. Tabi yazılımcı başka buton classes’ına addtocart koymadıysa 🙂
İçerik türlerin ne olduğunu artık bildiğimize göre, aralarındaki ilişkiden bahsedelim.
Siteyi önizleme penceresinde açtığımız zaman arka planda bazı işlemler gerçeklenir. İşinin teknik tarafına fazla girmeden kısaca belirtmek isterim ki bu işlemler sitenin yapısıdır. Bu yüzden yüklenirken bir kaç varsayılan tetikleyici de tetiklenir. Bunlar sırayla; Consent Initialization, Initialization, Container Loaded, DOM Ready ve Windows Loaded’dır. Sitenin yapısına daha fazla tetikleyiciler de yüklenebilir ama bu 5 temel tetikleyici mutlaka otomatik tetiklenir ve hepsi sayfa görüntüleme tetikleyicilerdir.
Şimdi işin pratik tarafına geçerek örnekler üzerinden devam edelim.
Örneğin Facebook Pixel’e ViewContent eventını göndermek istiyorsunuz. Bu event ürün ölçümlerinin takibi için gerekli olduğu için sadece ürün sayfalarında tetiklenecek şekilde ayarlanması gerekiyor.
Demek oluyor ki sitemizde ürün sayfalarını ana sayfa, iletişim sayfası ve ya sipariş sayfası gibi sayfalarından ayıran bir özelliğin bulunması gerekiyor. Bu farkı bulmak için GTM’in önizleme penceresi bize yardımcı olacaktır.
Container Loaded tetikleyicisini kontrol ettiğimiz zaman ürün sayfa linklerinin diğer linklerden ayıran özelliğin, link içinde yer alan “urun” ve ya “product” değerinin olduğunu göreceğiz. Örneğin test sitemizde yer alan ürün sayfalarının /urun/ ile ayrıldığını görebiliriz ⤵️
- https://gtm.highping.com.tr/urun/assorted-coffee
- https://gtm.highping.com.tr/urun/fresh-organic-honey
- https://gtm.highping.com.tr/urun/pulses-from-organic-farm
Örnekler üzerinden giderek izah edelim. Mesela Facebook Pixel’e müşterinin Sepete Ekle aksiyonlarını göndermek istiyoruz. Bunun için öncelikle Sepete Ekle butonunu hangi Tetikleyici ve hangi Değişken içinde yer aldığını bulmak gerek. Bunun için Tetikleyiciler bölümünden Click tetikleyicisini şart eklemeden oluşturup tekrar önizlemeyi açıyoruz ve ürün sayfasından ürünü sepete ekliyoruz. Tetiklenen Click Tetikleyicisinin değişkenlerine baktığımızda Click Classes değişkenin ‘single_add_to_cart_button button alt’ değerini aldığını öğrenmiş olduk. Eğer öncesinde bunu biliyorsanız tabi direkt de ekleyebilirsiniz. (Benim sitemde değer bu şekildedir. Sizde farklı değer olabilir.)
Bunu öğrendiğimize göre artık Click tetikleyicisine Click Classes değişkeni “single_add_to_cart_button button alt” değerini içersin şartı ekleyebiliriz.
Son olarak hazır olan bu tetikleyiciyi Facebook Pixel’e Sepete Ekleme etkinliği olarak olarak gönderebiliriz. Bunun için Özel HTML etiketinde Facebook Sepete Ekle scriptni eklememiz gerekiyor. Script kodumuz:
<script>
fbq(‘track’, ‘AddToCart’);
</script>
Etiketi kaydederek işlemi test edebilirsiniz. Bunun için önizlemeyi yeniden açmamız gerektiğini unutmayın.
Google Tag Manager ile en temel script eklemeyi anlatmaya çalıştık. Umarım faydalı olmuştur.