GA4 and Google Tag Manager Integration

Complete guide to measuring the impact of audio listening on your conversion rate.

Objective

By the end of this guide you will have a complete measurement pipeline: Ekoo widget events are captured by your callback, pushed to the dataLayer, intercepted by GTM, then sent to GA4. You will be able to compare the conversion rate of visitors who listened to audio against those who did not.

Pipeline Overview

1Widget Ekoo → onEkooEvent() → dataLayer.push() → GTM Trigger → GA4 Event Tag → GA4 Reports

Each link in this chain is detailed below. Follow the steps in order for a seamless integration.

Step 1 — Configure the Widget to Send Events to the dataLayer

Place the Ekoo widget on your page, define a callback function, then load the script. The function pushes each event into the dataLayer with a GA4-compatible name (underscores, prefixed with ekoo_).

1<ekoo-widget
2  data-ekoo="YOUR_WEBSITE_ID"
3  data-ekoo-product-id="YOUR_PRODUCT_ID"
4  data-ekoo-locale="fr"
5  data-ekoo-on-event="onEkooEvent"
6></ekoo-widget>
7
8<script>
9  function onEkooEvent(data) {
10    window.dataLayer = window.dataLayer || [];
11
12    // Push all Ekoo events to dataLayer
13    window.dataLayer.push({
14      event: 'ekoo_' + data.stats.type.replace('-', '_'),
15      ekoo_event_type: data.stats.type,
16      ekoo_widget_type: data.stats.widget,
17      ekoo_review_id: data.audioId,
18      ekoo_product_id: data.productRef,
19      ekoo_source: data.source
20    });
21  }
22</script>
23
24<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

When a visitor starts playback, the ekoo_played_0 event is pushed to the dataLayer. This is the event that will allow you to segment your audiences in GA4 and measure the impact of audio listening on conversion.

Step 2 — Configure Google Tag Manager

2.1 Create Data Layer Variables

Data Layer Variables allow GTM to read the properties pushed by your callback. Create one variable for each property you want to use in your tags.

1. In GTM, go to Variables > User-Defined Variables > New
2. Choose the type Data Layer Variable
3. In Data Layer Variable Name, enter: ekoo_event_type
4. Name the variable DLV - ekoo_event_type and save
5. Repeat for each property:

2.2 Create a Trigger for Ekoo Events

The trigger tells GTM when to fire your GA4 tag. You can create one trigger per event, or a single catch-all trigger using a regular expression.

Option A — One trigger per event:

1. Go to Triggers > New
2. Type: Custom Event
3. Event name: ekoo_played_0
4. Name the trigger Trigger - Ekoo Played 0
5. Save

Option B — A single regex trigger (recommended):

1. Go to Triggers > New
2. Type: Custom Event
3. Event name: ekoo_.* and check Use regex matching
4. Name the trigger Trigger - Ekoo All Events
5. Save

2.3 Create a GA4 Event Tag

This tag sends Ekoo events to your GA4 property.

1. Go to Tags > New
2. Tag type: Google Analytics: GA4 Event
3. Measurement ID: your G-XXXXXXXXXX
4. Event name: {{DLV - ekoo_event_type}} (dynamic mapping) or a fixed name such as ekoo_audio_play
5. Add the event parameters:

6. Under Triggering, select the trigger created in the previous step
7. Save the tag

2.4 Test in GTM Preview

Before publishing, validate the integration using GTM Preview mode:

1. Click Preview in the top-right corner of GTM
2. Enter your site URL and click Connect
3. Navigate to a page containing the Ekoo widget
4. Interact with the widget (start audio playback)
5. In the GTM Debug panel, verify that your ekoo_* events appear in the timeline
6. Click on the event, then on your GA4 tag to verify that the variables are correctly passed

Step 3 — Leverage Data in GA4

3.1 Verify Event Reception

1. Realtime: go to GA4 > Reports > Realtime. The ekoo_* events should appear within seconds after interacting with the widget.
2. Event list: go to GA4 > Configure > Events. ekoo_played_0 should appear within 24 to 48 hours.

3.2 Mark as Key Event (Conversion)

If audio listening is a key indicator for your business, mark the event as a conversion:

1. Go to GA4 > Configure > Events
2. Find ekoo_played_0 in the list
3. Enable the Mark as key event toggle on the right

The event will now appear in GA4 conversion reports and can be used as a goal in your advertising campaigns.

3.3 Create a Comparative Conversion Analysis

Goal: compare the conversion rate between visitors who listened to audio and those who did not, to demonstrate the business impact of audio.

1. Go to GA4 > Explore > New Exploration
2. Create Segment 1 — "With audio listening": include users who triggered the event ekoo_played_0
3. Create Segment 2 — "Without audio listening": exclude users who triggered the event ekoo_played_0
4. Under Dimensions, add: Event name
5. Under Metrics, add: Conversions, User conversion rate
6. Apply both segments to the report
7. Compare the columns: the difference in conversion rate between the two segments reveals the impact of audio listening

Recommended Event Mapping

Common Pitfalls

1. Hyphens in GA4 event names — GA4 does not allow hyphens in event names. Always use data.stats.type.replace('-', '_') to convert them.
2. Forgetting to initialize the dataLayer — if window.dataLayer does not exist at the time of the push(), the event is silently lost.
3. Callback defined after the script — the onEkooEvent function must be declared before loading the widget-4.0.0-standalone.js script.
4. Mismatched function name — the value of data-ekoo-on-event must exactly match the name of your global function (case-sensitive).
5. GTM Preview not enabled — unpublished tags do not fire without Preview mode. Always enable it before testing.
6. Events missing in GA4 — data only appears in Configure > Events after 24 to 48 hours. Use Reports > Realtime to verify immediately.

Complete Recap Example

Below is the full code to place on your page for a working GA4 integration via GTM. Copy-paste this block and replace the uppercase values with your own.

1<!-- 1. Ekoo Widget -->
2<ekoo-widget
3  data-ekoo="YOUR_WEBSITE_ID"
4  data-ekoo-product-id="YOUR_PRODUCT_ID"
5  data-ekoo-locale="fr"
6  data-ekoo-on-event="onEkooEvent"
7></ekoo-widget>
8
9<!-- 2. Callback — BEFORE the Ekoo script -->
10<script>
11  function onEkooEvent(data) {
12    window.dataLayer = window.dataLayer || [];
13
14    // Push the event with a GA4-compatible name
15    window.dataLayer.push({
16      event: 'ekoo_' + data.stats.type.replace('-', '_'),
17      ekoo_event_type: data.stats.type,
18      ekoo_widget_type: data.stats.widget,
19      ekoo_review_id: data.audioId,
20      ekoo_product_id: data.productRef,
21      ekoo_source: data.source
22    });
23  }
24</script>
25
26<!-- 3. Ekoo Script -->
27<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>