Customizing Web Widget events tracking to third-party analytics services

The Web Widget (Classic) automatically reports all user interactions in the widget to Google Analytics if the tracker is on the same web page. However, the on userEvent API command can be used to customize the integration of the widget with Google Analytics. It can also report widget user events to other third-party analytics services such as Segment.io and Adobe Analytics. This article provides a few examples on implementing this command.

This article contains the following sections:

• Filtering widget events for Google Analytics
• Configuring widget events reporting with multiple Google Analytics trackers

Related information:

• Setting up and using Google Analytics for the Web Widget
• on userEvent API command
• Quickstart – Web Widget JavaScript APIs

Filtering widget events for Google Analytics

The on userEvent API command can be added on your web page to filter events reported to Google Analytics.

In the following example:

• The analytics API setting is added first and set to false to disable user events automatically being tracked in Google Analytics
• In the on userEvent command, the event actions “Chat Served by Operator” and “Chat Comment Submitted” are only tracked in Google Analytics
• The GA send command sends the event payload

<script type="text/javascript"> window.zESettings = {
  analytics: false
};
var EVENTS_TO_SEND = ['Chat Served by Operator', 'Chat Comment Submitted'];
zE('webWidget:on', 'userEvent', function (event) {
  if (event.action === event.action.indexOf(EVENTS_TO_SEND) < 0) return;

  var payload = {
    hitType: 'event',
    eventCategory: event.category,
    eventAction: event.action,
    eventLabel: event.properties
  };
  window.ga('send', payload)
}) </script>

To understand the command syntax for sending events, refer to the Google Analytics documentation.

Configuring widget events reporting with multiple Google Analytics trackers

There are instances where multiple trackers are operating on a web page to send data to different properties in Google Analytics. For example, a default unnamed tracker and two other trackers named “Tracker1” and “Tracker2”:

ga('create', 'UA-XXXXX-X', 'auto');
ga('create', 'UA-XXXXX-Y', 'auto', 'Tracker1');
ga('create', 'UA-XXXXX-Z', 'auto', 'Tracker2');

By default, the widget sends event data to all trackers on the page. To send events to a named tracker, modify your web page with the analytics API setting, the on userEvent command, and the GA send command with the tracker name.

For example:

<script type="text/javascript"> window.zESettings = {
 analytics: false
};
zE('webWidget:on', 'userEvent', function (_ref) {
  var category = _ref.category;
  var action = _ref.action;
  var properties = _ref.properties;

  var payload = {
    hitType: 'event',
    eventCategory: event.category,
    eventAction: event.action,
    eventLabel: event.properties
  };

 ga('Tracker1.send', payload);
}); </script>

In the example:

• The analytics API setting is set to “false” to prevent all widget events being automatically sent to Google Analytics
• The onUserEvent command specifies the events to be sent
• The Google Analytics send command specifies events to be sent to the GA tracker named “Tracker1”