Troubleshooting Google Analytics Events in the Miniplayer

The Problem: My Google Analytics events are missing when using CoBrowsing feature

You're testing your Google Analytics (GA) integration with the Bambuser Miniplayer (also known as the Floating Player). A user (or you, while testing) opens the miniplayer, navigates your site inside the CoBrowsing window, adds a product to the cart, and completes a purchase.

However, when you check the dataLayer object in your browser's developer console, you can't find the GA events you expect, like page_view, add_to_cart, or purchase.

This is expected behavior, and this guide will explain why it happens and how to solve it.

Why This Happens: Starting page vs. CoBrowsing iFrame

The issue is about browser "contexts". The Miniplayer loads your website inside an <iframe>, which creates a separate, browsing environment on your page.

• Your Entry Page (The top context): This is your website page where it first loads the Bambuser Calls Widget. It has its own window object and its own dataLayer. When you open your browser's developer console, it defaults to this context.
• The Miniplayer (The iframe context): When the Miniplayer is active, it loads your website's pages (like product pages and checkout) inside an <iframe>. This <iframe> is like a window-within-a-window. It has its own separate window object and its own separate dataLayer.

All the GA events that happen while CoBrowsing/using the Miniplayer are pushed to the dataLayer that belongs to the <iframe>, not the dataLayer of your main starting page. Your console is simply looking at the wrong one by default.

Visualizing the Contexts

Your main entry page (top context) contains the Miniplayer, which is an iframe with its own, separate context and dataLayer.
Any GA event performed by the user will be pushed to the dataLayer within iframe context.

How to View the Correct dataLayer in Chrome

To see the GA events from the Miniplayer, you need to switch the "JavaScript context" of your browser's developer console to the surfBehind/CoBrowsing <iframe>.

Step-by-step Instructions:

1. With the Miniplayer active on your site, open Chrome DevTools (Right-click -> Inspect or press F12 / Cmd+Opt+I).
2. Go to the Console tab.
3. Look for the dropdown menu at the top of the console, which usually says top. This is the JavaScript context selector.
4. Click the top dropdown. You'll see a list of all active contexts on your page.
5. Select the <iframe> context that corresponds to page where user is surfing in. It will typically show your own site's domain, as it's loading your store.
6. Once selected, the console is now connected to the <iframe>.
7. Type dataLayer into the console and press Enter.

The Result

You will now see the dataLayer array for the <iframe>, populated with all the page_view, add_to_cart, and purchase events that occurred within the CoBrowsing navigation iframe.

Accessing the iFrame Window from the Top Context

If you need to programmatically access the window object of the iframe from your main entry page's JavaScript, you can do so by selecting the iframe element and accessing its contentWindow property.

For the Video Consultation player, the iframe is contained within a div element with the id one-to-one-surf. You can use a query selector to find it:

TOP context

// Get the window object of the iframe where user surfing the site
const surfIframeWindow = document.querySelector("div[id=one-to-one-surf]>iframe").contentWindow;

// Now you can access the iframe's window object
console.log(surfIframeWindow.location.href);

Summary

If you're testing GA events with the Miniplayer and the dataLayer seems empty, your first step is always to check the JavaScript context dropdown in your console and switch from top to the correct <iframe>.