GTM ile DataLayer Kullanmadan Ürün Değerlerini Dinamik Olarak Çekme

IOS 14,5 hayatımıza girmesiyle Server side, Capi derken GTM ile daha fazla haşır neşir olmaya ve DataLayer kavramını sıklıkla duymaya başladık. Kısaca nedir bu DataLayer diyecek olursak, kullanıcılar ve hizmetler arasında kolay bir şekilde bilgi alışverişi yapmak için oluşturulmuş bir JavaScript nesnesidir.

E-ticaret dönüşümlerini Facebook Capi üzerine oluşturmaya çalışırken sıklıkla rastladığım sorunlardan birisi kullanılan bazı alt yapıların ürün/sepet/ödeme sayfalarında dataLayer’in olmaması ve arka plana müdahale etmek için yazılım bilmiyorsak bu durum işin içinden çıkılamaz bir hal alıyor. Neyse ki Google Tag Manager ile DataLayer kullanmadan sitemiz üzerindeki değerleri dinamik olarak çekebilme imkanına sahibiz.

Gelin bu işlemi nasıl yaptığımızı Prestashop alt yapısına sahip bir e-ticaret sitesinden ürün sayfaları için Facebook ViewContent event‘ini tanımlayalım. Ardından oluşturduğumuz Facebook Conversiyon API sine gönderelim.

Google Tag Manager Üzerinden Değişken Oluşturma

İlk olarak sitemizden çekmek istediğimiz değerleri GTM üzerinden bir değişkene tanımlamamız gerekiyor. ViewContent eventi için aşağıdaki değerleri dinamik olarak çekebiliriz.

content_name: 'Really Fast Running Shoes',   
content_category: 'Apparel & Accessories > Shoes',   
content_ids: ['1234'],   
content_type: 'product',   
value: 0.50,   
currency: 'USD'

Content_name Variable

Ürün başlığını değişkene tanımlayabilmemiz için ürün sayfamızdaki başlıklara giden Js Yolunu bulmamız gerekiyor. Js yolunu bulmamız için sırasıyla şu adımları yapalım.

Ardından Console penceresinden kopyaladığımız değeri yapıştıralım ve sonuna .innerText fonksiyonunu yazalım

Bu js yolu bize ürünün dinamik olarak ismini verdi, isterseniz farklı bir ürün sayfasında kopyaladığınız js yolunu console yapıştırarak ürünün ismini alıp almadığınızı kontrol edebilirsiniz.

Şimdi GTM üzerinden ürün ismi için dinamik bir değişken tanımlayalım. Sırasıyla şu adımları uygulayalım.

Değişkenler / Yeni / Değişken Türü = JavaScript Değişkeni

function product () {
 var urunadi = KOPYALADIGINIZ_JS_YOLU ;
 return urunadi;
 }

Content_catagory Variable

Content_name değişkenini oluştururken izlediğimiz adımların aynısını content_catagory içinde izliyoruz.

Ürün sayfasındaki Breadcrumb kısmından bulunduğu kategoriyi seçiyoruz ve js yolunu kopyalıyoruz. Ardından yeni bir değişkene tanımlıyoruz.

Value (Product Price) Variable

Ürün fiyatı kısmı yukardaki adımlardan biraz farklı. Ürün fiyatının aynı şekilde js yolunu kopyalıyoruz fakat eğer ürün fiyatının bulunduğu <span> ‘da döviz simgesi yer alıyorsa fiyatı bunlardan arındırmalıyız.

var fiyat = URUN_FIYATI_JS_YOLU.innerText.split("₺")[0]
 fiyat = fiyat.trim();

Console kısmına yukarıdaki değeri yapıştırdıktan sonra fiyat olarak tekrar çalıştırın eğer ürünün fiyat değerini alamıyorsanız [0] değerini 1 veya 2 olarak değiştirerek deneyin.

Js yolunu bulduğumuza göre artık ürün fiyatı için değişken oluşturabiliriz.

function test(){
 var fiyat = URUN_FIYATI_JS_YOLU.innerText.split("₺")[0]
 fiyat = fiyat.trim();
  
var yenifiyat = fiyat.replace(",",".")

var pricenum = parseFloat(yenifiyat) 

return pricenum

Content_ids Variable

Content_name, content_catagory kısımları ile aynı adımları uygulayarak tanımlayabilirsiniz.

Ancak ViewContent eventinde dikkat edilmesi gereken bir nokta var. Ürünleriniz için tanımlayacağımız content_ids değeri, facebook kataloğunu daha önceden tanımladıysanız katalog içerisindeki content_ids değeri ile aynı olmalıdır, aksi taktirde kataloğunuzdaki ürünler ViewContent eventi çalıştığı zaman birbiri ile eşleşmez dolayısıyla Dinamik yeniden pazarlama kampanyalarınız sağlıklı çalışmaz.

GA4 Event Yapılandırması

DataLayer Oluşturma

Şimdi oluşturduğumuz değişkenleri ürün sayfamıza DataLayer olarak push edeceğiz ardından GA4 event etiketi oluşturarak eventimizi Server side conteiner ile Facebook’a göndereceğiz. Eğer server side container ve Facebook Capi kurulumu yapmadıysanız bu kaynakları inceleyebilirsiniz.

• Server-side Tagging In Google Tag Manager
• Facebook Capi Gtm Server Side Tagging
• GTM ile Facebook Conversion (Dönüşüm) API Kurulumu Nasıl Yapılır?

Şimdi yeni bir HTML etiketi oluşturuyoruz. Aşağıdaki değerleri kendi değişkenlerimize göre yapılandırıyoruz.

// Dikkat Bu GA4 için yapılandırılmış DataLayerdır.
dataLayer.push({
   'event': 'view_item_list',
   'ecommerce': {
     'items': [{
        'item_name': '[urun-adi]', // Ürün Adı / Tip: string (gerekli)
        'item_id': '[benzersiz-urun-id]', // Benzersiz Ürün ID'si / Tip: string (gerekli)
        'price': '[urun-fiyati]', // Ürün Fiyatı / Tip: numeric (gerekli)
        'item_brand': '[urun-markasi]', // Ürün Markası / Tip: string (opsiyonel)
        'item_category': '[urun-kategorisi]', // Ürün Kategorisi / Tip: string (opsiyonel)
      }]
   }
 });

Tetikleyiciyi kullanıcı ürün sayfalarına geldiğinde çalışacak şekilde yapılandıralım.

GA4 Event Oluşturma

Geldik son adıma Facebook Capi için GA4 eventi oluşturacağız. Eğer siz server side ve capi kurulumlarını tamamlamadıysanız yukarıda bahsettiğim sayfaları inceleyerek oluşrabilirsiniz.

Yeni bir GA4 event etiketi oluşralım ve etkinlik parametrelerini aşağıdaki gibi yapılandıralım.

test_event_code kısmını kendi Facebook Olay yönetici panelinizden alabilirsiniz.

Artık server ve web konteynerlarımızı önizleme moduna alarak test edebiliriz.

Sonuç

Artık web sitemizden bir geliştirici yardımı almadan dinamik olarak değerleri kendimiz çekebileceğiz ve arka plana erişim sağlamadan DataLayer oluşturabileceğiz. Konumuz Server Side kurumu yada Facebook Capi kurulumu olmadığı için o konulara değinmedim yukarıda belirttiğim linklerden kurulum için gerekli adımları inceleyebilirsiniz. Konu ile alakalı bir sorunuz yada hatalı bir işlem farkederseniz benimle mail yolu ile iletişime geçebilirsiniz. Keyifli denemeler…