Troubleshooting Google Analytics Events in the Miniplayer

The Problem: My Google Analytics events are missing when usinf Miniplayer

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 player, then Minimizes it and starts navigating your site, 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: Your Page vs. The Player's 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 triggered and entered the Bambuser player. 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 Surf Behind iframe (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 and act like a separate browser tab. It has its own separate window object and its own separate dataLayer.

All the GA events that happen while having the player minimized 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 when using Miniplayer

Your main starting 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/Miniplayer navigation <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 Miniplayer 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 Live Shopping player, the iframe is contained within a div element whose id starts with livecommerce-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^=livecommerce-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>.