Integration with Google Tag Manager

This document outlines how to track events from Gumlet Player.js and push them to Google Tag Manager (GTM) using the dataLayer.

Prerequisites

Google Tag Manager is properly set up on your website.
Gumlet Player.js is integrated with a video player on your page.

Basic Setup

Include this GTM dataLayer snippet before any tracking:

<script>
  window.dataLayer = window.dataLayer || [];
</script>

Sample Events

<script>
  const player = new GumletPlayer('#gumlet-player');

  // Event: Video Play
  player.on('play', () => {
    dataLayer.push({
      event: 'video_played',
      video_title: player.videoTitle,
      current_time: player.currentTime()
    });
  });

  // Event: Pause
  player.on('pause', () => {
    dataLayer.push({
      event: 'video_paused',
      video_title: player.videoTitle,
      current_time: player.currentTime()
    });
  });

  // Event: Video Ended
  player.on('ended', () => {
    dataLayer.push({
      event: 'video_completed',
      video_title: player.videoTitle
    });
  });

  // Event: Video Started (first play)
  player.on('loadedmetadata', () => {
    dataLayer.push({
      event: 'video_started',
      video_title: player.videoTitle,
      duration: player.duration()
    });
  });

  // Event: Seeked
  player.on('seeked', () => {
    dataLayer.push({
      event: 'video_seeked',
      video_title: player.videoTitle,
      current_time: player.currentTime()
    });
  });
</script>

Learn more about the possible events here - https://github.com/gumlet/player.js?tab=readme-ov-file#methods