Analytics integration

You can integrate certain Seamly Web-UI events into your website analytics. In this guide we describe the events you can track and how to integrate them. All of these events can be implemented using the window.seamly Window API events.

Integration

To integrate with your sites analytics you need to:

Find out how to pass data to your analytics suite. For example with a Google Analytics datalayer it could look like this:

window.dataLayer = window.dataLayer || []
window.dataLayer.push({
  event: 'chat',
  category: 'seamly',
  action: 'XXX',
  label: 'XXX',
})

Decide what the category/action/label for each event to track should be. for instance:
```
{
  category: 'seamly',
  action: 'window_state',
  label: 'open'
}
```

In the Events description below you'll find the defaults we use for these.

Events

This is the standard set of Seamly Web UI events that is usually tracked in the chosen analytics.

Open/Close chat window

This happens whenever the visibility of the chat UI changes. Will not be triggered when layoutMode is inline.

{
  category: "seamly",
  action: "window_state",
  label: "open" // or "minimized" or "hidden"
}

The label for this event is one of:

open - The chat window has been opened
minimized - The chat window has been minimized (chat button is visible)
hidden - The chat window and button are completely hidden

Click/focus on text entry

Triggered when the user clicks or focusses the chat text input field.

{
  category: "seamly",
  action: "input_click",
  label: ""
}

The label is always be empty.

First user response

Tracks any first input the user gives. This will only fire once per conversation and will return what the action was.

The label for these events always includes the textual representation of the user input. The action can be one of:

first_user_response:message if the user entered a text message
first_user_response:faqclick if the user clicked on a faq
first_user_response:pick_choice if the user clicked a button of a choice prompt

{
  category: "seamly",
  action: "first_user_response:message",
  label: "... user input" // Message by user
}

{
  category: "seamly",
  action: "first_user_response:faqclick",
  label: "... text of faq question"
}

{
  category: "seamly",
  action: "first_user_response:pick_choice",
  label: "... text of choice"
}

User message

Tracks any textual input the user enters. This does not track choice clicks (see below for that).

Apart form tracking all message you can track the first message specifically.

The label for these events always includes the user input.

{
  category: "seamly",
  action: "message",
  label: "... user input" // Message by user
}

Choice click

Triggered when a choice option has been clicked/chosen.

{
  category: "seamly",
  action: "choice_click",
  label: "... choice" // The text of the option
}

The label for this event contains the text of the chosen option.

FAQ click

Triggered when a FAQ option has been clicked/chosen. Only applicable if FAQs are available/shown

{
  category: "seamly",
  action: "faq_click",
  label: "... faq" // The text of the FAQ
}

The label for this event contains the text of the chosen FAQ.

Link click

Triggered when a user clicks/uses a link in a chat message.

{
  category: "seamly",
  action: "link_click",
  label: "... url" // This is the URL of the clicked link
}

CTA click

Triggered when a user clicks/uses a link in a chat message.

{
  category: "seamly",
  action: "cta_click",
  label: "... url" // This is the URL of the clicked CTA
}

Service transfer

Triggered when a user is being transferred to another service.

{
  category: "seamly",
  action: "transfer_to",
  label: "... service name" // Name of the service
}

The label contains the name of the service the user has switched to.

Technical implementation

The listed events can be passed to your analytics suite by using the correct Window API on events. See the Window API events documentation for more information on the used events.

For example:

window.seamly.push({
  action: 'on',
  args: [
    'ui.visible', // Replace with appropriate event name
    function(visibilityState) {
      // Handle the event and track it in you analytics suite.
      window.dataLayer.push({
        event: 'chat',
        category: 'seamly',
        action: 'window_state',
        label: visibilityState,
      })
    }
  ]
})

Some of these events will need extra state handling before sending the result to the analytics suite. The examples below describe where this is needed.

Open/Close chat window

Track using the ui.visible Window API event.

Click/focus on text entry

Track using the ui.inputFocus Window API event.

First user response

Track using the system.userFirstResponse Window API event.

window.dataLayer = window.dataLayer || []

// Code below is ES2020 may need transpilation
window.seamly.push({
  action: 'on',
  args: [
    'system.userFirstResponse',
    function (event) {
       window.dataLayer.push({
          event: 'chat',
          category: 'seamly',
          action: 'first_user_response:' + event.responseType,
          label: event.text,
       })
    }
  ],
})

User Message

Track using the message Window API event, filtering on event.body.text && event.body.fromClient == true.

window.dataLayer = window.dataLayer || []

window.seamly.push({
  action: 'on',
  args: [
    'message',
    function (event) {
       if (!event.fromClient || !event.body.text) {
          return
       }
       window.dataLayer.push({
          event: 'chat',
          category: 'seamly',
          action: 'message',
          label: event.body.text,
       })
    }
  ],
})

Choice click

Track using the action.pick_choice Window API event.

FAQ click

Track using the action.custom Window API event and checking for event.body.type == 'faqclick'.

Link click

Track using the action.navigate Window API event.

CTA click

Track using the action.click_cta Window API event.

Service transfer

Track using the system.serviceChanged Window API event.