Google Analytics

Built-in GA4 integration that automatically sends video engagement events — play, pause, complete, milestone progress, fullscreen, and CTA clicks.

Source code

<link rel="stylesheet" href="https://cdn.impossible.io/fxplayer/v3/fxplayer.css" />
<script src="https://cdn.impossible.io/fxplayer/v3/fxplayer.js"></script>

<div id="player" style="width: 720px; aspect-ratio: 16/9;"></div>

<script>
  // Option 1: Let FXPlayer inject the GA4 script automatically
  const player = new fxplayer.FXPlayer('player', {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    controls: true,
    analytics: {
      measurementId: 'G-XXXXXXXXXX',  // Your GA4 measurement ID
    },
  });

  // Option 2: Use an existing gtag() — if gtag is already on the
  // page, FXPlayer detects it and skips script injection.
  // Just omit measurementId:
  //   analytics: {}

  // Option 3: Customize which events and milestones to track
  const player2 = new fxplayer.FXPlayer('player', {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    controls: true,
    analytics: {
      measurementId: 'G-XXXXXXXXXX',
      events: ['play', 'pause', 'ended', 'fullscreenchange', 'cta:click'],
      milestones: [25, 50, 75, 100],  // percentage thresholds
      category: 'video',              // event_category value
      label: 'homepage-hero',         // event_label value
    },
  });
</script>

Events sent to GA4

GA4 Event	Trigger	Parameters
video_play	Video starts playing	event_category
video_pause	Video is paused	video_current_time
video_complete	Video reaches the end	video_duration
video_milestone	Playback crosses 25/50/75/100%	milestone_percent, video_duration
video_fullscreen	Fullscreen toggled	fullscreen (boolean)
video_cta_click	CTA overlay clicked	cta_id

Options

Option	Type	Default	Description
measurementId	string	—	GA4 measurement ID (G-XXXXXXXXXX). If omitted, FXPlayer uses an existing gtag() on the page.
events	string[]	['play', 'pause', 'ended', 'fullscreenchange', 'cta:click']	Which player events to track.
milestones	number[]	[25, 50, 75, 100]	Percentage thresholds for milestone events. Set to [] to disable.
category	string	'video'	Value sent as event_category.
label	string	—	Optional event_label to identify the video.