მოუსმინეთ დაჯავშნის ვიჯეტის მოვლენებს თქვენს საიტზე

როცა დაჯავშნის ვიჯეტი თქვენს საიტზეა, ის გვერდს აცნობებს, რას აკეთებს მასში სტუმარი: პანელის გახსნასა და დახურვას, დაჯავშნის თითოეულ ეკრანს, თითოეულ პასუხს და თავად ჯავშანს. თითოეული მათგანი ბრაუზერის მოვლენაა window ობიექტზე, ასე რომ, თქვენს დეველოპერს — ან ნებისმიერს, ვინც თქვენს Google Tag Manager-ს უვლის — შეუძლია ააწყოს დაჯავშნის ძაბრი, შეცვალოს გვერდი, როცა ვინმე ჯავშნის, ან ნაბიჯები ნებისმიერ ანალიტიკურ ხელსაწყოში გაგზავნოს.

მოვლენები

თითოეული მოვლენა თავის მონაცემებს event.detail-ში ატარებს. ორი ველი ყოველთვის არის: company — data-company-ის მნიშვნელობა თქვენს ჩასაშენებელ კოდში — და booking_type: reservation მაგიდებისთვის, appointment სერვისებისთვის.

მოვლენის მოსმენა

დაამატეთ სკრიპტი იმავე გვერდზე, სადაც ვიჯეტია, window.addEventListener-ითა და მოვლენის სახელით. ის შეიძლება ჩასაშენებელი კოდის წინ ან შემდეგ იდგეს. ეს სკრიპტი „დაჯავშნეთ ახლავე“ ბანერს მალავს, როგორც კი ჯავშანი დადასტურდება:

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

confirmed არის true, როცა ჯავშანი მაშინვე დასტურდება, და false, როცა ეს მოთხოვნაა, რომელიც თქვენმა გუნდმა ჯერ კიდევ უნდა დაადასტუროს. value თავის currency-სთან ერთად ჩაწერისთვის სერვისის ფასია, მაგიდისთვის კი — ჯავშნის ღირებულება, რომელიც კონვერსიების აღრიცხვისთვის მიუთითეთ; თუ არც ერთი არ არის, ის null-ია.

ეკრანები და პასუხები

taptime:step ეკრანის სახელს detail.step-ში გადასცემს. რომელ ეკრანებს ხედავს სტუმარი, დამოკიდებულია იმაზე, რას ჯავშნის, და თქვენს პარამეტრებზე:

• location — სტუმარი თქვენს ერთ-ერთ ლოკაციას ირჩევს. მხოლოდ მაშინ, როცა რამდენიმე ლოკაცია გაქვთ და ვიჯეტი ერთ-ერთზე არ არის მიბმული.
• party — რამდენი სტუმარი იქნება. მხოლოდ მაგიდებისთვის.
• service და specialist — რა დაიჯავშნოს და ვისთან. მხოლოდ ჩაწერებისთვის.
• when — დღე და დრო.
• seating, zone და table — შიგნით თუ გარეთ, დარბაზის ზონა, კონკრეტული მაგიდა. მხოლოდ მაგიდებისთვის და მხოლოდ ის არჩევანი, რომელიც ჩართული გაქვთ.
• details — სტუმრის სახელი და საკონტაქტო მონაცემები.
• done — დადასტურების ეკრანი, ჯავშნის გაკეთების შემდეგ.

step_index და step_count ის რიცხვებია, რომლებსაც სტუმარი ფორმის ზედა ნაწილში ხედავს, მაგალითად „2 / 5“. ლოკაციების სია და დადასტურების ეკრანი დანომრილი არ არის, ამიტომ იქ ორივე null-ია. რადგან ეკრანების რაოდენობა თქვენს პარამეტრებზეა დამოკიდებული, ამოწმეთ ნაბიჯის სახელი და არა ნომერი.

taptime:choice პასუხს detail.field-ში ასახელებს: branchId, partySize, date, time, seating, zoneId, tableId, serviceId ან specialistId. detail.value არის ის, რაც აირჩიეს — რიცხვი, id, თარიღი 2026-09-18 სახით ან დრო 2026-09-18 19:30 სახით, ხოლო detail.label ის ტექსტია, რომელიც სტუმარმა ღილაკზე წაიკითხა, მაგალითად სერვისის ან ლოკაციის სახელი. „ნებისმიერის“ არჩევისას value null-ია.

ყველა მოვლენის გაგზავნა Google Tag Manager-ში

ერთი მსმენელი taptime:event-ზე ყველა მათგანს იჭერს. ქვემოთ მოცემული სკრიპტი თითოეულს dataLayer-ში აგზავნის taptime_open, taptime_step, taptime_choice და ა.შ. სახელით, detail-ის ველებთან ერთად. ჩასვით ის Custom HTML ტეგში, რომელიც ყველა გვერდზე ამოქმედდება, ან პირდაპირ თქვენს საიტზე. ამის შემდეგ ტრიგერებს, ცვლადებსა და ძაბრს Tag Manager-ში ააწყობთ, საიტზე ხელახლა შეხების გარეშე.

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

სხვა მაგალითები

გაგზავნეთ თითოეული ეკრანი Google Analytics 4-ში ცალკე მოვლენად, რომ ძაბრის კვლევაში (funnel exploration) დაინახოთ, სად ჩერდებიან სტუმრები. ამისთვის GA4 თქვენს გვერდზე gtag.js-ით უნდა იყოს დაყენებული:

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

შესთავაზეთ დაჯავშნის სხვა გზა, როცა სტუმარი პანელს ჯავშნის გარეშე ხურავს — ამ შემთხვევაში დამალული „დაგვირეკეთ“ ბლოკის ჩვენებით:

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

შეამოწმეთ, რომ მუშაობს

1. 1
   გახსენით თქვენი გამოქვეყნებული საიტი

   ბევრი საიტის კონსტრუქტორი საკუთარ კოდს რედაქტორში არ უშვებს, ამიტომ გამოიყენეთ გამოქვეყნებული საიტი.

2. 2
   გახსენით ბრაუზერის კონსოლი

   დააწკაპუნეთ გვერდზე მაუსის მარჯვენა ღილაკით, აირჩიეთ Inspect, შემდეგ გახსენით Console ჩანართი.

3. 3
   ჩასვით ქვემოთ მოცემული ხაზი და დააჭირეთ Enter-ს

   ის ვიჯეტის ყოველ მოვლენას მოხდენისთანავე ბეჭდავს და მოქმედებს, სანამ გვერდს არ გადატვირთავთ.

4. 4
   გაიარეთ სატესტო ჯავშანი

   კონსოლში ჯერ ყოველი ეკრანი და პასუხი გამოჩნდება, შემდეგ კი ჯავშანი. ბოლოს სატესტო ჯავშანი დაფიდან გააუქმეთ.

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