You can track Calendly bookings using Fathom by listening for events fired by the Calendly embed. With a small snippet of JavaScript, you’ll be able to track when someone selects a date/time or completes a booking.

​
What you’ll need

  • A Fathom script installed on your site
  • A Calendly embed on your site

​
Detecting when someone selects a date and time

Calendly fires a calendly.date_and_time_selected event when a visitor chooses a date and time from your calendar.

Here’s how to track that in Fathom:

<script>
  function isCalendlyEvent(e) {
    return e.data.event && e.data.event.indexOf('calendly') === 0;
  };

  window.addEventListener('message', function(e) {
    if (isCalendlyEvent(e)) {
      if (e.data.event === 'calendly.date_and_time_selected') {
        fathom.trackEvent('Calendly Date/Time Selected');
      }
    }
  });
</script>

​
Tracking when a booking is completed

Calendly fires a calendly.event_scheduled event when a visitor successfully books a meeting.

Here’s how to track that in Fathom:

<script>
  function isCalendlyEvent(e) {
    return e.data.event && e.data.event.indexOf('calendly') === 0;
  };

  window.addEventListener('message', function(e) {
    if (isCalendlyEvent(e)) {
      if (e.data.event === 'calendly.event_scheduled') {
        fathom.trackEvent('Calendly Booking Completed');
      }
    }
  });
</script>

​
Tracking both Calendly events combined

You can also combine both event types into a single script:

<script>
  function isCalendlyEvent(e) {
    return e.data.event && e.data.event.indexOf('calendly') === 0;
  };

  window.addEventListener('message', function(e) {
    if (isCalendlyEvent(e)) {
      if (e.data.event === 'calendly.date_and_time_selected') {
        fathom.trackEvent('Calendly Date/Time Selected');
      }
      if (e.data.event === 'calendly.event_scheduled') {
        fathom.trackEvent('Calendly Booking Completed');
      }
    }
  });
</script>
Note: Feel free to update the event names (Calendly Date/Time Selected and Calendly Booking Completed) to whatever works best for you. These names will appear in your Fathom dashboard exactly as written, so it’s worth using labels that make sense to you.

​
Where to place the code

We recommend adding the code snippet to the footer of your site, just before the closing tag. This ensures the Fathom script loads and page content loads first, and avoids blocking anything critical. Make sure it’s added on every page where your Calendly embed appears, otherwise the events won’t be picked up.