GTM İle iFrame Etkinliklerini Yakalamak

Bu yazıyı bir entegrasyon gereksinimi ile haberdar olduğum başka Paperform adlı form servisi ile genişleteceğim¹. Ek olarak, birazdan değineceğim örnek içerisinde iframe içerisindeki bir etkinliği takip edeceğiz. Bu işlem için de cookie yerine window.postMessage kullanacağız. Özetle, yayınladığım 2 yazıyı gerçek bir durum ile ilişkilendireceğiz.

Paperform

Paperform, online formlar, ödeme ve ürün sayfaları oluşturabileceğiniz (hazır şablonları kullanarak veya kendiniz oluşturarak) bir form servisi. Form oluşturma sürecini bir belge oluşturur gibi ele alıyorlar. Form içerisine görseller, videolar ve özelleştirilmiş metinler ekleyebilmektesiniz. Edinilen formlar ile ilgili de raporlar, bildirimler, gönderim ve gönderim sonrası işlem tanımları gibi özellikler sunmakta¹. Paperform oluşturulan formları URL ve embed seçenekleri ile kullanma imkanı sunuyor. Bunun yanı sıra, Configure > Analytics sekmesi vasıtası ile Google Analytics, Facebook Pixel ID'lerini girerek ilgili sayfa ile ilişkilendirme sağlayabiliyoruz. Ek olarak 2 metin alanı daha mevcut. Page load scripts ile sayfa görüntülendiği ve Successful submission scripts ile de form gönderildiği anda çalıştırılmasını istediğimiz script kodları tanımlayabiliyoruz.

Gelelim detaylara.

Google Analytics alanı analytics.js kütüphanesini kullanmakta. Dolayısıyla, eğer diğer alanlar üzerinden parametre tanımlamaları yapacaksanız ga() fonksiyonunu kullanmalısınız. Form doldurma, gönderim ve onay süreçlerinde 3 etkinlik işlemi tetiklenir.

SubmittedForm

Form başarılı bir şekilde gönderildiğinde tetiklenir.

StartedCheckout

Ödeme işlemi açıldığında tetikler.

StartedSubmission

Kullanıcı formu doldurmaya başladığında tetiklenir.

Tüm etkinlikler kategori (category) tanımı olarak Paperform:ID değerine sahiptir. ID ifadesi yerine kullanılan formun ID değeri gelir. Etkinlik başlığı (title) ise form başlığıdır. Aşağıda örnek bir form üzerinden gönderilen etkinlik (event) tanımlarını görebilirsiniz.

Event Category: Paperform:hgib4uqn
Event Label:    Test
Event:          SubmittedForm

Doğrudan GA entegasyonu ile ilerleyecekseniz hedef (goal) tanımlarını yukarıdaki bilgileri temel alarak gerçekleştirebilirsiniz.

Google Tag Manager kodunu Page load scripts üzerinden eklemek isterseniz kodun stabil çalışmayabileceğini göz önünde bulundurmalısınız. GTM için herhangi bir dataLayer push işlemi gerçekleştirilmemekte.

Google Analytics², Facebook Pixel³ ve GTM⁴ kod kurulumlarını eğer form adresini doğrudan paylaşacaksanız (Örn. https://hgib4uqn.paperform.co/) tavsiye ederim. Eğer formu bir sayfa içerisine embed edecekseniz hem sayfanız hem de embed ettiğiniz form içerisinde kodlar tekrar çalışacaklardır. Benim aşağıda değineceğim konu embed ettiğimiz formlar ile ilişkili, dolayısıyla herhangi bir ID ya da kod ekleme işlemi gerçekleştirmeyeceğim.

Form ile ilgili iletilecek embed kodu şune benzemekte:

<div data-paperform-id="hgib4uqn"></div>
<script>
(function() {
  var script = document.createElement('script');
      script.src = "https://paperform.co/__embed";
      document.body.appendChild(script);
})()
</script>

Kod içerisinde belirtilen data-paperform-id form ID değeri. İlgili script kodu çalıştığında şu şekilde render edilir.

<div data-paperform-id="hgib4uqn">
  <iframe frameborder="0" width="100%" allowpaymentrequest="" allow="geolocation *;camera *;microphone *;" title="Embedded form" style="min-height: 200px;" src="https://paperform.co/form/hgib4uqn?embed=1&amp;takeover=0&amp;inline=1&amp;popup=0&amp;_d=<alan-adi>&amp;_in=1&amp;_embed_id=1" height="554"></iframe>
</div>

src içerisinde yer alan hgib4uqn form ID değeri, _d ise formun render edildiği alan adını alır; örn. ceaksan.com.

window.postMessage

window.postMessage ilgili yazıda da örnekler vasıtasıyla açıkladığım üzere, window nesneleri arasında mesaj taşıyabilmemizi sağlıyor. Örnekler içerisinde popup ile tek yönli ve iframe ile çift yönli mesaj taşımıştık. Bu yazı bağlamında tek yönlü ve iframe'den parent'a mesaj ileteceğiz.

Kapsayıcı (parent) sayfamızın adı landing.htm olsun. Yukarıdaki embed kodunu bu sayfa içerisinde kullanacağız. Öncelikle, ilk işlemimiz form gönderildiğinde iframe içerisinden iframe'i içeren sayfaya (parent) mesaj iletmek.

Paperform > Analytics sayfasında yer alan Successful submission scripts bölümüne şu kodu yapıştırabilirsiniz.

<script>
  window.parent.postMessage({
  message: 'triggered'
  }, '<parent-page-hostname>');
</script>

<parent-page-hostname> değeri bizim formu yerleştirdiğimzi sayfanın bulunduğu alan. Örneğin formu https://ceaksan.com/lp/ sayfasına embed etmişsem bu alana https://ceaksan.com değerini girmem gerekir. Bu tanım verinin doğru hedefe iletildiğinden emin olmamızı sağlar. Şimdi gelelim parent page içeriğine.