Help Scout is one of the best budget-friendly help desks and help doc SAAS companies out there. Pricing is affordable, UI is intuitive, and customer support is great. What more could you ask for? As we implemented measurement systems, we had to find a way to implement Google Tag Manager with Help Scout. This is how we do that.
There is no native integration with Google Tag Manager, but Help Scout does have an API, which is even better!
The Steps To Implement.
- Set the base Help Scout Beacon base code on your site.
- Make sure Google Tag Manager is implemented on your site.
- Put the below code either in the header, or run it within Google Tag Manager’s Custom HTML Tag.
A Quick Note:
Since we are using this for measurement and I do not have a giant sum of money for a lawyer, we are going to stay away from PII, Personal Identifiable Information (Names, emails, customer IDs, etc). If you are wanting to grab those, id recommends Simo Ahava’s blog posts on implementing Serverside Google Tag Manager.
How it works
We are looking for Chat Started & Email Sent as those are the two interactions that could be quantified as either “Leads” or “Considering” a product.
Check out Help Scouts documentation for all of the things you can do!
The below script sits on your page and “listens” for the beacon to work. Then, when the event of “email-sent” happens ( when a customer send support an email) the script below sends the ‘event’ of “email sent” to the dataLayer.
What is the Data Layer?
A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. You can then use that information to populate variables and activate triggers in your tag configurations.
Google’s Explanation
Basically it stores useful information for you.
Within Google Tag Manager you can use “Email Sent” as a trigger for other events containing useful information to Google Analytics, Facebook, etc.
Here is the code you will need to run.
Copy and paste this below your GTM Script and below your Help Scout Script or set it as a custom HTML tag to fire on all pages within GTM.
<script>
//This sends the "event" of "Email Sent" to the Datalayer when a user sends an Email
Beacon("on", "email-sent", function() {
window.dataLayer.push({
'event': 'Email Sent',
});
});
//This sends the "event" of "Chat Started" to the Datalayer when a user starts a chat.
Beacon("on", "chat-started", function() {
window.dataLayer.push({
'event': 'Chat Started',
});
});
</script>
What else can you do with this?
Help Scouts api gives you a list of 10 events to fire along with the parameters you could pass along (that is the PII we were talking about earlier).
“Be Extremely Careful with PII!”
How we use it
We use the above two scripts on every site that has a beacon and is using Zapier or a native integration to port leads into a CRM. We then add extra information to each hit such as custom dimensions, user information, pixel data, or just what the weather was.
How will we know if these people are leads or current customers?
How do we store Help Scout beacon searches to reference?
The idea is that your events would look something like this.
Event Category = Engagment
Event Action = Search
Event Lael = {{Query}}
