GTM ile Emarsys Kodlarının Yerleştirilmesi

Bu yazıda sizlere Google Tag Manager(GTM) kullanarak “Emarsys” kodlarının nasıl web-sitenize yerleştirebileceğinizden bahsedeceğim, Bundan bahsetmeden önce , insanların bu bilgileri nerede kullanacağını ve neden bu implementasyona ihtiyacı olacağını kısaca anlatmam gerekiyor. Öncelikle “Emarsys” özel bir pazarlama şirketi olup sizin web-siteniz üzerinden elde ettiği verilerle, çeşitli kanallar üzerinden sitenize gelen kullanıcıları tekrar hedeflemenizi sağlamayı hedefleyen bir şirket. Bu durumda, eğer bu şirket ile bir anlaşmanız var ise ve kullanacakları verileri bu şirketin veri tabanına gönderip site içerisinde belirli aksiyonları gerçekleştirmiş kullanıcıları tekrar hedeflemeyi istiyorsanız, bu kullanıcı verilerinin doğru bir şekilde “Emarsys” veri tabanına aktarılması gerekmektedir.

Eğer ki doğru bir şekilde hedefleme amaçlanıyor ise, Şirketin baz aldığı “HTML” kodunun GTM üzerinde her sayfanın ‘pageview’ eventinde tetikleyip, sizin web sitenizde aksiyona geçen kullanıcıların bilgilerini, kendi veri tabanına doğru bir şekilde aktarılmasını sağlamanız gerekmektedir. Bunun için de, “Emarsys” tarafının size vermiş olduğu ve internet üzerinden de kolayca bulabileceğiniz gibi şu şekilde bi HTML kodunu web-sitenize yerleştirmeniz gerekiyor;

<script type="text/javascript">;
  var ecom = {{dlv - ecommerce}};
  var pagecat = {{dlv - ecommerce.detail.products.category}};
  var cartcontent = {{dlv - ecommerce.checkout.products}};
  var login = {{cJs - isUserLoggedIn}};
  
  var ScarabQueue = ScarabQueue || [];
  
  (function(id) {
    if (document.getElementById(id)) return;
    var js = document.createElement('script'); js.id = id;
    js.src = '//cdn.scarabresearch.com/js/BURAYA İŞLETME ID'Sİ GELECEK/scarab-v2.js';
    var fs = document.getElementsByTagName('script')[0];
    fs.parentNode.insertBefore(js, fs);
  })('scarab-js-api');
  if ( login == true ) {
  ScarabQueue.push( ['setCustomerId', '{{dlv - userId}}' ] );
  }
  
  if ( ecom && ecom.detail ) {
    ScarabQueue.push( ['view', ecom.detail.products[0].id ] );
  }
  
  if ( pagecat && ( "undefined" != typeof pagecat ) && ( "" != pagecat ) ) {
    ScarabQueue.push( ['category', pagecat ] );
  }
  
  if ( "object" == typeof cartcontent ) {
    ScarabQueue.push( ['cart', cartcontent ] );
  }

  if ( ecom && ecom.purchase ) {
    var emarsys_purchase_command = {
      "orderId": ecom.purchase.actionField.id,
      "items": []
    }
    
    for ( var i=0; i<ecom.purchase.products.length; i++ ) {
      emarsys_purchase_command.items.push({
        "item": ecom.purchase.products[ i ].id,
        "quantity": ecom.purchase.products[ i ].quantity,
        "price": ecom.purchase.products[ i ].price,
      });
    }

    ScarabQueue.push( ['purchase', emarsys_purchase_command ] );
  }
  
  ScarabQueue.push( ['go'] );
</script>

Bu kodun her sayfada aktive olması gerekmekte olup, bazı değişkenlerin de bu kod içerisine yerleştirilmesi gerekmektedir. Bu değişkenlerin de sağlıklı bir şekilde yerleştirilmesi için, web-sitesinde, öncelikle Google ‘ ın tanıdığı enhanced e-commerce dataLayer yapısının tam olarak kurgulanmış olması, işleri şüphesiz ki hızlandıracaktır. Örnek olarak verdiğim kod yapısında kendi web sitenize göre değiştirmeniz gereken GTM değişkenlerinin bulunduğunu fark etmişsinizdir. Buraya eklenmesi gereken değişkenlerden kısaca bahsetmek gerekirse;

Değişkenler

User Id:

Bu kısımda kullanılan kod iki çeşit olarak bulunabilir. İlki benim de kullandığım gibi ‘User Id’ içeren ve emarsys tarafına kullanıcıların tekilleştirilmesi için kullanılan Id’yi gönderilmesini sağlayan versiyonu, buna ek olarak ikinci versiyonda kullanıcıların e-mail adreslerini de gönderebileceğiniz bir kod yapısı içermektedir. Bu iki seçenekten hangisini seçeceğinizi de emarsys tarafında yapılan kurguya bağlı olarak belirleyebilirsiniz.

Ecom:

Bunlardan birincisi “ecom” adlı değişken, bu değişken sizin “enhanced e-commerce” üzerinde gerekli aksiyonlarda, web-sitesinde, dataLayer üzerine bastığınız “ecommerce” layer’ı olacak şekilde GTM üzerinde değişken olarak tanımlanmalıdır. Bu sayede her sayfada çalışan emarsys kodu her seferinde sitenin kaynak kodundan gerekli bilgileri alabilecektir.

Pagecat:

Buna ek olarak “pagecat” değişkeni, yine “Enhanced E-commerce” yapısında, kullanıcılan bulunduğu sayfanın kategorisi olarak basılan dataLayer değikşenine denk gelen değişken olarak ayarlanmalıdır. Fakat, bu değişken özelinde, eğerki sayfada gerçekleşen gelişmiş e-ticaret event’i ‘pageview’ den sonra çalışıyor ise emarsys kodu her sayfanın ‘pageview’ event’inde çalıştığı için bu bilgiyi dataLayer üzerinden toplayamayabilirsiniz. Bu durumda da ilk seçenek olarak event önceliklerini değiştirebilirsiniz ya da başka bir seçenek olarak sayfanın kaynak kodundan ( dataLayer’da yer alan kategori bilgisiyle birebir eşleşecek şekilde ) kategori bilgilerini alabilirsiniz.

Cart Content:

Son değişken olarak belirttiğimiz “cartcontent” değişkeni ise web-sitesinde kullanıcıların sepetinde bulundurdukları ürünleri gösteren ve yine “Enhanced E-commerce” yapısında “checkout“ ve “purchase” aşamalarında kullanılan “cart” isimli array’ i içermelidir.

Emarsys ID:

En önemli nokta olarak bahsi geçen koda “Emarsys” veritabanının sizin web-sitenizden gelen veriyi tanımlayabilmesi için gereken işletme Id’sini “BURAYA İŞLETME ID’Sİ GELECEK” şeklinde belirttiğim kısıma yerleştirmeniz gerekmektedir.Bu Id Emarsys müşterisi olan işletmeleri tanımlamak için kullanılır.

Cart:

Bu adıma kadar her şey çok yolunda gitse de “Emarsys” firması doğru bir şekilde hedefleme yapabilmek için, kullanıcının gezdiği her sayfada “cart” event’inin basılmasını istemekte ki doğru bir hedefleme yapabilsin, fakat “enhanced e-commerce” yapısına göre sadece “checkout” ve “purchase” adımlarında basılan bu bilgiler web-sitenizin alt yapısında değişiklik yapmanıza sebep olabilir. Bu durum için eğer ki kolay yoldan bu bilgiyi sitenin alt yapısından alabiliyorsanız bir “cookie” veya “session storage” yaratıp bu bilgileri bunun üzerine yazdırabilir ya da aynı bilgileri yazılımcınızdan (ki bu siz de olabilirsiniz) her sayfanın kaynak koduna eklemesini (eğer ki sitenizin performansını etkilemiyor ise) isteyebilirsiniz.

Tüm bu kurulumları tamamladıktan sonra kurulumun doğruluğunu kontrol etmek için tarayıcınıza Inspector adlı extension’ı ekleyerek gerekli sayfalarda gerekli eventlerin çalıştığını ve doğru verilerin gönderildiğini test edebilirsiniz. Bu extension Emarsys tarafından sağlanmakta olup ücretsiz olarak edinilebilir bir şekilde, yükleme talimatlarıyla birlikte sitelerinde sunulmaktadır.

Bu bilgiler doğrultusunda, eğer “Emarsys” kodlarını sitenize “Google Tag Manager” kullanarak eklemek istiyorsanız. Bahsettiğim bu bilgileri kullanabilirsiniz. Ek olarak GTM üzerinden uygulamalı gösterim ve debug için kullanılan Emarsys in önerdiği Inspector Extension’ı hakkında daha detaylı bilgiyi bu yazının sonraki parçasında paylaşacağım.

Teşekkürler,