< Back to Resources Section

Conversion tracking with HotDoc’s Online Bookings widget

 

There are two ways to track conversions with the HotDoc Booking Widget.


Option 1: Reference our tracking script 

This works for Google Analytics, Google Tag Manager and Facebook Ads.

The simplest way to track conversions from your HotDoc Booking Widget is by copying the following HTML snippet and pasting it onto each page of your website that features the HotDoc Booking Widget. You can add it anywhere on the page.

<script type="application/javascript" src="https://cdn.hotdoc.com.au/static/assets/js/hotdoc-widget-event-tracking.min.js"></script>

 

How do I add this HTML to my website?
In WordPress, for example, you can paste the above snippet onto a page using the ‘text’ side of the normal content editor.

Most websites will allow you to paste custom HTML onto a page fairly easily. If you’re not sure how to add HTML to your website, we recommend you request assistance from whomever manages your website, or chat to your HotDoc Customer Success Manager.

Once you’ve added this code, you’ll probably want to complete your setup from within the tracking platform. For Google Analytics, for example, you’ll want to use these ‘Events’ to create ‘Goals’ in order to record your conversions correctly.

We’ve created some specific guides for each platform:


Option 2: Download our example script – Javascript (Advanced)

If you want to modify the way events are tracked, or you want to track to a different platform than the ones we’ve provided, use the script below. This script is a readable, commented version of the above snippet above.

The below script shows 3 Javascript events being produced by the HotDoc Booking Widget:

  • The patient sees the loaded widget
  • The patient interacts with the widget
  • The patient books an appointment

 

These events are then formatted and sent to event tracking protocols:

  • Google Analytics (gtag.js)
  • Google Analytics (analytics.js)
  • Google Tag Manager
  • Facebook Tracking Pixel (Note: only the final booking event is sent to Facebook).

 

<script>

	"use strict";

	// This script will look for common tracking methods from Google Analytics, Google Tag Manager and Facebook Pixel.
	// Each tracking method detected will be send events from the HotDoc Online Bookings Widget.
	// You can remove platforms you don't need by deleting the sectoin within the function below.


	function sendHotDocEvent(eventAction, eventLabel) {

	    // Google Analytics (gtag.js)
	    // https://developers.google.com/analytics/devguides/collection/gtagjs/events
	    if ( typeof(gtag) !== "undefined" ) {
	        gtag("event", eventAction, {
	            event_category: "HotDoc",
	            event_label: eventLabel
	        });
	    } 

	    // Google Analytics (analytics.js)
	    // https://developers.google.com/analytics/devguides/collection/analyticsjs/events
	    if ( typeof(ga) !== "undefined" ) {
	        ga("send", {
	            hitType: "event",
	            eventCategory: "HotDoc",
	            eventAction: eventAction,
	            eventLabel: eventLabel
	        });
	    } 

	    // Google Tag Manager Event
	    // https://developers.google.com/tag-manager/devguide
	    if ( typeof(dataLayer) !== "undefined" ) {
	        dataLayer.push({
	            event: "HotDoc",
	            gaEventAction: eventAction,
	            gaEventLabel: eventLabel
	        });
	    }

	    // Facebook Tracking Pixel
	    // Only tracks final event (patient-books-appointment) by default.
	    // https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking
	    if ( eventAction === "patient-books-appointment" && typeof(fbq) !== "undefined" ) {
	        fbq("track", "Schedule");
	    }

	}

	function receivedHotDocConversion(e) {
	    // Get metadata from the event fired by the HotDoc Widget
	    var event = e.detail;

	    // Step 1: 
	    // The widget is loadedThe 
	    if (event.code === "patient-sees-loaded-widget") {
	        sendHotDocEvent(event.code, event.meta.clinic);
	    }

	    // Step 2: 
	    // The patient interacts with the widget
	    if (event.code === "patient-starts-triage-questions") {
	        sendHotDocEvent(event.code, event.meta.clinic);
	    }

	    // Step 3: 
	    // The patient books an appointment with the widget
	    if (event.code === "patient-books-appointment") {
	        var eventLabel = [
	            event.meta.clinic,
	            event.meta.doctor,
	            event.meta.reason,
	            event.meta.patient
	        ].join(" - ");
	        sendHotDocEvent(event.code, eventLabel);
	    }
	}

	// Listen for events that are fired by the HotDoc Online Bookings Widget
	window.addEventListener("hotdocConversion", receivedHotDocConversion, false);

</script>