Customizing Web Widget events tracking to third-party analytics services
The Web Widget (Classic) automatically reports alluser interactions in the widgetto Google Analytics if the tracker is on the same web page. However, theon 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
Theon 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
<scripttype="text/javascript">window.zESettings={
analytics:false
};
varEVENTS_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;
varpayload={
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 theGoogle Analytics documentation.
Configuring widget events reporting with multiple Google Analytics trackers
There are instances wheremultiple trackersare 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 theanalytics
API setting, theon userEvent
command, and the GAsend
command with the tracker name.
For example:
<scripttype="text/javascript">window.zESettings={
analytics:false
};
zE('webWidget:on','userEvent',function(_ref){
varcategory=_ref.category;
varaction=_ref.action;
varproperties=_ref.properties;
varpayload={
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”