As a first step, please familiarize yourself with the custom events that our client code sends to the browser when Chili Piper is loaded within a page.
These messages allow us to track specific events and actions on the calendar. Utilizing a tool like Google Analytics can provide deeper insights into the customers who don't take action vs. those who book meetings.
Use this to potentially track customer region, referring page, browser type, device type, or if you want to quantify the number of visitors who ultimately book or don't complete the booking process.
There are two different implementations:
Important
This article makes the assumption that you have working knowledge of Google Analytics and its setup process. The examples provided within this article are for informational purposes only, and we do not recommend deploying them on a live production page without the help of an experienced developer.
The assumption is therefore also made that you have a property and data stream set up in Google Analytics already. If this is not the case, please review the installation instructions on Google's knowledgebase.
"Google Analytics 4" (GA4) snippet
If you are using the newer GA4 snippet, again, be sure it's included on the page you have your booking calendar loading on. We will assume for the purposes of this article that you have set up the required property in Google Analytics and have your global tracking code from Google.
Example code
The same example code is used as above, but this time we use the new gtag function:
gtag('event', 'Category_name', {parameters});
Google Analytics 4 formats these events a bit differently, so it may make more sense to transpose the action, category, and label names.
You can use either gtag function format, or dataLayer.push. This is up to you depending on your configuration.
In this example we send an event to Google if the label is "booked". For a full list of actions we send, refer to this article.
<script>
window.addEventListener("message", function(event){
const [action, label] = Object.entries(event.data)[0];
if( label === "booked" ){
gtag('event', action, {
'event_category' : 'Chili Piper Engagement',
'event_label' : label
});
}
// OR
// dataLayer.push({label: action})
});
</script>
Realtime data
Here's an example of how it would look, capturing a calendar getting loaded within a "user snapshot" of real-time data within Google Analytics 4. Note that GA4 also captures other useful event properties automatically.
"Universal Analytics" snippet
Universal Analytics to be Deprecated Soon
Google is deprecating this method soon. We recommend looking into the previously provided GA4 example unless you are limited to using this method.
If you are using the older (but still widely supported) UA (Ga) snippet, be sure it's included on the page that you have your booking calendar loading on.
Example code
You need to capture the messaging / events as they happen. This is done by adding an event listener. When the event listener captures a message, we make sure it's an array (from Chili Piper booking event) and then send this event to Google with the function
ga('send', 'event', {parameters});
In our example, we store the booking action as "label", but you can adjust this as needed. The eventCategory can be any name you like for tracking purposes.
In this example we send an event to Google if the label is "booked". For a full list of actions we send, refer to this article.
<script>
window.addEventListener("message", function (event) {
const [action, label] = Object.entries(event.data)[0];
if(label === "booked"){
ga('send', 'event', {
eventCategory: 'Chili Piper',
eventAction: action,
eventLabel: label,
eventValue: 1
});
}
});
</script>
Realtime data
Here's an example of how it would look, capturing a booking from calendar loaded to booking confirmed in the real-time data of Google Analytics