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>

NPAW Integration

We provide an official NPAW adapter package @glomex/integration-npaw that makes it easy to integrate NPAW analytics with the Glomex player.

To get started with NPAW:

Install the package:


npm install @glomex/integration-npaw

Import and set up the NPAW integration:


import { setupNpaw } from '@glomex/integration-npaw';
 
const npawPlugin = setupNpaw({
  accountCode: 'YOUR_NPAW_ACCOUNT_CODE',
  options: {
    // NPAW configuration options
    username: 'YOUR_USERNAME'
  }
});
 
// Configure analytics options if needed
npawPlugin.setAnalyticsOptions({
  // Additional options
});
 
// Clean up when done
npawPlugin.destroy();

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());
});