Google Analytics

Setup UTM parameters and onsite events.

Overview

Integrating Tuul with your Google Analytics enables the Customer Success Team to enhance your AI chat experience. By utilizing UTM parameters and onsite event data, we can assess the chatbot's impact on user engagement and revenue.

Granting Access

To grant Tuul access to your Google Analytics, please use the following email: [email protected].

This secure Google email will provide the Tuul Customer Success team with visibility into event tracking.

If you have any questions, please reach out to your Customer Success Manager.

UTM Paramater Configuration

Use UTM parameters to track URL click-throughs from the chatbot. This helps measure the revenue impact driven by your Tuul chatbot.

Urchin Tracking Module (UTM) parameters are text strings appended to URLs that allow marketers to track the effectiveness of online marketing campaigns across traffic sources and publishing media.

Examples

• utm_source=chat

• utm_medium=onplatform

---

Event Tracking Configuration

Tuul’s chatbot emits JavaScript events to track various user interactions within the chat. These events can also be used by your development team to pass event data into their analytics instance if your brand is not utilizing Google Tag Manager. See the below table for a detailed list of these events.

Note: all below events are beneficial to obtaining more in-depth analytics around your brand bot. However, the following core events are necessary and key for launch: on-chat-widget-open on-client-send-message on-chat-message-quick-reply-click on-chat-widget-close

Event Name	Event Detail	Description
on-chat-widget-open	null	Triggered when the chat widget is opened.
on-client-send-message	{ message: string }	Dispatched when a message is sent to the bot and contains the utterance string of the message.
on-chat-message-quick-reply-click	{ value: string; }	Triggered when a quick reply is selected. Followed by a message send event.
on-chat-card-link-click	{ cta: string; href: string; label: string; }	Dispatched when the user clicks a link card within a carousel and includes the link card button CTA, the link target, and the label.
on-chat-input-change	{ value: string; }	Fired with each keystroke in the input field.
on-chat-input-submit	{ value: string; }	Dispatched when a message is submitted via input box.
on-chat-media-image-loaded	null	Dispatched when a chat image finishes loading.
on-chat-widget-close	null	Triggered when the chat widget is closed.

Google Tag Manager Implementation Examples

Included below are example implementations to get started.

Adding the ON events in the "Engagement" section of the GA reports is the simplest way to view the ON events in Google Analytics.

Tuul’s base code

<on-chat-bot-client
  client-id=""
  display-mode=""
  env=""
  initial-prompt=""
></on-chat-bot-client>// Some code

Tuul's base code combined with JS event tracking for Analytics

<on-chat-bot-client
  client-id=""
  display-mode=""
  env=""
  initial-prompt=""
></on-chat-bot-client>
<script defer src="https://web-chat.services.gameontechnology.com/v2/static/bot-client.js"></script>
<script>
  function pushToDataLayer(data) {
    if (window.dataLayer) {
      window.dataLayer.push(data);
    }
  }
  document.addEventListener('on-chat-widget-open', (e) => {
    pushToDataLayer({
      'event': 'GAevent',
      'eventCategory': 'chat',
      'eventAction': 'popup',
      'eventLabel': 'open_popup'
    });
  });
  document.addEventListener('on-chat-widget-close', (e) => {
    pushToDataLayer({
      'event': 'GAevent',
      'eventCategory': 'chat',
      'eventAction': 'popup',
      'eventLabel': 'close_popup'
    });
  });
  document.addEventListener('on-chat-card-link-click', (e) => {
    pushToDataLayer({
      'event': 'GAevent',
      'eventCategory': 'chat',
      'eventAction': 'click_link',
      'eventLabel': e.detail.label
    });
  });
  document.addEventListener('on-client-send-message', (e) => {
    pushToDataLayer({
      'event': 'GAevent',
      'eventCategory': 'chat',
      'eventAction': 'send_message',
      'eventLabel': e.detail.message
    });
  });
</script>// Some code