Track Calendly Events in GA4 using GTM

Calendly is a popular scheduling tool used by businesses to streamline appointment bookings. Tracking Calendly events in Google Analytics 4 (GA4) using Google Tag Manager (GTM) lets you gain deep insights into user behavior on your booking pages.

This guide explains how to capture Calendly interactions as GA4 events for better attribution, optimization, and UX analysis.

---

1) Calendly Events You Can Track

• Widget loaded → detect when the booking widget appears.
• Event scheduled → capture successful meeting bookings as conversions.
• Date & time selected → see where users are in the funnel.
• Event type viewed → understand which meeting types are most popular.

---

2) Setup Prerequisites

Before you start, make sure you have:

• An active GTM container installed on your website (Google Tag Manager Setup Guide).
• A GA4 property configured for your site and linked in GTM (GA4 Event Tracking Guide).
• Calendly embed code (inline, pop-up, or text link) added to pages where booking occurs (Calendly Developer Docs).

---

3) Listener Script for Calendly 

postMessage

 Events

Because Calendly runs in an iframe, you need a listener to capture its events. Add a Custom HTML tag in GTM with this script. Set it to fire on “All Pages.”

<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener('message', function(e) {
  if (!e || !e.data || !e.data.event) return;
  if (!e.data.event.startsWith('calendly')) return;
  var type = e.data.event.split('.')[1] || 'unknown';
  window.dataLayer.push({
    event: 'calendly',
    calendly_event: type
  });
});
</script>

4) GTM Configuration

• Variable: Create a Data Layer Variable named DLV – calendly_event to capture the calendly_event key from the dataLayer.
• Trigger: Create a Custom Event trigger named cEvent – calendly that fires when the event name is calendly.
• Tag: Create a new GA4 Event tag. Set the Event Name to calendly_{{DLV – calendly_event}} to create dynamic event names like calendly_event_scheduled. Attach it to the cEvent – calendly trigger.

---

5) Testing & Debugging

• Use GTM Preview Mode and open GA4 DebugView.
• Go through the booking process on your site.
• In DebugView, watch for the calendly events to appear with the correct event name (e.g., calendly_event_scheduled) as you interact with the widget.

---

Final Thoughts

Tracking Calendly with GTM and GA4 provides critical insights into the customer booking journey. With this setup, marketers can:

• Optimize campaigns.
• Improve user experience.
• Validate the ROI of their marketing spend.

👉 Want a ready-to-import GTM recipe for Calendly and a full implementation guide? Contact MetricByte Consulting for support.