Contact Form 7 Dönüşüm Tanımlama

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 Analytics, Google Ads ve Facebook Pixel standart olaylarıyla ilişkilendirme işleminden bahsedeceğim. Öncelikle, bu eklentiyi kullandığınızı varsayıyor,

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 birkaç farklı özel DOM etkinliği sunmakta. Bu etkinliklere sırayla değineceğim. Ancak, DOM etkinliklerinden⁴ faydalanabilmeniz için dikkat etmeniz gereken birkaç 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⁷.

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.

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&lt;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

GTAG (gtag.js) ilgili yazıda belirttiğim gibi Google Analytics ve Google Ads 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 Ads dönüşüm (conversion) ve Facebook Custom Pixel (trackCustom yerine Lead de 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 Ads
    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 Ads 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.

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 Ads'i bu durumda ayırmanız ve ayrıca kurmanız gerekecek¹¹. Analytics ve Ads 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 Ads 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, Ads ve Tag Manager ile ilgili biraz aşinalığınızın ve elbette düzenleme erişiminizin olması gerekiyor.