Skip to main content
Top

Using Google Analytics with an Embedded Scheduler

Updated

If you're embedding the TimeTap scheduler into your 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 forwarding them to Google Analytics manually.

This guide explains how the embedded scheduler communicates event data to your website, and includes a sample HTML implementation to help you get started.

Events

If the Google Analytics ID integration field has any kind of 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 visit

  • User login

  • User registration

  • 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 be 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 (Login, Signup, Booking)

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:

    • login

    • sign_up

    • booked_appointment

    • booked_multiple_appointments

  • event_category: The category of the action. Possible values:

    • 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