Google Tag Manager (GTM-XXXXX) in the Smart-Widget

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_start (First user interaction, can be triggered later as well)
   
2. appointment_booking_step_questions_start  (step: booking questions before the booking process)
3. appointment_booking_step_questions_end  (step: booking questions before the booking process)
4. appointment_booking_step_meetings_start  (Step: Select meeting provider)
5. appointment_booking_step_meetings_end  (Step: Select meeting provider)
6. appointment_booking_step_stores_start (Step: Store selection)
7. appointment_booking_step_stores_end  (Step: Store selection)
8. appointment_booking_step_services_start (Step: Selection of services)
9. appointment_booking_step_services_end (Step: Selection of services)
10. appointment_booking_step_resources_start  (Step: Workers/resource selection)
11. appointment_booking_step_resources_end  (Step: Workers/resource selection)
12. appointment_booking_step_available_appointments_start (Step: Appointment booking, free time slots)
13. appointment_booking_step_available_appointments_end (Step: Appointment booking, free time slots)
14. appointment_booking_step_personal_data_start (Step: Booking Form, Personal Data)
15. appointment_booking_step_personal_data_end (Step: Booking Form, Personal Data)
16. appointment_booking_step_summary (Step: Summary)
17. appointment_booking (Appointment booking initialized)
18. appointment_booking_step_success (Booking successful)
19. 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>