WordPress.org > Plugins sayfasında son rakamlara göre 50.000+ eklenti mevcut. Eklentiler, eklenti geliştirme eklentileri ve hatta eklenti geliştirme eklentilerini geliştiren eklentiler derken ihtiyacınıza uygun sonuçlar biraz şansa biraz da daha önceki kullanıcılar tarafından bir yerlerde yapılmış paylaşımlardaki izlenimlere göre şekillenebiliyor. Bir eklenti geliştirici için de indirme ve kullanıma dair istatistikler aşağı yukarı bu sürece bağlı olarak şekilleniyor. Öne çıkanlar, favorilenenler, en çok tercih edilenler derken spesifik aramalara karşılık öneriler almak bu nedenle zorlaşabiliyor. Sırf bu nedenle, çoğu zaman ihtiyaç duyulan bir konu olduğunda ilgili bir eklenti olup olmadığını ya da bir eklenti için geliştirme bulunup bulunmadığını ilk olarak Plugins sayfası yerine wp plugin search ile client üzerinden arıyorum. Edindiğim sonuçlardan da çoğu zaman memnun oluyorum. Bu yazıda oldukça uzun zamandır geliştirilmekte olan ve İletişim Formu dendiğinde akla ilk gelen eklentilerden biri olan Contact Form 7 (CF7) eklentisine dair etkinlik tanımlama ve bu etkinlikleri Google Anaytics, Google Adwords ve Facebook Pixel fonksiyonlarıyla ilişkilendirme işleminden bahsedeceğim.

Öncelikle, bu eklentiyi kullandığınızı varsayıyor, CF7 nedir, ne değildir demeden konuya giriyorum.

Yazıdaki anlatım en az başlangıç seviyesinde JavaScript, Google Analytics ve Google Tag Manager bilgisi gerektiriyor. Eğer halihazırda bir Google Tag Manager kurulumu mevcutsa bu hesaba ve ayrıca Google Analytics hesabına erişiminiz olmalı. Web sitenize eklenti aracılığıyla Google Analytics veya Google Tag Manager kurabilirsiniz.

Form events

Contact Form 7 Form Gönderme İşlemi

Websitenizi ziyaret edenlere ürün satmak, geri bildirim almak başta olmak üzere bir çok farklı amaç için iletişim formu sunabilirsiniz. Form gönderiminde elbette kurulumlarda tanımlanan e-posta adreslerine ya da geliştirme paketleriyle birlikte veri tabanına veri iletimi sağlanacaktır. Ancak, formun ya da e-posta gönderiminin işleyip işlemediğini anlamak, farklı kaynaklardan gelen kullanıcıların formlara tepkilerini değerlendirmek ve reklam stratejinizi bu bağlamda gözden geçirmek… gibi nedenlerden dolayı da form işlemlerini takip etmek isteyebilirsiniz. Nedenler her ne olursa olsun yapılacak işlem form etkileşim(ler)ini takip etmek olacaktır. Peki bunu nasıl yapacağız?

Bu yazıda, doğrudan sayfaya ekleyebileceğiniz Global Site Tag fonksiyona ek olarak Google Tag Manager içerisinden kullanabileceğiniz alternatif bir yönteme daha değineceğim.

Contact Form 7 DOM (DOM (Document Object Model / Belge Nesnesi Modeli) Events

Contact Form 7 eklentisi değerlendirilmek üzere durum ilişkili tetiklenen bir kaç farklı özel DOM etkinliği sunmakta. Bu etkinliklere sırayla değineceğim. Ancak DOM etkinliklerinden faydalanabilmeniz için dikkat etmeniz gereken bir kaç konu bulunuyor.

  • DOM etkinliklerinin doğru bir şekilde işlendiğinden emin olmalısınız. İşlem yorumlayıcı (event handler) sadece etkinlik tetiklendiğinde çalışacaktır. İnternet tarayıcısının JavaScript işlemlerine izin verdiğinden emin olmalısınız.
  • Contact Form 7 eklentisi ayarlarını gözden geçirmelisiniz. AJAX modu aktif değilse etkinlikler gerçekleşmeyecektir.
  • Başka bir eklenti nedeniyle JavaScript hatası varsa etkinlik işlemi sağlanmayacaktır. Form ile ilişkili sayfalarda JS hatası olmadığından emin olmalısınız.

Bu kontrolleri ve söz konusuysa gerekli düzenlemeleri yaptıysanız, sırada DOM etkinlikleri var.

CF7 DOM (Document Object Model) Events

Aşağıdaki etkinlikler form elemanı içerisinde yer alan form gönderme butonu (submit) tıklandıktan sonra e-posta gönderimi gerçekleşmeden önce tetiklenmektedir.

Genelde bu işlemleri on_sent_ok üzerinden gerçekleştirmekteydik. Ancak, artık eklenti bünyesinde desteklenmemekte. Bunun yerine wpcf7* ile daha gelişmiş işlemler gerçekleştirilebilmekte.
Even

wpcf7invalid

Form gönderme işlemi esnasında, ilgili alanlara girilen bilgilerde hata/eksiklik olması durumunda tetiklenir.

wpcf7spam

Form gönderme işlemi esnasında, olası bir spam aktivitesi algılandığında tetiklenir.

wpcf7mailfailed

Form gönderme işlemi esnasında, e-posta gönderimiyle ilgili bir sorun yaşandığında tetiklenir.

wpcf7submit

Form gönderme işlemi esnasında, diğer etkinliklere bakılmaksızın tetiklenir.

wpcf7mailsent

Form gönderme işlemi esnasında, yukarıdaki hata etkinlikleri gerçekleşmemiş ve form başarıyla gönderilmişse tetiklenir.

Etkinliklerin Takip Edilmesi

Bir kullanıcı sayfa görüntüleme, scroll, tıklama, metin girme gibi bir çok etkinlik gerçekleştirmekte. Bu etkinlikler işaretlenmediği sürece kayıt altına alınmamaktadır. Yukarıdaki etkinlikler de eğer dinlenmiyorlarsa işleme alınmayacaklardır. Aşağıdaki kodlar tam olarak bu işe yaramakta, yani ilgili olabilecek etkinlikler ortaya çıktıkları anda belirlediğimiz işlemin gerçekleşmesini sağlamaktadır.

Wpcf7 wpcf7

Contact Form 7 aksi belirtilmediği sürece form içeriğini bir div etiketi içerisinde tutar. Bu div ön tanımlı olarak her kullanımda formun oluşturulduğu id değerini ve sabit olarak wpcf7 class’ını alır. Biz sabit olan class üzerinden etkinlikleri izleyerek (addEventListener()) sitede yer alan tüm Contact Form 7 formlarını işleme alabiliriz.

var wpcf7Sniff = document.querySelector('.wpcf7');
wpcf7Sniff.addEventListener('wpcf7submit', function(event){
    console.log('Etkinlik başarılı!');
}, false);

Yukarıdaki kod etkinlikler arasında wpcf7submit‘i gördüğü anda console‘da Etkinlik başarılı! mesajını yazdıracaktır. Bu aşamadan sonra gerçekleştirilmesini istediğimiz eylemleri istediğimiz gibi kurgulayabiliriz. Örneğin form girdilerini kontrol edebiliriz.

document.addEventListener('wpcf7submit', function(event) {
    var inputs = event.detail.inputs;
    for (var i = 0; i<inputs.length; i++) {
        if ('email' == inputs[i].name) {
            console.log(inputs[i].value);
            break;
        }
    }
}, false);

Yukarıdaki kod form gönderme işlemi esnasında email name değerine sahip input girdisini console alanında görüntülememizi sağlayacaktır. Aklınızda fikir oluşması için bu gibi kurguları window.localStorage ile entegre ederek geliştirebilirsiniz.

Yukarıdaki etkinlikleri detail parametreleriyle de değerlendirebiliriz.
detail.contactFormId
Üst paragrafta da belirttiğim gibi, Contact Form 7 bünyesinde oluşturduğunuz her form bir özel ID ile kayıt edilir. Formu kullanacağımız zaman kısayol etiketini bu ID ile sayfaya yerleştiririz. Bu ID aynı zamanda div ve form etiketleri tarafından da kullanılır. detail.contactFormId ile formun ID değerini ve detail.containerPostId ile formun yerleştirildiği sayfa ID’sini işlemlerimize dahil edebiliriz. Daha faza kullanım seçeneği için eklentinin resmi sitesinde yer alan dom-events sayfasını inceleyebilirsiniz. Örnek bir kullanım içerisinde console alanında form ID’sini görüntüleyelim.

document.addEventListener('wpcf7mailsent', function(event) {
    console.log(event.detail.contactFormId);
}, false);

Form ve sayfa ID değerleriyle form temelli özelleştirmeler gerçekleştirebilirsiniz.

Sıra geldi Google Analytics ile wpcf7submit etkinliğini ilişkilendirerek Google Analytics üzerinden Contact Form 7 gönderimlerini kayıt altına almaya.

Global Site Tag ve Contact Form 7 Entegrasyonu

Global Site Tag (gtag.js) ilgili yazıda belirttiğim gibi Google Analytics ve Google Adwords tarafından merkezi bir şekilde verilerin edinimizi sağlamakta ve bu sayede entegrasyon ve veri analizi süreci çok daha sorunsuz hale gelmekte.

Senaryo gereği, bir form gönderildiğinde Google Analytics altında tanımladığımız Hedef, Google Adwords dönüşüm ve Facebook Custom Pixel (trackCustom yerine Lead kullanılabilir) işlemi saysın.

document.addEventListener('wpcf7mailsent', function(event){
// Google Analytics
    gtag('event', 'Form Events', {
        'event_category': 'Form Submit',
        'event_label': event.detail.containerPostId
    });
// Google Adwords
    gtag('event', 'conversion', {'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
        'value': 1.0,
        'currency': 'TRY'
      });
// Facebook Pixel
    fbq('trackCustom', 'Form Events', {
        event_category: 'Form Submit',
        event_label: event.detail.containerPostId
    });
}, false);

AW-123456789/AbC-D_efG-h12_34-567 değerlerini kendi Google Adwords dönüşüm kod ve etiketlerinize göre düzenlemeyi unutmayın.

Doğrudan sayfaya ekleyebileceğiniz kodu bu şekilde örneklendirebiliriz. Global Site Tag yerine Google Tag Manager üzerinden ilerlemek istersek birden fazla yol tercih etmemiz mümkün. Pratik olanla başlayabiliriz.

Custom html

Google Tag Manager paneline giriş yapıp Tags > New > Choose Tag Type > Custom HTML seçimiyle yukarıdaki etkinliği istediğiniz şekilde kurgulayarak kaydedebilirsiniz. Elbette Google Analytics ve Google Adwords’ü bu durumda ayırmanız ve ayrıca kurmanız gerekecek. Analtics ve Adwords için dataLayer düzenlememizi şu şekilde örneklendirebiliriz;

document.addEventListener( 'wpcf7mailsent', function( event ) {
        dataLayer.push({
          'event' : 'wpcf7submitted',
          'CF7PostID' : event.detail.containerPostId
        });
    	}, false );

Dönüşüm tanımlama aşamasında ise Variables > User Defined Variables > New > Custom Event yolu üzerinden wpcf7mailsent etkinliğini tanımlamak. Ardından tetikleyici olarak, bu etkinlikle ilişkili Google Analytics > Event ve Google Adwords kodlarını oluşturabilirsiniz. Facebook Custom Pixel için yine tetikleyici etkinlik omak şartıyla Custom HTML üzerinden fbq fonksiyonunu kullanabilirsiniz.

Belirttiğim gibi, düzenlemeler için JavaScript, Google Analytics, Adwords ve Tag Manager ile ilgili biraz aşinalığınızın ve elbette düzenleme erişiminizin olması gerekiyor.

Google Analytics Hakkındaki Yazılardan Haberdar Olmak İster Misin?

E-posta listesine katılarak yeni yazılardan haberdar olabilirsin.

Leave a Reply