WooCommerce WordPress e-ticaret siteleri için Facebook Pikselini Ayarlama – 1

Google tag manager (etiket yöneticisi) ile woocommerce e-ticaret sitesi için facebook pikseli nasıl eklenir? Woocommerce facebook pikseli nasıl kurulmalı? Facebook ve isntagram’da e-ticaret reklamları yapabilmek için gerekli tüm facebook piksel ayarları bu yazıda.

Google Tag Manager Nedir?

Sitenize tek bir kod ekleyerek, tagmanager.google.com adresine girip, siteniz için eklenmesi gereken google ads, analytics, facebook pikseli gibi tüm kodları tek bir yerden kolayca ekleyebildiğiniz sistemdir.

Facebook Pikseli Nasıl Kurulur – Kısa Adımlar

1. Bu yazıdaki önergeleri kolayca tamamlayabilmek için; google tag manager hesabı yaratmış ve google tag manager piksel kodunu almış olmalısınız.
2. Woocommerce wordpress altyapılı siteniz için; bu eklentiyi sitenize eklemeniz ve google tag manager kodunu eklenti ayarlarına kopyalamalısınız.
3. Öncelikle bir facebook pikseli yaratmalısınız.
4. Yarattığınız facebook pikseli içerisinde bazı ufak değişiklikler yapacağız.
5. Facebook pikselinizi google tag manager ile sitenize yerleştirmelisiniz.
6. Facebook pikseli için gerekli değişkenleri (Variables) ayarlamalısınız.
7. Triggers (Etkinlikler) ayarlarını ve burada çalışacak etiketleri ayarlamalısınız.
   • View Content: İçerik Görüntüleme. Sitenizde ürünlerinizi gezen kullanıcıları takip edebilmenizi sağlar.
   • Add to Cart: Sepete ürün ekleme. Sitenizde sepetine ürün atan kullanıcıları takip edip, tekrar hedefleme ve raporlarda görebilmenizi sağlar.
   • Purchase: Satın alım. Sitenizden satın alım yapan kullanıcıları takip edebilmenizi ve dönüşüm olarak yazıp reklamınızın geri dönüşünü ölçebilmenizi sağlar.

Adım Adım Detaylı Anlatım – Piksel Kurulum

Aşağıdaki adımlardan hali hazırda yaptıklarınız varsa sonraki adıma geçiniz.

1. Google Etiket Yöneticisi Kurulumu

tagmanager.google.com adresine girip, google adresinizle kayıt olmalısınız. Site adınızı yazarak hesabı açmanız yeterli.

1. Etiket Yöneticisi’nde Hesaplar  Hesap oluştur‘u tıklayın.
2. Bir hesap adı girin ve dilerseniz, Google ve başkalarıyla anonim olarak veri paylaşmak isteyip istemediğinizi belirtin.
3. Açıklayıcı bir kapsayıcı adı girin ve içerik türünü seçin: Web (Çünkü web sitesi sahibiyiz)
4. Oluştur‘u tıklayın.

Kapsayıcıyı kimliğini kopyalayın

1. Etiket Yöneticisi’nde Çalışma alanı‘nı tıklayın.
2. Pencerenin en üstüne yakın bir yerde, “GTM-XXXXXX” biçimindeki kapsayıcı kimliğinizi bulun. Bu sizin Google etiket yöneticisi kodunuz.

2. WordPress Google Etiket Yöneticisi Eklentisi ve Ayarları

Google Tag Manager for WordPress eklentisini wordpress sitenize kurun ve sitenizin admin panelinden ayarlar kısmında > Google Tag Manager kısmına gidin.

Ayarlar sekmesinde Google Tag Manager ID kısmına, Etiket Yöneticisinden aldığınız kapsayıcı koddaki ID’yi kopyalayınız.

Code placement kısmından aşağıdaki seçeneği seçiniz. Eğer sitenizde görsel olarak kayma yaratan bir durum olursa ilk seçeneği seçmelisiniz ancak bu önerilmiyor.

Ayrıca, yukarıdaki menüden Integration seçerek; Alt Sekmeden Woocommerce seçin. Ve ardından aşağıda önerdiğim kısımları işaretleyin.

Değişiklikleri kaydet dediğiniz zaman, wordpress siteniz için google tag manager (Etiket yöneticisi) kurulumunu yapmış oluyorsunuz.

3. Facebook Pikseli Yaratmak

• Eğer facebook’ta bir işletme yöneticisi (business manager) kullanıyorsanız, işletme yöneticisine girin.
• Eğer kişisel bir reklam hesabı kullanıyorsanız, reklam yöneticisine girin

Sol üstteki menüden aşağıdaki görselde görünen; olay yöneticisi -> facebook piksellerini seçin

Sol tarafta yer alan aşağıdaki alana tıklayarak bir facebook pikseli yaratın.

Aşağıdaki şekilde sitenizin adresini yazarak kodu oluşturun:

Biraz bekledikten sonra karşınıza çıkacak facebook pikseli yükleme yönergelerinden; manuel kurulumu seçin ve facebook pikselinizi kopyalayın.

Çıkan sayfada karşınıza gelen kodu kopyalayın. Bu kodu sitenizdeki tüm sayfalara yerleştireceğiz. Yerleştirme işlemini google tag manager içerisinden bir sonraki adımda anlatıldığı şekilde yapacağız.

4. Facebook pikselini siteye yerleştirmeden önce kodda gerekli değişiklikleri yapıyoruz

Facebook’tan kopyaladığımız kodu alıyoruz. Öncelikle kodda aşağıdaki değişiklikleri yapacağız.

• Facebook ana pikseli içerisine kısmının hemen öncesine ( fbq(‘track’, ‘PageView’); kısmının hemen sonrası oluyor yani) aşağıdaki kodu kopyalayın:

window.google_tag_manager[{‌{Container ID}}].onHtmlSuccess({‌{HTML ID}});

• Kodun içerisinden şu kısmı silin:

<noscript><img height=”1″ width=”1″ style=”display:none”  src=”https://www.facebook.com/tr?id=352131275430667&ev=PageView&noscript=1″

Yani yukarıdaki kopyaladığınız kodunuz artık şu şekilde olacak; mor ile işaretlediğim kısmı koda ekleyip, noscript ile başlayan alanı da sileceksiniz.

5. Düzeltilmiş Facebook Pikselini Google Tag Manager’a (Etiket Yöneticisi) yerleştirip, yayınlıyoruz.

Tag Manager ‘a girdikten sonra yapacağımız şey çok basit. Yukarıdaki kodun tüm sayfalarda yer almasını istiyoruz. Bunun için de etiketleri kullanacağız.

Etiketler, özetle yukarıda yer alan facebook piksel kodları gibi kod bloklarına verilen ad. Yani bizim yukarıdaki kodu, tag manager içerisindeki etiketler kısmına eklememiz gerekiyor. Yukarıda yer alan kodu sırasıyla aşağıdaki yönergeleri izleyerek, tüm sayfalarda çıkacak şekilde tag manager’a ekleyin.

1. Etiketler menüsüne girin.
2. Etiketler kısmında çıkan “Yeni” butonuna tıklayın ve yeni bir etiket ekleme menüsüne girin.
3. Karşınıza aşağıdaki gibi boş bir sayfa çıkacak.
   • Gördüğünüz gibi burası iki kısımdan oluşuyor. Öncelikle en üstte “Adsız Etiket” yazan kısımdan kodumuza isim verelim.
   • Birincisi etiket yapılandırması kısmı. 4. Adımda bu adımı detaylandıracağım.
   • İkincisi ise; Tetikleyici kısmı. 5. Adımda bu adımı detaylandıracağım.

4. Etiket Yapılandırması: Etiket yapılandırması kısmına tıkladığımız zaman, bize hangi türde bir etiket girişi yapacağımızı soracak. Şu an elimizdeki facebook piksel kodu, HTML Formatında bir etiket.
O yüzden çıkan menüde, Etiket türü olarak; “Özel HTML” seçiyoruz.

Ardından, yukarıda hazırlamış olduğumuz kodu çıkan ekranda boşluğa kopyalıyoruz.

5. Tetikleyici: Tetikleyici basitçe söylemek gerekirse; yukarıya yazdığımız kodun sitemizde hangi şartlar altında tetikleneceğini, yani çalışacağını anlatıyor.
Hatılarsanız, bu kodun sitemizde her sayfada tetiklenmesi gerektiğini söylemiştik. Yani, tetikleyici ekleme kısmına geldiğimiz zaman; “All Pages” ibaresini seçmemiz yeterli olacak.

Son olarak; etiketimize isim de verdikten sonra kaydet diyoruz. Etiketler sayfasına döneceğiz. Sağ üst köşeden “Gönder”e bastığınız zaman yaptığınız bu değişiklerin ve eklemelerin tamamı sitenizde yayınlanacak. Basmazsanız yayınlanmaz 🙂

Bonus: Kod sitenizde düzgün çalışıyor mu nasıl kontrol edebilirsiniz?

Chrome tarıyıcınızda; Facebook Pixel Helper eklentisini yükleyerek, aktive edin. Ardından sitenizi açın. Adres çubuğunun sağına ikon olarak yerleşen Facebook Pixel Helperın, eğer kod çalışıyorsa yanında küçük bir rakam yazıyor olacak. İkona tıklayın.

Tebrikler! Artık sitenize facebook pikselini koydunuz. Bu piksel ile; sitenizi gezen kullanıcıları takip etmeye ve yeniden hedeflemeye başlayabilirsiniz.

Sitenizde kullanıcıların gezdiği ürünleri izleme, sepete ekleme ve satın alım gibi dönüşümleri ölçebilmek için yapacağınız ayarları bir sonraki yazımızda bulabilirsiniz.