The new Calenso booking widget (smart widget) is available as an iFrame. This widget supports the following GTM tracking events.


Appointment booking tracking events

  1. appointment_booking_step_questions (step: booking questions before the booking process)
  2. appointment_booking_step_meetings (Step: Select meeting provider)
  3. appointment_booking_step_stores (Step: Store selection)
  4. appointment_booking_step_services (Step: Selection of services)
  5. appointment_booking_step_resources (Step: Workers/resource selection)
  6. appointment_booking_step_available_appointments (Step: Appointment booking, free time slots)
  7. appointment_booking_step_personal_data (Step: Booking Form, Personal Data)
  8. appointment_booking_step_summary (Step: Summary)
  9. appointment_booking_step_success (Booking successful)
  10. appointment_booking_step_failed (Booking error)


Tracking of surveys (events)

  1. survey_start_step (Step: start of survey)
  2. survey_step_X (number of steps, dynamic)
  3. survey_last_step (Last step, successful completion of the survey)


Cross-Domain Tracking of iFrames

In order for the iFrame widget to be tracked within a landing page with a different domain, the following structure must be used in the website. The iFrame sends the tracking events to the parent landing page. This landing page can then process these events or transmit them to GTM.


<script>
   function onLoadIframe() {
       const frame = document.getElementById('smart-widget-obj');
       console.log('Inside onLoadIframe()');
       setTimeout(function() {
           console.log('Inside onLoadIframe() before firing');
           frame.contentWindow.postMessage({
               name: 'from parent to child',
               eventName: 'PARENT_TO_CHILD_WEBSITE_EVENT'
           }, '*');
       }, 3000);
   }    
   
   window.addEventListener('message', (eventData) => {
       if (eventData.data.event === 'CALENSO_CHILD_TO_PARENT_EVENT') {
           console.log('Calenso Tracking Data is ', eventData.data.step);
       }
   });
   
</script>

<iframe id="smart-widget-obj" src="LINK_ZUM_WIDGET" height="1000px" width="100%" scrolling="no" allowfullscreen onload="onLoadIframe()"></iframe>