Lesson 1 of 4

Calendly Bookings

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

An embedded Calendly widget lives in an iframe, so a booking never reaches GTM directly. Instead Calendly posts a stream of message events to the parent window as the visitor moves through the flow: profile viewed, event-type viewed, date and time selected, and finally event scheduled.

You'll add a Custom HTML listener that catches those messages and pushes a clean dataLayer event for each. The one that matters for conversions is calendly_event_scheduled, the completed booking, but capturing the earlier steps lets you build a booking funnel and spot where prospects drop off.

Because every Calendly message name starts with calendly., one listener catches the whole family, no per-event wiring needed.

Goal

Capture Calendly's booking events into the dataLayer and fire a tag on calendly_event_scheduled.

Build it in GTM

Add the listener as a Custom HTML tag

Paste this into a Custom HTML tag firing on All Pages (or Initialization). It turns Calendly's signals into dataLayer events:

<script>
(function () {
  function isCalendly(e){ return e.data && typeof e.data.event === 'string' && e.data.event.indexOf('calendly') === 0; }
  window.addEventListener('message', function (e) {
    if (!isCalendly(e)) return;
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: e.data.event.replace(/\./g, '_'), calendly: e.data.payload });
  });
})();
</script>

Create a Custom Event trigger on calendly_event_scheduled
Go to Triggers → New → Custom Event, set the event name to calendly_event_scheduled, name it for the widget and Save.
Fire a tag on it
Add a GA4 Event tag (or the Custom HTML - Test stand-in) firing on that trigger, so the captured event reaches your analytics.
Go deeper
Want the full production script, a walkthrough video and a downloadable GTM recipe? DumbData: Calendly listener script, video + GTM recipe.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

In your GTM, click Preview.
Paste the live URL above and click Connect.
Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Clicking through the simulated widget pushes calendly_event_scheduled to the dataLayer, and your GA4 tag fires on it in Tag Assistant.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 4 lessons complete