Tracking Events
Tracking methods
- Pre-configured GTM
- Data layer
- Custom integration
We recommend to use Google Tag Manager to access our tracking events.
The easiest way to access the Calls Widget tracking events is to download our complete GTM recipe
, then import it to your GTM and change the GA4 Measurement ID
variable to your Google Analytics measurement id.
That is all you need to do in order to get all events sent into your own Google Analytics 4 property.
For further instructions, see our guide to setup Google Tag Manager and Google Analytics 4 tracking
If you are not using Google Analytics 4 but instead the older Universal Analytics (UA) with the enhanced ecommerce events, you can create a tag in your google tag manager that maps these events to the structure with required fields according to the old specification. Learn more about the compatibility here or on this blog
-
dataLayer
array is availableEnsure that you have the data layer included in the landing page that you have the Calls Widget embedded in.
window.dataLayer = window.dataLayer || [];
All event names and parameters are scoped with bmb_oto
when we expose it to the dataLayer. For example the joined_queue
event will look like the following
{
event: "bmb_oto_joined_queue",
"bmb_oto.servingAgents": 1, // Number of agents serving the queue
"bmb_oto.queuePlace": 2, // The clients place in the queue, second in line in this example
"bmb_oto.queueId": "QUEUE_ID" // The id of the queue
}
For other analytics and tagging tools such as Adobe Launch/DTM, Tealium, etc., that have other namings for the data layer object,
you need to implement a bridge from the GTM specific dataLayer
to the relevant data layer object to your tracking tool.
You can do so either by starting to import our Google Tag Manager recipes and then remove the Google Analytics tag and replace that with your custom analytics tag and re-use our pre-defined data layer variables.
If you are only using this method and do not want to expose the events and variables to Google Tag Managers data layer you can deactivate the sending of events by simply providing the option { dataLayerTracking: false, ecommerceTracking: false }
when initializing the embed instance.
It is possible to directly listen to our events in your Javascript integration layer and react to them in any way you want. Maybe you want to open some other popup by the end of a call? Or send tracking points directly to some other analytics service and not go through Google Tag Managers data layer?
All our events below are available if you setup an event listener on the embed instance listening to tracking-event
like the following
oneToOneEmbed.on('tracking-event', (payload) => {
if (!!payload.eventName) {
// Bambuser specific events
console.log(payload.eventName);
console.log(payload.eventData);
} else if (!!payload.event) {
// GA4 E-commerce event
console.log(payload.event);
console.log(payload.ecommerce);
}
});
With that piece of code you would log every tracking event to console. A full example of joined_queue
would look like the following
{
eventName: 'joined_queue',
eventData: {
servingAgents: 1,
queuePlacement: 2,
queueId: "w98fu3-2938rijsd-w8eijsds-823jd"
}
}
Bambuser specific events
call_widget_opened
Emitted when one-to-one widget is opened (a.k.a popup, overlay), either automatically or from customer interaction
{
eventName: 'call_widget_opened'
}
joined_queue
Emitted when a client joined a queue.
{
eventName: 'joined_queue',
eventData: {
currentServingAgents: 1, // Number of agents serving the queue
currentQueuePlacement: 2, // The clients place in the queue, second in line in this example
currentQueueId: "QUEUE_ID", // The id of the queue
currentTicketId: "TICKET_ID", // All customers get a ticket id for every time they enter a queue
}
}
left_queue
Emitted when a client leaved a queue.
{
eventName: 'left_queue',
eventData: {
servingAgents: 1, // Number of agents serving the queue
queuePlacement: 2, // The clients place in the queue, second in line in this example
queueId: "QUEUE_ID", // The id of the queue
ticketId: "TICKET_ID", // All customers get a ticket id for every time they enter a queue
}
}
call_started
Emitted when a call is established between an agent and a client. Video/audio is setup after this event has been fired.
{
eventName: 'call_started',
eventData: {
callId: "GUID", // the call session id
agentId: "AGENT_ID", // id of the agent that picked up the call
}
}
call_transferred
Emitted when the call is transferred.
{
eventName: 'call_transferred',
eventData: {
callId: "GUID", // the call session id
agentId: "AGENT_ID", // id of the new agent that call was transferred to
}
}
call_ended
Emitted when the call is ended in some way. E.g. a hang up or a disconnect occurred.
{
eventName: 'call_ended',
eventData: {
callId: "GUID", // the call session id
}
}
call_widget_closed
Emitted when the user clicks the "x" to close the one-to-one widget, a.k.a overlay, popup.
{
eventName: 'call_widget_closed'
}
product_impression
Emitted when a product is visible to the client. There are two types of impressions. Impressions of type "highlight" is when products are added to the screen in a smaller format or a notification is made to the client that the product is available to view. The "focused" impression is sent when the agent or client interacts with the application so that the client sees only one product in a larger format.
{
eventName: 'product_impression',
eventData: {
ref: {type: 'sku', value: 'PROD123'}, // The type will always be 'sku' in standard integrations
brand: 'Example brand',
name: 'My product 1',
price: { current: 199, original: 299, currency: 'EUR' },
type: 'highlight'|'focused',
}
}
entered_contact_information
Emitted when a client enters their contact information into the a form before or during a call. This event can happen multiple times during a call if they change their information and save again.
{
eventName: 'entered_contact_information',
eventData: {
firstName: 'Jane',
lastName: 'Doe',
countryCode: 'US',
dialCode: '+1',
phone: '5555551234',
email: 'jane.doe@example.com',
locale: 'en-US',
message: 'Took too long time for you to answer. Please get back to me'
}
}
nps_feedback
Emitted when a client submits their answer to the NPS score, 0-10 after a call. The scale indicates that 10 is the highest possible rating, and the rating is the number they picked.
{
eventName: 'nps_feedback',
eventData: {
rating: 8,
scale: 10
}
}
thumbs_feedback
Emitted when a client submits their answer to the thumbs up / thumbs down after a call. The scale indicates that 2 is the highest possible rating (thumbs up), and thumbs down would be represented by a rating of 1.
{
eventName: 'thumbs_feedback',
eventData: {
rating: 1,
scale: 2,
}
}
free_text_feedback
Emitted when a client submits their free text feedback after a call.
{
eventName: 'free_text_feedback',
eventData: {
freeText: 'I loved this service!',
}
}
book_meeting_click
Emitted when a client clicks the appointment CTA in the Calls Widget. Type returned will differ depending on chosen button behavior. See values listed below.
iframe
redirect
tab
{
eventName: 'book_meeting_click',
eventData: {
type: 'redirect',
url: 'https://bambuser.com/docs'
},
}
booking_selected_time_slot
Emitted when the client selects a time slot in the booking screen of Bambuser's native bookings.
{
eventName: 'booking_selected_time_slot',
eventData: {
selectedTimeSlot: {
startDateTime: '2023-10-05T02:15:00+02:00',
endDateTime: '2023-10-05T02:15:30+02:00'
},
selectedTimeZone: 'Europe/Stockholm'
},
}
booking_completed
Emitted when the booking has been completed and the client see the confirmation screen.
{
eventName: 'booking_completed',
eventData: {
bookingId: 'abc123'
}
}
booking_rescheduled
Emitted when a booking has been successfully rescheduled.
{
eventName: 'booking_rescheduled',
eventData: {
bookingId: 'abc123'
}
}
booking_canceled
Emitted when a booking has been canceled.
{
eventName: 'booking_canceled',
eventData: {
bookingId: 'abc123'
}
}
GA4 E-commerce events
The Calls Widget emits additional trackng events that follows the the standard of GA 4 Ecommerce events
view_item
{
event: 'view_item',
ecommerce: {
affiliation: "Bambuser Calls {orgId}",
items: [{
item_id: "SKU_1234", // the sku / product id provided during Product Hydration
item_name: "T-shirt",
item_brand: "Item brand",
item_list_id: "bmb_oto_focused" / "bmb_oto_highlight", // Highligt is a small view, focused is a detailed view
affiliation: "Bambuser Calls {orgId}",
price: 100,
currency: 'EUR',
discount: 12,
index: 1,
quantity: 1
}]
}
}
add_to_cart
{
event: 'add_to_cart',
ecommerce: {
affiliation: "Bambuser Calls {orgId}",
items: [{
item_id: "SKU_1234", // the sku / product id provided during Product Hydration
item_name: "T-shirt",
item_brand: "Item brand",
item_list_id: "bmb_oto_call_products",
affiliation: "Bambuser Calls {orgId}",
price: 100,
currency: 'EUR',
discount: 12,
index: 1,
quantity: 1
}]
}
}
remove_from_cart
{
event: 'remove_from_cart',
ecommerce: {
affiliation: "Bambuser Calls {orgId}",
items: [{
item_id: "SKU_1234", // the sku / product id provided during Product Hydration
item_name: "T-shirt",
item_brand: "Item brand",
item_list_id: "bmb_oto_call_products",
affiliation: "Bambuser Calls {orgId}",
price: 100,
currency: 'EUR',
discount: 12,
index: 1,
quantity: 1
}]
}
}
begin_checkout
{
event: 'begin_checkout',
ecommerce: {
affiliation: "Bambuser Calls {orgId}",
items: [{
item_id: "SKU_1234", // the sku / product id provided during Product Hydration
item_name: "T-shirt",
item_brand: "Item brand",
item_list_id: "bmb_oto_call_products",
affiliation: "Bambuser Calls {orgId}",
quantity: 1
}]
}
}