Chili Piper Router Event Listener in GTM (Google Tag Manager) & GA4 Event/Conversion
For those of you trying to wade through using GA4 after a lifetime of using UA, you might find this helpful.
I'm reconfiguring all our conversions (events) in GA4 to truly be events and not just 'thank you' page views (event though GA4 makes 'page view' an event out of the box). Because of this, I needed an event listener in Google Tag Manager for our HubSpot form submission and then separately for our Chili Piper router which sets after the form submission. Reason being, we consider a form submission as an MQL and an actual meeting booked as an SAL. This is because we use Chili Piper to only allow 'qualified' prospects to book a meeting. So they're an SAL, not just an MQL.
I was easily able to find a script to create an event listener (and thereby a GA4 event) for the HubSpot form submission, but there wasn't a straight-forward event listener script for Chili Piper (aside from this knowledge base article which didn't really get me what I needed).
This is where Allan comes in. He and I went back and forth over email probably five or six times before he suggested just jumping on a call. He went above and beyond helping craft a script (for Google Tag Manager) to serve as the event listener...and it works!
We've got a few more details to iron out. So, I'll post the script here (and the process I follow for creating the listener, the actual GA4 event tag and the conversion in GA4) when it's ready so those of you that might be looking for a similar solution can just copy/paste. But, mainly I just wanted to say thanks to Allan and also share the script and how I implement it (once it's all done). So, stay tuned!
-
Thanks for sharing your use case, Brandon! We'll be looking forward to the script and the process you're following - I'm pretty sure it will help other users checking this post! 💪🏻
0 -
For sure!
So, here's the follow-up.
What you'll need to do is create an event listener tag in Google Tag Manager (GTM) first. That code should look something like this:
<script>
var saas_or_fulfillment = "";
var how_can_we_help_you = "";
window.addEventListener("message", function event(event) {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
saas_or_fulfillment = event.data.data.submissionValues['saas_or_fulfillment'];
how_can_we_help_you = event.data.data.submissionValues['how_can_we_help_you'];
}
if (event.data['action'] === "booked") { cpRouteId = event.data.args['routeId']; }
if (event.data['action'] === "booking-confirmed") {
window.dataLayer.push({
'event': 'booking-confirmed',
'saas-or-fulfillment' : saas_or_fulfillment,
'how-can-we-help' : how_can_we_help_you
});
}
}, false);
</script>In the above, you can see we're setting two variables, 'saas_or_fulfillment' and 'how_can_we_help_you', which help identify which line of business this form submission (and then meeting booking) belong to. Those will be used to pass parameters in the actual GA4 event tag so we can use a custom dimension in GA4 to segment our reporting.
Then what you're seeing is these pieces of data getting pushed into the dataLayer if there is a 'booking-confirmed' action which is sent by default from Chili Piper to the dataLayer.
So,what's important to remember is you'll need to adjust the variables based on which parameters you want to send in the dataLayer. The one that will not change is 'event' : 'booking-confirmed'.
Once you have that tag created you can test it in preview mode in GTM. After doing that, you can create another tag for the actual GA4 event. The key here is the trigger for this event will be a 'custom event' with the 'event name' of the event your listener is listening for. So, in this case the 'event name' would be 'booking-confirmed'. That will be the 'custom event' for the trigger for the actual GA4 event. If you need some guidance, I suggest reviewing this article by Analytics Mania: https://www.analyticsmania.com/post/how-to-track-events-with-google-analytics-4-and-google-tag-manager/
He does a good step-by-step job of explaining the process.
Ultimately, this setup allows you to track a form submission event and then a Chili Piper meeting booked event. As mentioned in the original post, we need this to delineate between MQLs and SALs. Passing parameters in the tag and creating custom dimensions in GA4 helps us segment by line of business.
2 -
This is so good that I just sent it to my customer who was trying to do the same :) Thank you so much for sharing!
0
Please sign in to leave a comment.
Comments
3 comments