Booking: Event Tracking

The SDK emits events during the booking process, which can be tracked using the message event listener. Add the following script to listen for booking-related events:

<script>
    window.addEventListener("message", (m) => {
        if (m.data.name === "caspeco-booking-event") {
            console.log(m);
        }
    });
</script>

Event Types

The SDK emits the following tracking event types:

• sessionStart: When a session starts.
• userReload: When a user reloads the page.
• userInput: When a user provides input.
• cancel: When a user cancels the booking process.
• paymentTerminal: When the payment terminal is reached.
• paymentTerminalFailed: When payment terminal interaction fails.
• backFromPaymentTerminal: When returning from the payment terminal.
• backFromPaymentTerminalFailed: When the return from the payment terminal fails.
• bookingFinalized: When a booking is successfully completed.
• bookingFinalizedFailed: When booking finalization fails.

Event Payload

Each event provides a payload with the following structure:

export type TrackingEvent = {
    name: string; // "caspeco-booking-event"
    eventTime?: string; // YYYY-MM-DDTHH:mm:ss.SSSZ
    timeSinceLastEvent?: number; // milliseconds since last event
    timeSinceStart?: number; // milliseconds since start
    type?: TrackingEventType; // Type of the event (e.g., "partial", "complete", "cancel")
    guests?: number; // Number of guests
    children?: number; // Number of children
    date?: string; // Booking date (e.g., "2024-12-24")
    times?: string[]; // Array of times (e.g., ["12:00", "13:00"])
    isWaitingList?: boolean; // Indicates if the booking is on a waiting list
    sectionName?: string; // Section name (e.g., "Lunch")
    webRuleTitle?: string; // Web rule title (e.g., "Lunch")
    customerName?: string; // Customer or company name
    bookingType?: string; // Booking type
    contact?: {
        firstname?: string;
        lastname?: string;
        email?: string;
        phone?: string;
        acceptNewsletter?: boolean;
    };
};

Example Implementation

Here’s an example of a of embedded booking with event tracking

<!doctype html>
<html>
    <head>
        <title>Caspeco Booking</title>
        <script src="https://booking.caspeco.net/sdk"></script>
    </head>
    <body>
        <Caspeco-Booking system="se__testbb" unit="13" lang="en-GB" />

        <script>
            window.addEventListener("message", (m) => {
                if (m.data.name === "caspeco-booking-event") {
                    console.log("Event received:", m);
                }
            });
        </script>
    </body>
</html>