Analytics Integration

The glomex player provides comprehensive analytics capabilities. You can:

Integrate with Google Analytics
Connect with NPAW using our official adapter
Track custom events for your own analytics solution

Custom Analytics Integration

You can use your own analytics solution to track player events. Here’s how to integrate with popular analytics providers:

Google Analytics Integration

To integrate with Google Analytics (GA4), first include the Google Analytics script and then listen to player events:


<!-- Include Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-MEASUREMENT-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-YOUR-MEASUREMENT-ID');
</script>
 
<!-- Add glomex Player -->
<glomex-integration
  integration-id="YOUR_INTEGRATION_ID"
  playlist-id="YOUR_PLAYLIST_ID">
</glomex-integration>
 
<!-- Track Events -->
<script>
  const player = document.querySelector('glomex-integration');
 
  // Track content start with data from player state
  player.addEventListener('contentstart', () => {
    gtag('event', 'content_start', {
      content_id: player.content.id,
      content_title: player.content.title,
      duration: player.content.duration,
      playlist_id: player.content.playlistId
    });
  });
 
  // Track content impression
  player.addEventListener('contentimpression', () => {
    gtag('event', 'content_impression', {
      content_id: player.content.id,
      content_type: 'video',
      playlist_position: player.index
    });
  });
 
  // Track ad impression
  player.addEventListener('adimpression', () => {
    gtag('event', 'ad_impression', {
      ad: player.currentAd(),
      content_id: player.content.id  // Track which content the ad is shown with
    });
  });
</script>

Analytics Adapter Integrations

The @turbo-player/integration-analytics package provides ready-made adapters for four analytics providers:

NPAW/Youbora — @turbo-player/integration-analytics/npaw
Comscore — @turbo-player/integration-analytics/comscore
Nielsen — @turbo-player/integration-analytics/nielsen
Sensic (GfK) — @turbo-player/integration-analytics/sensic

Install the package and import the adapter you need:


npm install @turbo-player/integration-analytics

Refer to the npm package page for configuration details and usage examples for each adapter.

Available Events

You can track any of the following events from the glomex player’s IntegrationElementEventMap . For more details about the player’s state attributes and methods see the IntegrationElement API documentation .

Example of listening to events and accessing player state:


const player = document.querySelector('glomex-integration');
 
// Content start
player.addEventListener('contentstart', () => {
  console.log('Content started:', {
    id: player.content.id,
    title: player.content.title,
    duration: player.content.duration
  });
});
 
// Content impression
player.addEventListener('contentimpression', () => {
  console.log('Content impression:', {
    id: player.content.id,
    playlistPosition: player.index
  });
});
 
// Ad impression
player.addEventListener('adimpression', () => {
  console.log('Ad impression:', player.currentAd());
});