Tag Chef GTM Inspector<\/a>, I was able to extract the Custom HTML tag they were using in GTM. Boom!<\/p>\n\n\n\nIn this tag, they were actually limiting the events they are listening to based on their origin – a chilipiper.com subdomain as the implementation script uses.<\/p>\n\n\n\n
The script listens to these events, parses the event data and assigns friendly names to the events. These are then printed both as a console log and a data layer push.<\/p>\n\n\n\n
I’ve made some adjustments to the script to make it more robust.<\/p>\n\n\n\n
Google Tag Manager implementation (recommended)<\/h2>\n\n\n\n Create a new Custom HTML tag and paste in the script below. Set the tag to trigger either on all pages or only the ones that have Chili Piper implemented on.<\/p>\n\n\n\n
<script>\r\nwindow.addEventListener(\"message\", function (a) {\r\n if (a.origin.match(\/^https:\\\/\\\/[a-z0-9\\.\\-]{2,}?\\.chilipiper\\.com$\/)) {\r\n \/\/ Extract action from the incoming message\r\n var action = a.data.action;\r\n\r\n \/\/ Extract arguments if exist\r\n var args = a.data.args || {};\r\n \r\n \/\/ Mapping of actions to new values\r\n var actionMapping = {\r\n \"booking-confirmed\": \"confirmed\",\r\n \"booked\": \"booked\",\r\n \"rescheduled\": \"rescheduled\",\r\n \"availability-loaded\": \"availability_loaded\",\r\n \"no-free-slots\": \"availability_empty\",\r\n \"phone-selected\": \"type_selected\",\r\n \"meeting-selected\": \"type_selected\",\r\n \"closed\": \"window_closed\"\r\n };\r\n\r\n \/\/ Check if the action is present in the mapping\r\n if (actionMapping.hasOwnProperty(action)) {\r\n \/\/ Update action based on the mapping\r\n var mappedAction = actionMapping[action];\r\n console.log(\"Concierge - \" + mappedAction + \": \", a); \/\/ Can delete this line\r\n\r\n var meetingType = \"meeting\"; \/\/ Update this dynamically if needed\r\n\r\n \/\/ Construct the dataLayer push object\r\n var dataLayerPush = {\r\n event: \"chilipiper_\" + meetingType + \"_\" + mappedAction,\r\n chilipiper: {\r\n meeting_route_id: args.routeId,\r\n meeting_event_id: args.eventId,\r\n meeting_assignee_id: args.assigneeId,\r\n meeting_slot: args.slot\r\n }\r\n };\r\n\r\n \/\/ Push the object onto the dataLayer\r\n window.dataLayer.push(dataLayerPush);\r\n }\r\n }\r\n});\r\n<\/script><\/code><\/pre>\n\n\n\nThe output of the data layer event will look similar to this:<\/p>\n\n\n\n
dataLayer.push({\r\n event: \"chilipiper_meeting_confirmed\",\r\n chilipiper: {\r\n meeting_route_id: \"65549e2bccc62f44707ce148\",\r\n meeting_event_id: \"65549e413dcd744fdb25fcb2\",\r\n meeting_assignee_id: \"0055J000002NpzAQAS\",\r\n meeting_slot: {start: 1700132400000, end: 1700135100000}\r\n }\r\n})<\/code><\/pre>\n\n\n\nYou can now create a GA4 Event tag to send these events into GA4.<\/p>\n\n\n\n
You can use the {{Event}}<\/code> variable to dynamically pass the data layer’s event name as the GA4 event’s name.<\/p>\n\n\n\nYou can also add any of the values sent in the data layer as event params. Note that these are nested under the chilipiper<\/code> key so should be referenced accordingly, e.g. chilipiper.meeting_route_id<\/code><\/p>\n\n\n\nFinally, create a Trigger of the type Custom event. You can select a specific event or a catchall regular expression as I did (make sure to check the Use regex matching<\/em> box):<\/p>\n\n\n\nGoogle Analytics 4 implementation<\/h2>\n\n\n\n Similar to the GTM implementation above, we can also trigger these events directly as GA4 events using this code:<\/p>\n\n\n\n
<script>\nwindow.addEventListener(\"message\", function (a) {\n if (a.origin.match(\/^https:\\\/\\\/[a-z0-9\\.\\-]{2,}?\\.chilipiper\\.com$\/)) {\n \/\/ Extract action from the incoming message\n var action = a.data.action;\n\n \/\/ Extract arguments if exist\n var args = a.data.args || {};\n \n \/\/ Mapping of actions to new values\n var actionMapping = {\n \"booking-confirmed\": \"confirmed\",\n \"booked\": \"booked\",\n \"rescheduled\": \"rescheduled\",\n \"availability-loaded\": \"availability_loaded\",\n \"no-free-slots\": \"availability_empty\",\n \"phone-selected\": \"type_selected\",\n \"meeting-selected\": \"type_selected\",\n \"closed\": \"window_closed\"\n };\n\n \/\/ Check if the action is present in the mapping\n if (actionMapping.hasOwnProperty(action)) {\n \/\/ Update action based on the mapping\n var mappedAction = actionMapping[action];\n console.log(\"Concierge - \" + mappedAction + \": \", a); \/\/ Can delete this line\n\n var meetingType = \"meeting\"; \/\/ Update this dynamically if needed\n var eventName = \"chilipiper_\" + meetingType + \"_\" + mappedAction;\n\n \/\/ Construct the eventParams object\n var eventParams= {\n meeting_route_id: args.routeId,\n meeting_event_id: args.eventId,\n meeting_assignee_id: args.assigneeId,\n meeting_slot: args.slot\n };\n\n \/\/ Push the event to GA4 \n gtag('event', eventName , eventParams)\n }\n }\n});\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Chili Piper is a popular tool for meeting scheduling and beyond, used by many B2B companies globally. Since this tool is so deeply integrated with the meetings booking process of many companies, it is crucial to have it accurately reporting to your analytics and ad platforms. While researching this post I have tried to use […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,39],"tags":[],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5759"}],"collection":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/comments?post=5759"}],"version-history":[{"count":2,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5759\/revisions"}],"predecessor-version":[{"id":5763,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5759\/revisions\/5763"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=5759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=5759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=5759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/trackingchef.com\/wp-content\/uploads\/2023\/11\/image.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/trackingchef.com\/wp-content\/uploads\/2023\/11\/image-1.png\")
<\/figure>\n\n\n\n