How to track Calendly booking pop-up

This article will show you how to track the Calendly booking pop-up in Funnelytics

This is an advanced implementation that requires the help of Google Tag Manager. We have provided a solution however that should make it as easy as possible.

The Problem

This solution is required because Calendly's popup booking form is actually an iframe that loads on the button click. Because of browser security measures, iframes can be hard to deal with.

1. Download and Install this container into your GTM account.

Click the link below to download the .json container file.

Download GTM Container

After downloading the file, navigate to your current GTM container. Click on the Admin tab and then select Import Container.

GTM Import Container-1

Once in the import container window follow these instructions to safely import the container without disrupting your actual setup.

  1. Select the GTM-CALENDLY.json container
  2. Select Existing and, in the tab that will appear on the right, click on Default Workspace
  3. Select Merge
  4. Select Rename conflicting tags, triggers, and variables in the additional settings that will pop up
  5. Click Confirm

GTM Import Container 2-1-1-1

 

2. Add Your Funnelytics Workspace Script to this Tag

In the container, there is a tag called FL - Base Script, You will need to add your workspace script into that tag (but only if you don't have already a Funnelytics script tag set up in your container). 

Google-Tag-Manager calendly-1-1-1

 

This is the only modification that is required in GTM. 

If you already had Funnelytics base tag(s) installed, you can remove that tag.

3. Map The Pages and Action In Funnelytics

Now that we have set up the tracking part, let's map out the Calendly popup in Funnelytics too.


All we have to do is to map the page where our Calendly form is living so that we can connect to it the three possible actions we have. Then test the form so that the canvas will collect the sample data useful for the action setup.


These, of course, have to be advanced actions and once you will test the popup you will see in the canvas these three action names:

  • Calendly Popup Opened (when the user opens the popup)
  • Calendly Selected Date and Time (when the user selects and confirms a date and a time)
  • Calendly Scheduled (when the user gives his data to complete the booking process)

map calendly

4. [OPTIONAL] In-Line Forms

This GTM container is also able to track this kind of form, with these few exceptions.
  • If an in-line form has various events types when the user will select the event the Calendly Popup Opened action will be fired.
  • If the inline form has only one event type it will probably show directly the time and date selection. In this case, no Calendly Popup Opened will be fired.

 

 

If you have any questions or need further clarification, remember to reach out to our support team anytime by emailing support@funnelytics.io, we are always ready to assist you!