Tracking Online Booking Conversions with Google Tag Manager (GTM)

  1. Overview
  2. Settings
  3. Tracking Online Booking Conversions with Google Tag Manager (GTM)

Overview

This guide explains how to track successful bookings made through the iconpractice online booking widget using Google Tag Manager (GTM).

This setup allows you to trigger conversion events (e.g. Google Analytics, Meta/Facebook, or other platforms) when a booking is successfully completed.

Prerequisite:
This guide assumes a working knowledge of Google Tag Manager. If you are unfamiliar with GTM concepts such as triggers, variables, and tags, you should review basic GTM documentation first.

How It Works

When a booking is successfully completed, the widget renders the following element on the page:

<div class="chm-success-message-title2">
  Your Appointment Has Been Made
</div>

We will configure GTM to detect when this element becomes visible and use that as a conversion trigger.

Step 1: Ensure GTM is Installed

GTM must be installed on the same page where the iconpractice widget is embedded.

  • Confirm your GTM container is loading correctly

  • Use GTM Preview Mode to verify

Step 2: Enable Built-In Variables

In GTM:

  1. Go to Variables

  2. Click Configure

  3. Enable:

    • Click Classes

    • Click Text

    • Element Visibility (if not already enabled)

Step 3: Create an Element Visibility Trigger

  1. Go to Triggers → New

  2. Name it:
    Booking Success - Element Visible

  3. Configure:

    • Trigger Type: Element Visibility

    • Selection Method: CSS Selector

    • Element Selector:

      .chm-success-message-title2

    • When to fire: Once per page (recommended)

Step 4: (Recommended) Add Text Validation

Because the class could theoretically exist elsewhere, you can add an additional safeguard.

Option A (Basic – usually sufficient)

Rely only on the class:

.chm-success-message-title2

Option B (More robust – recommended)

Add a condition:

  • Click Text contains:
    Your Appointment Has Been Made

Note: This text is controlled by the widget, but if you have manually duplicated it elsewhere on your page, it may cause false positives.

Step 5: Create a Tag (Conversion Event)

Once the trigger is created, attach it to a tag.

Examples:

  • Google Analytics 4 Event (e.g. booking_success)

  • Meta/Facebook Pixel event (e.g. Lead or Purchase)

  • Google Ads Conversion

  • Any custom tracking endpoint

Example (GA4 Event):

  • Event Name: booking_success

  • Trigger: Booking Success - Element Visible

This guide does not cover platform-specific tag setup in detail, but the trigger created above can be used with any supported integration.

Step 6: Test Your Setup

  1. Open GTM Preview Mode

  2. Complete a test booking via the widget

  3. Confirm:

    • The success message appears

    • The trigger fires

    • The tag is executed

Important Notes & Limitations

React Rendering

The iconpractice widget is built in React, meaning:

  • The success message is dynamically injected into the DOM

  • Traditional page load triggers will not work

  • Element Visibility is the correct approach

Selector Stability

The class:

.chm-success-message-title2

is only used for successful bookings within the widget and is safe to rely on.

Avoid False Positives

If your site includes similar text manually:

  • Use both class + text matching

  • Or restrict firing using additional GTM conditions

Summary

To track booking conversions:

  1. Install GTM on the page hosting the widget

  2. Create an Element Visibility trigger targeting:

    .chm-success-message-title2

  3. Attach the trigger to your preferred conversion tag

  4. Test thoroughly using GTM Preview Mode

Was this article helpful?