Rezervasiya vidcetinin hadisələrini saytınızda dinləyin

Rezervasiya vidceti saytınıza qoyulduqdan sonra qonağın onun içində nə etdiyini səhifəyə bildirir: panelin açılıb-bağlanmasını, rezervasiyanın hər ekranını, hər cavabı və rezervasiyanın özünü. Bunların hər biri window üzərində baş verən brauzer hadisəsidir, ona görə tərtibatçınız — və ya Google Tag Manager-inizlə məşğul olan istənilən şəxs — rezervasiya hunisi qura, kimsə rezervasiya edəndə səhifədə nəyisə dəyişə və ya addımları istənilən analitika alətinə göndərə bilər.

Hadisələr

Hər hadisə öz məlumatlarını event.detail-də daşıyır. İki sahə həmişə olur: company — yerləşdirmə kodunuzdakı data-company dəyəri — və booking_type: masalar üçün reservation, xidmətlər üçün appointment.

Hadisəni dinləyin

Vidcetlə eyni səhifəyə window.addEventListener və hadisənin adı ilə skript əlavə edin. O, yerləşdirmə kodundan əvvəl də, sonra da gələ bilər. Bu skript rezervasiya təsdiqlənən kimi «İndi rezerv et» bannerini gizlədir:

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

confirmed rezervasiya dərhal təsdiqlənəndə true, komandanızın hələ qəbul etməli olduğu sorğu olanda isə false olur. value öz currency sahəsi ilə birlikdə görüş üçün xidmətin qiyməti, masa üçün isə konversiyaların izlənməsi üçün təyin etdiyiniz bir rezervasiyanın dəyəridir; heç biri yoxdursa, null olur.

Ekranlar və cavablar

taptime:step ekranın adını detail.step-də verir. Qonağın hansı ekranları görməsi nəyi rezerv etməsindən və parametrlərinizdən asılıdır:

• location — qonaq filiallarınızdan birini seçir. Yalnız bir neçə filialınız olduqda və vidcet bir filiala bağlanmadıqda.
• party — neçə qonaq. Yalnız masalar üçün.
• service və specialist — nə rezerv edilir və kimin yanına. Yalnız görüşlər üçün.
• when — gün və saat.
• seating, zone və table — içəridə və ya açıq havada, zalın bir hissəsi, konkret masa. Yalnız masalar üçün və yalnız yandırdığınız seçimlər.
• details — qonağın adı və əlaqə məlumatları.
• done — rezervasiya edildikdən sonra açılan təsdiq ekranı.

step_index və step_count qonağın formanın yuxarısında gördüyü rəqəmlərdir, məsələn, «2/5». Filial siyahısı və təsdiq ekranı nömrələnmir, ona görə orada hər ikisi null olur. Ekranların sayı parametrlərinizdən asılı olduğu üçün rəqəmi yox, ekranın adını yoxlayın.

taptime:choice cavabın nəyə aid olduğunu detail.field-də verir: branchId, partySize, date, time, seating, zoneId, tableId, serviceId və ya specialistId. detail.value seçilən dəyərdir — rəqəm, ID, 2026-09-18 formatında tarix və ya 2026-09-18 19:30 formatında vaxt — detail.label isə qonağın düymədə oxuduğu mətndir, məsələn, xidmətin və ya filialın adı. «İstənilən» seçildikdə value olaraq null göndərilir.

Bütün hadisələri Google Tag Manager-ə göndərin

taptime:event üzərindəki bir dinləyici hamısını tutur. Aşağıdakı skript hər birini detail sahələri ilə birlikdə taptime_open, taptime_step, taptime_choice və s. adı ilə dataLayer-ə göndərir. Onu bütün səhifələrdə işə düşən Custom HTML teqinə və ya birbaşa saytınıza yapışdırın. Sonra sayta bir daha toxunmadan Tag Manager-də triggerlər, dəyişənlər və huni qurun.

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

Daha çox nümunə

Qonaqların harada dayandığını huni araşdırmasında (funnel exploration) görmək üçün hər ekranı Google Analytics 4-ə ayrıca hadisə kimi göndərin. Bunun üçün səhifənizdə GA4 gtag.js ilə quraşdırılmış olmalıdır:

<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>

Qonaq paneli rezervasiya etmədən bağlayanda ona rezervasiyanın başqa yolunu təklif edin — burada gizli «Bizə zəng edin» blokunu göstərməklə:

<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>

İşlədiyini yoxlayın

1. 1
   Dərc olunmuş saytınızı açın

   Bir çox sayt qurucusu xüsusi kodu redaktorda işə salmır, ona görə canlı saytdan istifadə edin.

2. 2
   Brauzer konsolunu açın

   Səhifədə sağ klikləyin, Inspect (Yoxla) seçin, sonra Console vərəqini açın.

3. 3
   Aşağıdakı sətri yapışdırın və Enter düyməsini basın

   O, vidcetin hər hadisəsini baş verdiyi anda konsolda göstərir və səhifəni yeniləyənə qədər işləyir.

4. 4
   Sınaq rezervasiyasını addım-addım keçin

   Konsolda hər ekran və cavab, sonra isə rezervasiyanın özü görünür. İşiniz bitəndə sınaq rezervasiyasını lövhənizdən ləğv edin.

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