Rezervasyon widget'ı etkinliklerini web sitenizde dinleyin

Rezervasyon widget'ı web sitenize eklendiğinde, misafirin widget içinde ne yaptığını sayfaya bildirir: rezervasyon panelinin açılıp kapanmasını, rezervasyonun her ekranını, her yanıtı ve rezervasyonun kendisini. Bunların her biri window üzerinde tetiklenen bir tarayıcı etkinliğidir; böylece geliştiriciniz — ya da Google Tag Manager'ınızla ilgilenen kişi — bir rezervasyon hunisi kurabilir, biri rezervasyon yaptığında sayfada bir şeyi değiştirebilir veya adımları istediği analitik aracına gönderebilir.

Etkinlikler

Her etkinlik verisini event.detail içinde taşır. İki alan her zaman bulunur: company — yerleştirme kodunuzdaki data-company değeri — ve booking_type: masalar için reservation, hizmetler için appointment.

Bir etkinliği dinleyin

Widget ile aynı sayfaya, window.addEventListener ve etkinliğin adını kullanan bir betik ekleyin. Betik yerleştirme kodundan önce ya da sonra gelebilir. Bu örnek, rezervasyon onaylandığında “Hemen rezervasyon yapın” banner'ını gizler:

<script>
  window.addEventListener('taptime:booking', function (event) {
    if (event.detail.confirmed) {
      document.getElementById('book-banner').hidden = true;
    }
  });
</script>

confirmed, rezervasyon anında onaylandığında true, ekibinizin henüz kabul etmesi gereken bir talep olduğunda ise false olur. value ve onunla birlikte gelen currency, randevularda hizmetin fiyatını, masa rezervasyonlarında ise dönüşüm izleme için belirlediğiniz rezervasyon değerini verir; ikisi de yoksa value null olur.

Ekranlar ve yanıtlar

taptime:step, ekranın adını detail.step içinde verir. Misafirin hangi ekranları göreceği, neyin rezervasyonunu yaptığına ve ayarlarınıza bağlıdır:

• location — misafir şubelerinizden birini seçer. Yalnızca birden fazla şubeniz varsa ve widget tek bir şubeye bağlı değilse.
• party — kaç kişi olacağı. Yalnızca masalarda.
• service ve specialist — neyin rezervasyonunun yapılacağı ve kiminle. Yalnızca randevularda.
• when — gün ve saat.
• seating, zone ve table — iç ya da dış mekân, salonun bir bölümü, belirli bir masa. Yalnızca masalarda ve yalnızca açtığınız seçenekler için.
• details — misafirin adı ve iletişim bilgileri.
• done — rezervasyon yapıldıktan sonra gösterilen onay ekranı.

step_index ve step_count, misafirin formun üstünde gördüğü numaralardır; örneğin “2 / 5”. Şube listesi ve onay ekranı numaralandırılmaz, bu yüzden bu ekranlarda ikisi de null olur. Ekran sayısı ayarlarınıza bağlı olduğundan numaraya değil, ekranın adına bakın.

taptime:choice, yanıtın adını detail.field içinde verir: branchId, partySize, date, time, seating, zoneId, tableId, serviceId veya specialistId. detail.value seçilen şeydir — bir sayı, bir kimlik, 2026-09-18 biçiminde bir tarih ya da 2026-09-18 19:30 biçiminde bir saat; detail.label ise misafirin butonda okuduğu metindir, örneğin bir hizmet ya da şube adı. “Fark etmez” seçildiğinde value olarak null gönderilir.

Her etkinliği Google Tag Manager'a gönderin

taptime:event için tek bir dinleyici hepsini yakalar. Aşağıdaki betik her birini, detail alanlarıyla birlikte taptime_open, taptime_step, taptime_choice gibi adlarla dataLayer'a gönderir. Betiği tüm sayfalarda tetiklenen bir Özel HTML etiketine ya da doğrudan sitenize yapıştırın. Ardından siteye bir daha dokunmadan Tag Manager'da tetikleyiciler, değişkenler ve bir huni kurun.

<script>
  window.dataLayer = window.dataLayer || [];
  window.addEventListener('taptime:event', function (event) {
    window.dataLayer.push(Object.assign({ event: 'taptime_' + event.detail.event }, event.detail));
  });
</script>

Diğer örnekler

Misafirlerin nerede vazgeçtiğini bir dönüşüm hunisi keşfinde görmek için her ekranı Google Analytics 4'e ayrı bir etkinlik olarak gönderin. Bunun için sayfanızda gtag.js ile kurulmuş GA4 gerekir:

<script>
  window.addEventListener('taptime:step', function (event) {
    if (typeof gtag !== 'function') return;
    gtag('event', 'booking_step', {
      step: event.detail.step,
      step_index: event.detail.step_index,
      booking_type: event.detail.booking_type
    });
  });
</script>

Misafir paneli rezervasyon yapmadan kapattığında ona başka bir rezervasyon yolu sunun — burada gizli bir “Bizi arayın” bloğunu göstererek:

<script>
  var booked = false;
  window.addEventListener('taptime:booking', function () {
    booked = true;
  });
  window.addEventListener('taptime:close', function () {
    if (!booked) {
      document.getElementById('call-us').hidden = false;
    }
  });
</script>

Çalıştığını kontrol edin

1. 1
   Yayındaki web sitenizi açın

   Pek çok site kurucusu özel kodu kendi editöründe çalıştırmaz; bu yüzden yayındaki siteyi kullanın.

2. 2
   Tarayıcı konsolunu açın

   Sayfaya sağ tıklayın, İncele'yi seçin, ardından Konsol sekmesini açın.

3. 3
   Aşağıdaki satırı yapıştırıp Enter'a basın

   Widget'ın her etkinliğini gerçekleştiği anda yazdırır. Sayfayı yenileyene kadar geçerlidir.

4. 4
   Bir test rezervasyonunu baştan sona tıklayın

   Her ekran ve yanıt, ardından da rezervasyon konsolda görünür. Sonrasında test rezervasyonunu panonuzdan iptal edin.

window.addEventListener('taptime:event', function (event) { console.log(event.detail.event, event.detail); });