Advanced Calendly Google Tag Manager Conversion Tracking

In case you have not tried it yet, Calendly has a great Google Analytics integration. It does the job well for basic goal tracking requirements. The setup is pretty much one click, But if you want to dive deeper and track your campaigns, then continue reading the following detailed steps on how to set up an Advanced Calendly Conversion Tracking with Google Tag Manager.

While working with a client who is using Windsor.ai for cross-channel reporting, I discovered that tying bookings back to the original marketing source is quite hard to do with this setup.

So I went on to develop a small solution in Google Tag Manager which allows to connect Calendly events to CRM and Analytics data. It uses the email address of the person registering for an event, hashes it and saves it into the data layer. To understand the path to conversion it then triggers an e-commerce conversion with the hashed email address as transaction id. This allows me to then check what sessions the client id the user had preceding the calendal conversion event.

I can then understand all interactions a user had with the website. A sample visualisation is below:

In it’s approach it is quite similar to what I summarise in the article about how to integrate Google Analytics to any CRM system.

In B2B this is quite important as often the upper funnel touch points are just left out, which in my opinion is a terrible thing to do.

A requirement for this to work is that you use Calendly in an iframe on your website and that you redirect to an external thank you site.

As of this writing the redirect to an external site is only possible if you are on a Calendly pro plan.

So let’s have a look at the configuration I put together to set up an Advanced Calendly Conversion Tracking with Google Tag Manager.

Step 1: Create Calendly page

Create your Calendly page and embed it into your website. Configure the confirmation page dropdown so that the external redirect URL is used. Make sure to tick the box Pass event details to your redirect page.

Step 2: Submit a test lead

Submit a test lead and you will see that you will get your redirect with the event details in the URL. Here is a sample on how it will look like:

https://windsor.ai/thank-youfinished?assigned_to=Acme%20Advisor&event_type_uuid=GAFVAYKCXPXHXZKG&event_type_name=meet_matthias&event_start_time=2020-09-17T08%3A45%3A00%2B02%3A00&event_end_time=2020-09-17T09%3A00%3A00%2B02%3A00&invitee_uuid=FDQE2JFXYWQJTWZ2&invitee_first_name=your&invitee_last_name=name&invitee_email=your.name%40windsor.ai

Step 3: Setup Google Tag Manager

Now we start with the Tag Manager Setup. The way I configured it is the following:

Create a custom variable:

Head to Variables -> User Defined Variable and click New

Select Variable Type URL, Component Type Query. Now enter `invitee_email` as Query Key. This saves the email address from the Calendly pages.

Create a Custom HTML tag:

Head to Tags and click New

Select Tag Type Custom HTML

In the HTML Code box, add a script that loads the sjcl hashing library, then, if the calendly_email variable is present, hashes it with SHA-256 into a booking_id and pushes it to the data layer as a calendly_booking event, using window.dataLayer = window.dataLayer || [] followed by dataLayer.push() with event: 'calendly_booking' and booking_id set to the hashed value.

It will look like this

Head back to Tags and click New again

Select Tag Type Google Analytics: GA4 Event, and pick the GA4 Configuration tag that links to the GA4 property your website is on.

Set the Event Name to calendly_booking, then add an Event Parameter named booking_id mapped to a Data Layer Variable reading the booking_id key pushed by the HTML tag above.

Head to Advanced Settings -> Triggering and set this tag to fire on a Custom Event trigger matching calendly_booking, rather than tag sequencing, so it fires exactly when the data layer event above is pushed.

Step 4: Testing

Now every lead you submit via Calendly should trigger a calendly_booking event in GA4, with the hashed email attached as the booking_id parameter.

Head to GA4’s Realtime report, or build an Exploration filtered to the calendly_booking event, to confirm it’s firing and see which traffic sources it’s tied to.

Analyzing the data

Google Sheets

To now analyse this data you can load it via Google Analytics Google Sheets plugin which you can get here: https://developers.google.com/analytics/solutions/google-analytics-spreadsheet-add-on. With this, you should be able to see the transaction ID and the last click source / medium / campaign etc.

Google Analytics API

You can query the data directly into your BigQuery project. A good starting point is to get your query set up here: https://ga-dev-tools.appspot.com/dimensions-metrics-explorer/. You can select the metrics and dimensions you want to pull.

Windsor.ai

If you setup your data stream on our platform you will be able to understand the whole conversion path online to form fill. Even better, you can also connect your CRM data so you can understand the whole customer journey from first interaction to becoming your customer.

Wrapping it up

To come back to the beginning of the post where I mentioned the customer which asked me for a solution to the Calendly tracking issue: This solution helps the client not only to track the conversion journeys for the form fills across CRM and Google Analytics data but also for the Calendly form fills. In this particular case the code which was in place was already tracking the other form fills with the hashed emails as transactions.

If you are interested in tracking non Calendly activities such as form submissions in the same way you might want to read the article about integrating Google Analytics with any CRM system I mentioned earlier on in this article.

There are probably other solutions for exactly the same problem out there. In case you have one please feel free to drop us a note or contact us on the chat.