A Guide to Help Scout’s API for Google Tag Manager

Written by JJ Reynolds

Lover of actionable data. Builder of systems that grow. Helping organizations grow using good data, not hopes & prayers.

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.

  1. Set the base Help Scout Beacon base code on your site.
  2. Make sure Google Tag Manager is implemented on your site.
  3. 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?

The short answer is you won’t unless the Data Layer knows. We pass subscriber level or customer identification information into the data layer and sort the events on destination. So we would have a report of “Chats with Customers” & “Chats with Leads”

How do we store Help Scout beacon searches to reference?

Searches are super important if you are trying to build a new product. I would recommend storing them either in the ‘hit’ of Google analytics as the label or a hit based custom dimension.

The idea is that your events would look something like this.
Event Category = Engagment
Event Action = Search
Event Lael = {{Query}}

JUMP TO A SECTION!
A Guide to Help Scout’s API for Google Tag Manager

Access The 404 Data Studio Error Report