Facebook Pikselinin Tag Manager Üzerinden Kurulumu Nasıl Yapılır?

2
80

Facebook Piksel’i Nedir ve Ne İşe Yarar?

Basitçe Facebook Piksel‘i, sitenize Facebook üzerinden gelen ziyaretçileri takip etmenizi sağlayan bir kod parçasıdır. “.. ben Analytics üzerinden görüyorum zaten Facebook’tan gelen kişileri” dediğinizi duyar gibiyim. Bu tanımı genişletelim.

Google’da olduğu gibi Facebook da reklam rotasyonları, otomatik teklif verme v.b. işlemler için  makine öğreniminden yararlanır. Makine öğreniminin doğru bir şekilde gerçekleşmesi için de dataya ihtiyaç vardır. Bu Piksel sayesinde bu datayı biz Facebook’a göndermiş oluruz. Aynı zamanda bu Facebook Reklam Yöneticisindeki raporlarımıza da yansır. Yani Facebook panelinde “bir reklam kaç satış elde etmişiz”in cevabını Facebook Piksel’ini kurmadan göremeyiz. Çoğu analiz tek bir yerden (örn. Google Analytics) yapıldığı için genel uygulama bu satış/dönüşüm verilerinin gözükmesi için değildir.

Facebook Piksel’i 2 kısımdan oluşur. Ana kısım hem Facebook SDK’sini içeren ve default olarak “pageview” eventini içeren kısımdır. İkincisi kısım ise olaylar (event) kısmıdır. Bu kısımda ziyaretçinin arama yapması, bir ürünü sepete eklemesi, bir ürünü favorilere eklemesi, ödeme bilgilerini kaydetmesi, siparişi tamamlaması gibi olayları Facebook’a bildiririz. Şimdi genel kullanım alanlarına geçebiliriz.

  • Yukarıda da bahsettiğim gibi Facebook Reklam Yöneticisinde sipariş verilerinin gözükmesini sağlar.
  • Facebook makine öğrenimini iyileştirerek, reklam rotasyonu, bütçe optimizasyonu ve otomatik teklif işlemlerini çok daha performans odaklı gerçekleştirir.
  • Sitemizi ziyaret eden ya da belli bir olayı yapan/yapmayan kişiler için remarketing kampanyaları oluşturmamızı sağlar.
  • Katalog reklamları oluşturmamızı sağlar. Facebook Katalog kısmına eklediğimiz ürün feedimizdeki ürünleri, Pikselden gelen verilerle eşleştirerek, kimin hangi ürünü gezdiğini anlar. Biz de bu kişilere gezdikleri ürünleri satabilmek için Facebook’ta reklam gösteririz. (tabii sadece gezenlere değil farklı kombinasyonlar da yapılabilir. Upselling, sepete ekleyen satın almayan, ödeme terk v.b.)
  • Facebook Piksel‘i AdWords’ün Dönüşüm İzleme Kodunun aksine hem remarketing hem de dönüşüm izleme için olduğu gibi kullanılır.

Facebook Piksel Kurulum Adımları

Sitenizde GTM (değişken ve tetikleyiciler ile beraber) kuruluysa, direk “D” adımına geçebilirsiniz.

A) Google Tag Manager ve dataLayer’ın kurulumu

Sitenizde Google Tag Manager’ın doğru olarak kurulduğuna emin olunuz. Tag Manager kurulu ise dataLayer oluşturmanız gerekli. (bkz. dataLayer nedir?) Facebook’a göndereceğimiz verileri dataLayer’da hazırlayalım.

  • Ürün detay ve kategori sayfalarında ürün idleri (kategori sayfasında scroll etmeden kaç ürün gözüküyorsa onların idleri)
  • Ürün detay sayfasında ürünün fiyatı
  • UserID kullanılacaksa giriş yapmış kullanıcıların her sayfada basılan mail adresi, telefon numarası, ad ve soyadı, cinsiyeti (bu yazıda anlatılmayacaktır)
  • Sepet ve sonraki adımlar için sepet içeriği (Json halde)
  • Sayfa tipi
  • Para Birimi (ISO 4217)
  • Arama sayfasında arama sorgusu ve çıkan ürünlerin idleri

Yani sayfa türlerinize göre dataLayer yapılandırması aşağıdaki gibi olmalıdır.

Ürün Detay:

Kategori:

Arama Sayfası:

Sepet ve Sonraki Adımlar:

Çok fazla detaya girmenizi önermiyorum. dataLayer’ı ilgili sayfalarda bu şekilde yapılandırmanız yeterli olacaktır. Bu veriler Google Tag Manager’ın kodunun üstünde <head></head> arasında herhangi bir yerde olabilir.

B) dataLayer’daki Verilerin GTM’e (Google Tag Manager) Değişken Olarak Atanması

Yukarıda dataLayer’a eklediğimiz verileri GTM’de kullanabilmemiz, Facebook v.b. etiketlere entegre edebilmemiz için bu dataLayer objelerinden değişken oluşturmamız gerekli. Aşağıdaki resimde bir tanesinin yapılışını göstereceğim. Diğerlerini aynı şekilde sadece ismini değiştirerek ekleyebilirsiniz.

gtm sidebar

Kullanıcı tanımlı değişkenler sayfasında “YENİ” butonuna tıklıyoruz.

gtm değişkenler

Açılan sayfada “Veri Katmanı Değişkeni” seçeneğini seçiyoruz.

gtm değişken detay

Aşağıdaki gibi dolduruyoruz.

gtm değişken detay

Son olarak kaydete basıyoruz. Toplamda; (cartcontents, pagetype, searchresults, searchstring, productid, productname, productprice, productcategory, currency) 9 adet değişken oluşturuyoruz.

C) GTM’de Triggerlar Oluşturmak

Ekleyeceğimiz Facebook Piksel kodlarının hangi sayfada ya da olayda tetikleneceğini belirlemek için trigger yani tetikleyici oluşturmamız gerekli.

  • Ürün Sayfası Görüntüleme
  • Kategori Sayfası Görüntüleme
  • Tüm Sayfalar (Default olarak geliyor)
  • Sepet Sayfası Görüntüleme
  • Adres Sayfası Görüntüleme
  • Ödeme Sayfası Görüntüleme
  • Üyelik Sayfası Görüntüleme
  • Sipariş Tamamlandı Sayfası Görüntüleme
  • Sepete Ekle Butonu Tıklama
  • Üye Ol Butonu Tıklama
  • Sipariş Ver Butonuna Tıklama (sepetten sonraki adıma geçmek için)
  • Özet Sayfası Görüntüleme

Yukarıdaki Triggerları GTM üzerinden kuruyoruz. Ben 2 farklı tıklama ve görüntüleme tetikleyicilerinin nasıl kurulacağını aşağıda göstereceğim. Bunu baz alarak diğerlerini kurabilirsiniz.

Sayfa görüntüleme triggerları ya urlden ya da dataLayer’a gönderdiğimiz ‘pagetype’ ile kuracağız.

gtm değişken detay

Buton tıklama triggerını kurabilmemiz için ilk olarak built-in değişkenleri aktifleştirmemiz gerekli. Çünkü şöyle bir mantık uygulayacağız; tıklamaları kontrol et, eğer tıklanan elementin css id’si şu ise triggerı çalıştır.

Sepete ekle butonunun css id’sini bulmamız gerekli. Bunun için tarayıcınızda ilgili elementin üstüne gelip sağ tıklayıp inspect yapınız. ‘id’ kısmını not ediniz. Daha doğru kullanmı butonun tıklandığını javascript ile (event listener) takip edip, dataLayer’a custom event atamaktır. Fakat biraz ileri bir konu olduğu için şimdilik yukarıda bahsettiğim şekilde ilerleyelim.

inspect button

Yukarıdaki resimdeki gibi id’yi alıp aşağıdaki resimde görünen ‘Click ID’ kısmına yazıyoruz.

sepete ekle trigger

Daha sonra kaydedip bu triggerımızı da oluşturuyoruz. Bu işlemleri yukarıda saydığım tüm tetikleyiciler için yapmamız gerekli.

 D) Facebook Piksellerini Ekleme

Yazının ilk başında da bahsettiğim üzere Facebook Piksel’in 2 kısmı bulunmakta. İlk kısmı her sayfada çalışması gereken, default pageview olayının ve SDK’nın bulunduğu kısım, ikincisi ise olay kısmı. Örnek olarak sadece olay kısmını eklerseniz Piksel çalışmaz. Hatta tarayıcı konsolunda “fbq not defined” hatası alırsınız.

Facebook Pikseli Nasıl Oluşturulur?

Facebook hesabınızda ya da Business Manager üzerinden Piksel oluşturmak mümkün. Olay yöneticisi altından, Pikseller’e tıklıyoruz.
pixel kurulumu

Veri Kaynağı Ekle butonuna tıklayıp, Facebok Pikselini seçiyoruz.

piksel ekle

 

Bir kurulum yöntemi seçin” kısmında “Kodu Kendiniz Manuel Olarak Yükleyin“seçeneğini seçiyoruz.

manuel piksel ekleme

Piksel adı kısmına tanımlayıcı bir şey yazıp “Oluştur” butonuna tıklıyoruz.

Sonraki ekranda Piksel Kodunu Yükleme kısmı çıkıyor. Burada gördüğünüz ilk kod parçası Facebook Ana Piksel kodudur. Bunu kopyalıyoruz.ana facebook piksel kodu

1) GTM Etiket Adı: FB – Main

Google Tag Manager’a girip Etiketler kısmında “YENİ” butonuna basıyoruz.

fb main code

Etiket türünü “Özel HTML” olarak seçiyoruz.

fb main html

Tetikleyici olarak “Tüm Sayfalar” seçip, “KAYDET” butonuna tıklıyoruz.

fb ma

Kaydettikten sonra Facebook paneline geri dönüp, “devam” butonuna basalım. Bu ekranda görecekleriniz ise olay ve olay parametreleridir. Yani ziyaretçilerin sayfa görüntülemesi, sepete bir şey eklemeleri, sipariş vermeleri gibi olayları burada yazan kodları GTM’e ekleyerek Facebook’a göndereceğiz.

Aşağıdaki resimde görünen ekranda takip etmek istediklerinizi seçin. Bu yazıda ana piksel dahil 7 tanesini ekleyeceğiz.

 

2) GTM Etiket Adı: FB – ViewContent (Product & Category)

Bu kod, içerik görüntüleme (yani ürün ya da kategori) olayını Facebook’a göndermek için kullanılır.

içerik görüntüleme

Kodu kopyaladıktan sonra GTM’de yeni etiket oluşturup içine yapıştırıyoruz.

Kodu yapıştırdıktan sonra “1” yazdığımız yerleri ilk maddede GTM’e eklediğimiz değişkenler ile değiştiriyoruz. “{{“ iki tane süslü parantez yazdığımız zaman zaten değişken listesi açılıyor oradan ilgili değişkeni seçiyoruz.

Ürün ve kategoriyi ayırmamız gerekecek. O nedenle bu etiketi 2 farklı biçimde ekleyelim.

Ürün İçin Kod:

Kategori İçin Kod:

Diğer etiketler için ekran görüntüsü koymaya gerek duymuyorum.

3) GTM Etiket Adı: FB – Search

Bu kod arama sayfasındaki arama yapılan terimi ve çıkan sonuçları Facebook’a göndermek için kullanılır.

Custom HTML Kod:

Tetikleyici: Arama Sayfası Görüntüleme

 

4) GTM Etiket Adı: FB – Add to Cart

Bu kod sepete ekleme olayını ve sepete eklenen ürünün bilgilerini Facebook’a göndermek için kullanılır.

Custom HTML Kod:

Tetikleyici: Sepete Ekle Buton Tıklama

 

5) GTM Etiket Adı: FB – Initiate Checkout

Bu kod alışveriş başlatma olayını Facebook’a göndermek için kullanılır.

Custom HTML Kod:

Tetikleyici: Sipariş Ver Butonuna Tıklama

 

6) GTM Etiket Adı: FB – Add Payment Info

Bu kod ödeme bilgilerinin girilmesi olayını Facebook’a göndermek için kullanılır.

Custom HTML Kod:

Tetikleyici: Eğer kart bilgileri girildikten sonra, ödeme alınmadan “özet” adımınız varsa bu kodu “özet sayfası görüntüleme” tetikleyicisi ile çalıştırın. Eğer yoksa, yani ödeme bilgileri girdikten sonraki adım sipariş tamamlandı ise, bu kodu adres bilgilerini girince çalıştırın.

 

7) GTM Etiket Adı: FB – Purchase

Bu kod başarılı bir alışveriş olayını ve satın alınan ürün bilgilerini Facebook’a göndermek için kullanılır.

Custom HTML Kod:

Tetikleyici: Sipariş Tamamlandı Sayfası Görüntüleme

Purchase etiketini de ekleyerek Facebook Piksel kurulumunu tamamladık. Aslında dataLayer’a verilerin basılması, GTM’de tetikleyicilerin oluşturulması her site için bir defa yapılması gereken işlemler. Daha sonra farklı tool entegrasyonları yapacağınız zaman tekrardan aynı işlemleri baştan yapmanız gerekmeyecek.

Eklediğiniz bu tagleri canlıya almadan önce preview modunda Facebook Piksel Helper aracı sayesinde kontrol ediniz. Herhangi bir hata oluşmuşsa, düzenleyip o şekilde canlıya alınız.

Sorularınız varsa, yazı altına yorum olarak gönderebilir, bu ya da diğer konularda destek almak istiyorsanız, Teklif Al sayfamı ziyaret edebilirsiniz. Yararlı olması dileğiyle…