4. Using the Data Layer to Define Custom Variables

What is the Data Layer?

Learn more about the Data Layer and how to access/use the information found in the Data Layer here: https://developers.google.com/tag-platform/tag-manager/web/datalayer

Accessing the Data Layer

In order to access the data layer and see what data is being sent from the widget into your GTM, you need to run your website in "Debug" mode using the Google Tag Assistant Chrome Extension.

Download the Chrome Extension here: https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en

Debug With Tag Assistant Extension

Next, you will need to open your newly added Chrome extension and add the domain you have your Engagement Widget installed on.

If you do not have your Google Tag Manager script installed on this website, the debugging process will not work.

Once you add your domain, you will see a screen that looks like the screenshot below, and you will start to see all actions on your website stream into the Tag Assistant.

Make sure you select the correct GTM account ID at the top of the screen so you see the correct events flowing into your Tag Assistant.

You can learn more about using the Tag Assistant by reading Google's help docs here: https://support.google.com/tagassistant/answer/10039345

Send Widget Events To Tag Assistant

Now that you have your Tag Assistant setup and you have selected the correct GTM account, any actions you perform on your website will start showing up in the "Summary" sidebar in Tag Assistant, including the widget events that ChatHQ sends when you interact with a ChatHQ Engagement Widget™.

The next step is to interact with the widget installed on the website that is being tracked by your Tag Assistant. By performing any of the following events, you will see the events and data show up in your Tag Assistant.

7 Widget Events Tracked:

1. widget_opened

2. widget_closed

3. tool_opened

4. tool_closed

5. welcome_message_clicked

6. welcome_message_closed

7. all_welcome_messages_closed

Identifying Data to Use

Now that we have widget events showing up in the Tag Assistant, you will need to inspect the data layer to see exactly what data can be used when setting up custom Tags in your Google Tag Manager.

Example of Widget Event Data

Below you will see an actual JSON payload of the widget event data passed into the Google Tag Assistant. You will see many different data points that you can capture and use in your analytics for various use cases.

{
  event: "tool_opened",
  gtm: {uniqueEventId: 11, start: 1682610911572},
  app: "engagement-widget",
  account: "CHATHQ ACCOUNT ID",
  widget: "YOUR WIDGET ID",
  token: "BROWSER SESSION TOKEN",
  location: {
    ancestorOrigins: {},
    href: "https://www.chathq.io/?gtm_debug=1682610910815",
    origin: "https://www.chathq.io",
    protocol: "https:",
    host: "www.chathq.io",
    hostname: "www.chathq.io",
    port: "",
    pathname: "/",
    search: {gtm_debug: "1682610910815"},
    hash: {},
    title: "Helping HighLevel agencies increase customer engagement a" +
           "nd conversions | ChatHQ"
  },
  ua: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/53" +
      "7.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36",
  contact: {
    customer_id: "YOUR CUSTOMER'S HIGHLEVEL ID
    (Only available if you have Sticky Contact turned on)",
    country: "US",
    location_id: "YOUR CUSTOMER'S HIGHLEVEL LOCATION ID
    (Only available if you have Sticky Contact turned on)"
  },
  ts: 1682611379110,
  el: "tool_item",
  tool: "tool-reviews",
  toolId: "UYRLaZjNJz4Qhzv6lnD9c"
}

This specific event occurred when I "Opened a Tool" inside my Engagement Widget. You will notice at the bottom of this JSON payload, there is a "tool" and "toolId" field.

You can actually identify which tool was opened so you know exactly what actions your website visitors took before they converted!

For the next steps, I am going to identify the data variables I want to pass into my widget analytics by looking at the data layer above. I will be setting up analytics for the following data points:

• account: "CHATHQ ACCOUNT ID"

• widget: "YOUR WIDGET ID"

• token: "BROWSER SESSION TOKEN"

• el: "tool_item"

• tool: "tool-reviews"

• toolId: "UYRLaZjNJz4Qhzv6lnD9c"