Analytics Debugging

This guide walks you through diagnosing and resolving issues with Ekoo widget analytics tracking. Whether you use Google Analytics 4, Google Tag Manager, or another tool, the techniques below will help you verify that events are correctly emitted and transmitted.

Step 1: Verify that events fire

The first step is to confirm that the widget is emitting events. Add a console.log in your callback function:

1<script>
2  function onEkooEvent(data) {
3    console.log('%c[Ekoo Event]', 'color: #7c3aed; font-weight: bold;', data.stats.type);
4    console.log('  Product:', data.productRef);
5    console.log('  Review:', data.audioId);
6    console.log('  Reached:', data.stats.reached || 'N/A');
7    console.log('  Full data:', data);
8  }
9</script>
10
11<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>
12
13<ekoo-widget
14  data-ekoo="YOUR_WEBSITE_ID"
15  data-ekoo-product-id="YOUR_PRODUCT_ID"
16  data-ekoo-on-event="onEkooEvent"
17></ekoo-widget>

Open the browser console (F12 → Console tab), then interact with the widget. You should see events appear in purple:

• printed — As soon as the widget is visible.
• played-0 — When the play button is clicked.
• played-25, played-50, played-75, played-100 — As the audio progresses.

Step 2: Inspect the dataLayer

If you use GTM, events must be pushed to window.dataLayer. Check its contents directly in the console:

1// View the full dataLayer
2console.table(window.dataLayer);
3
4// Filter Ekoo events only
5const ekooEvents = (window.dataLayer || [])
6  .filter(entry => entry.event && entry.event.startsWith('ekoo_'));
7
8console.log('Ekoo events found:', ekooEvents.length);
9ekooEvents.forEach((evt, i) => {
10  console.log(`  [${i}] ${evt.event}`, evt);
11});

Expected result: You should see entries like ekoo_printed, ekoo_played-0, etc.

1// Watch new pushes in real time
2const originalPush = window.dataLayer.push.bind(window.dataLayer);
3window.dataLayer.push = function(...args) {
4  args.forEach(arg => {
5    if (arg.event && arg.event.startsWith('ekoo_')) {
6      console.log('%c[dataLayer]', 'color: #059669; font-weight: bold;', arg.event, arg);
7    }
8  });
9  return originalPush(...args);
10};
11console.log('dataLayer monitoring enabled.');

Step 3: GTM Preview Mode

GTM Preview mode displays tags, triggers, and variables in real time:

• 1. Open tagmanager.google.com and select your container.
• 2. Click Preview in the top right. The Tag Assistant tool opens.
• 3. Enter your product page URL and click Connect.
• 4. Your page opens in a new tab with the GTM debug panel.
• 5. Interact with the Ekoo widget (display it, play an audio).
• 6. In the GTM panel, check the Timeline: each event appears as a row.
• 7. Click on an ekoo_* event to see:
  • Tags Fired — Which tags were triggered.
  • Variables — Variable values at the time of the event.
  • Data Layer — The dataLayer state at that moment.

Step 4: GA4 DebugView

GA4 DebugView displays events in real time for debug sessions:

• 1. Install the Google Analytics Debugger Chrome extension from the Chrome Web Store.
• 2. Enable the extension (the icon becomes colored).
• 3. In GA4, go to Admin → DebugView (in the left column).
• 4. Navigate to your product page and interact with the widget.
• 5. Events appear in real time in the vertical stream.
• 6. Click on an event to view its detailed parameters.

Verify: that the event names match what you expect (e.g., ekoo_played_0 vs ekoo_played-0 — GA4 converts hyphens to underscores).

Common issues and solutions

Function name does not match

The value of data-ekoo-on-event must be the exact name of a function declared globally on window:

1// Check in the console:
2typeof window.onEkooEvent
3// Should return "function"
4
5// If "undefined", the function is not globally accessible.
6// Possible causes:
7// - Declared inside a module (import/export)
8// - Declared inside an IIFE or a block {}
9// - Typo in the name

Function declared after the Ekoo script

The Ekoo script with defer executes after HTML parsing but before DOMContentLoaded. If your function is in a dynamically loaded script or a module, it may not be available in time.

1<!-- ✅ Declare the function BEFORE the Ekoo script -->
2<script>
3  // Function immediately accessible on window
4  function onEkooEvent(data) {
5    window.dataLayer = window.dataLayer || [];
6    window.dataLayer.push({
7      event: 'ekoo_' + data.stats.type.replace('-', '_'),
8      ekoo: data
9    });
10  }
11</script>
12
13<!-- The Ekoo script will find onEkooEvent on window -->
14<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

dataLayer not initialized

Calling window.dataLayer.push() before GTM has initialized it causes a silent error:

1// Always initialize before using
2window.dataLayer = window.dataLayer || [];
3
4// Then push safely
5window.dataLayer.push({
6  event: 'ekoo_printed',
7  ekoo_product_id: 'my-product'
8});

Diagnostic checklist

• ☐ The Ekoo script is loaded (typeof window.ekooLoad === 'function').
• ☐ The callback function exists on window (typeof window.onEkooEvent === 'function').
• ☐ The name in data-ekoo-on-event matches the function name exactly.
• ☐ The function is declared before the Ekoo script in the HTML.
• ☐ window.dataLayer is initialized before the first push.
• ☐ The widget is displayed (otherwise no printed event).
• ☐ Audio is started manually (no autoplay → no played-0 event).
• ☐ The GTM tag has a trigger configured for the corresponding custom event.
• ☐ GA4 DebugView is enabled (Chrome extension) to see events in real time.