In addition to the built-in Google Analytics and Google Ads tracking, the LocalMed widget also sends postMessage events. With just a little extra effort, this functionality lets you handle your own tracking, allowing you to do custom tracking that our widget doesn’t support.
In this article, we'll explore:
LocalMed Widget iframe Tracking
The LocalMed widget will post messages to the practice website's iframe that can be used for advanced tracking. Each message will be a JSON encoded string with an <event> property to identify each message's purpose. There will also be an <iframeName> property to help distinguish between iframes when multiple LocalMed widgets are used on the same page.
trackPage
Each page the user visits within the LocalMed iframe will be sent to the host iframe. Here's an example:
{
"event": "trackPage",
"iframeName": "localmed-iframe-xyz",
"href": "https://www.localmed.com/providers/provider1/widget/"
}
trackEvent
There are multiple user events sent from the LocalMed Widget, here are examples of each of them:
Viewed LocalMed Widget
This is triggered when the widget is loaded successfully.
{
"event": "trackEvent",
"eventName": "Viewed LocalMed Widget",
"iframeName": "localmed-iframe-xyz"
}
Viewed LocalMed Appointment Form
This is triggered after the patient selects an opening and they need to fill out their information.
{
"event": "trackEvent"
"eventName": "Viewed LocalMed Appointment Form",
"iframeName": "localmed-iframe-xyz",
"providerId": "provider1",
"providerDisplay": "Dr. Perry Cox",
"officeId": "office1",
"officeDisplay": "Sacred Heart Hospital"
}
Scheduled LocalMed Appointment
Triggered after the patient successfully submits an appointment.
{
"event": "trackEvent",
"eventName": "Scheduled LocalMed Appointment",
"iframeName": "localmed-iframe-xyz",
"contactMobilePhone": "5551234567",
"appointmentId": "appointment1",
"providerId": "provider1",
"providerDisplay": "Dr. Perry Cox",
"officeId": "office1",
"officeDisplay": "Sacred Heart Hospital",
"practiceId": "practice1",
"practiceDisplay": "Sacred Heart Hospital",
"reasonForVisitId": "reason1",
"reasonForVisitDisplay": "Teeth Cleaning",
"patientStatusId": "new",
"insuranceIssuerId": "issuer1",
"insuranceIssuerDisplay": "I Will Pay Myself"
}
postMessage Mozilla Examples
If you're not familiar with Mozilla API, here are some postMessage documents/examples:
All you have to do is add a little bit of JavaScript. Something like this:
window.addEventListener("message", (event) => {
if (event.origin !== "https://www.localmed.com") {
return;
}
if (event.data.eventName === "Scheduled LocalMed Appointment") {
// trigger your tracking code to fire here
}
}, false);
Important Note on postMessage Functionality
The postMessage functionality only works for communicating between frames. If a user opens a direct LocalMed widget link in a new tab/window instead of the iframe popup, your website won’t receive any messages. If you want to avoid missing messages, go one step further and place an embedded widget on a page on your website (e.g. https://yourwebsite.com/schedule-online/) and have your schedule links point at that page instead of the widget URL directly. The postMessage listening code and your tracking code would live there and receive messages from the embedded widget iframe.