Skip to main content
Top

Using Google Analytics with an Embedded Scheduler

Updated

If you're embedding the TimeTap scheduler onto a personal website using an iframe, the direct integration with Google Analytics will not work out of the box. However, you can still capture scheduling-related events by configuring your website to listen for messages from the scheduler and then forwarding them to Google Analytics manually.

In this help doc we'll cover - 

 

 

Events

If the Google Analytics ID integration field has any text populated, the embedded scheduler will send specific event data to its parent page (your website) using the browser's postMessage API. These messages correspond to the following user interactions - 

  • Page visits

  • User logins

  • User registrations

  • Booking a single appointment

  • Booking multiple appointments

Your website can capture these events and send them to Google Analytics using standard JavaScript.

 

 

Event Structure

Page Visits

When a user navigates within the scheduler, the following message will get posted to the parent window - 

{
  "event_action": "visit",
  "page_path": "XXXX",
  "page_location": "XXXX"
}

  • page_path -  The section of the scheduler being visited (e.g., "scheduler")

  • page_location - The full URL where the scheduler is embedded (e.g., https://yourwebsite.com/scheduler)
     

All Other Events (Logins, Signups, Bookings)

For other actions, the scheduler will send messages in the following format - 

{
  "event_action": "booked_appointment",
  "event_category": "appointment",
  "event_label": "User Booked an Appointment",
  "event_name": "User Booked an Appointment"
}

  • event_action - The type of action taken by the user. Possible values include - 

    • login

    • sign_up

    • booked_appointment

    • booked_multiple_appointments

  • event_category - The category of the action. Possible values include - 

    • engagement (used with login and sign_up)

    • appointment

  • event_label and event_name - A description of the event (usually the same).
     

 

Sample HTML

Below is a sample HTML page that listens for messages from the scheduler and sends them to Google Analytics using gtag.js. You’ll need to replace "UA-XXXX-X" with your own Google Analytics tracking ID.

<html>
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX-X"></script>
    <script>
        var googleAnalyticsCode = "UA-XXXX-X";
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());
        gtag('config', googleAnalyticsCode);
        window.addEventListener('message', ({data}) => {
            console.log(data.event_action);
            console.log(data.page_path);
            if(data.event_action === 'visit'){
                // data contains page tracking information (page_path, page_location)
                gtag('config', googleAnalyticsCode, {'page_path': data.page_path,
                    'page_location': data.page_location});
            }else{
                gtag('event', data.event_action, {
                    'event_category': data.event_category,
                    'event_label': data.event_label,
                    'event_name': data.event_name
                });
            }
        });
    </script>
</head>
<body>
<iframe id="tt" style="width:90vh;height:90vh;" ref="timetapIframe"
        src="https://testscheduler.timetap.io"/>
</body>
</html>

 

Related articles

Powered by Zendesk