Skip to main content

Teyuto Player Analytics SDK

Important

If you are using the Teyuto Player, you do not need to integrate this SDK. Analytics tracking is already built into the Teyuto Player.

Teyuto Player Analytics SDK enables easy integration of analytics tracking for video playback using various popular video players.

Installation​

Option 1: Script Tag​

Include the SDK in your HTML:

<script src="https://cdn.jsdelivr.net/gh/Teyuto/teyuto-player-analytics-sdk@production/src/TeyutoPlayerAnalytics.min.js"></script>

Option 2: As a Module​

Install via npm:

npm install teyuto-player-analytics

Supported Players​

Video.js​

As a Module​

import { TeyutoVideoJsAdapter } from 'teyuto-player-analytics';

const player = videojs('my-video');
const analytics = new TeyutoVideoJsAdapter('your-channel-public', 'user-token');
analytics.init(player, 'video-id');

// Clean up
window.addEventListener('beforeunload', () => {
  analytics.destroy();
  player.dispose();
});

Using Script Tag​

<script src="https://cdn.jsdelivr.net/gh/Teyuto/teyuto-player-analytics-sdk@production/src/TeyutoPlayerAnalytics.min.js"></script>
<script>
  const player = videojs('my-video');
  const analytics = new TeyutoPlayerAnalytics.TeyutoVideoJsAdapter('your-channel-public', 'user-token');
  analytics.init(player, 'video-id');

  // Clean up
  window.addEventListener('beforeunload', () => {
    analytics.destroy();
    player.dispose();
  });
</script>

HLS.js​

As a Module​

import { TeyutoHlsJsAdapter } from 'teyuto-player-analytics';

const video = document.getElementById('video');
const hls = new Hls();
hls.loadSource('https://example.com/video.m3u8');
hls.attachMedia(video);

const analytics = new TeyutoHlsJsAdapter('your-channel-public', 'user-token');
analytics.init(hls, 'video-id');

// Clean up
window.addEventListener('beforeunload', () => {
  analytics.destroy();
  hls.destroy();
});

Using Script Tag​

<script src="https://cdn.jsdelivr.net/gh/Teyuto/teyuto-player-analytics-sdk@production/src/TeyutoPlayerAnalytics.min.js"></script>
<script>
  const video = document.getElementById('video');
  const hls = new Hls();
  hls.loadSource('https://example.com/video.m3u8');
  hls.attachMedia(video);

  const analytics = new TeyutoPlayerAnalytics.TeyutoHlsJsAdapter('your-channel-public', 'user-token');
  analytics.init(hls, 'video-id');

  // Clean up
  window.addEventListener('beforeunload', () => {
    analytics.destroy();
    hls.destroy();
  });
</script>

Plyr​

As a Module​

import { TeyutoPlyrAdapter } from 'teyuto-player-analytics';

const player = new Plyr('#player');
const analytics = new TeyutoPlyrAdapter('your-channel-public', 'user-token');
analytics.init(player, 'video-id');

// Clean up
window.addEventListener('beforeunload', () => {
  analytics.destroy();
  player.destroy();
});

Using Script Tag​

<script src="https://cdn.jsdelivr.net/gh/Teyuto/teyuto-player-analytics-sdk@production/src/TeyutoPlayerAnalytics.min.js"></script>
<script>
  const player = new Plyr('#player');
  const analytics = new TeyutoPlayerAnalytics.TeyutoPlyrAdapter('your-channel-public', 'user-token');
  analytics.init(player, 'video-id');

  // Clean up
  window.addEventListener('beforeunload', () => {
    analytics.destroy();
    player.destroy();
  });
</script>

Shaka Player​

As a Module​

import { TeyutoShakaPlayerAdapter } from 'teyuto-player-analytics';

const video = document.getElementById('video');
const player = new shaka.Player(video);
const analytics = new TeyutoShakaPlayerAdapter('your-channel-public', 'user-token');
analytics.init(player, 'video-id');

// Clean up
window.addEventListener('beforeunload', () => {
  analytics.destroy();
  player.destroy();
});

Using Script Tag​

<script src="https://cdn.jsdelivr.net/gh/Teyuto/teyuto-player-analytics-sdk@production/src/TeyutoPlayerAnalytics.min.js"></script>
<script>
  const video = document.getElementById('video');
  const player = new shaka.Player(video);
  const analytics = new TeyutoPlayerAnalytics.TeyutoShakaPlayerAdapter('your-channel-public', 'user-token');
  analytics.init(player, 'video-id');

  // Clean up
  window.addEventListener('beforeunload', () => {
    analytics.destroy();
    player.destroy();
  });
</script>

Integrating in React​

This section demonstrates how to easily integrate the Teyuto Player Analytics SDK into a React project.

Installation

To install the Teyuto Player Analytics SDK in your React project, use npm:

npm install teyuto-player-analytics

React Component

Here's an example of how to integrate the SDK into a React component using Video.js:

import React, { useEffect, useRef } from 'react';
import videojs from 'video.js';
import { TeyutoVideoJsAdapter } from 'teyuto-player-analytics';

const VideoPlayer = ({ videoId }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);
  const analyticsRef = useRef(null);

  useEffect(() => {
    // Initialize Video.js
    if (!playerRef.current) {
      playerRef.current = videojs(videoRef.current, {
        // Video.js options
      });
    }

    // Initialize Teyuto Analytics
    if (!analyticsRef.current) {
      analyticsRef.current = new TeyutoVideoJsAdapter('your-channel-public', 'user-token');
      analyticsRef.current.init(playerRef.current, videoId);
    }

    // Cleanup
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
      }
      if (analyticsRef.current) {
        analyticsRef.current.destroy();
      }
    };
  }, [videoId]);

  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js" />
    </div>
  );
};

export default VideoPlayer;

In this example:

  1. We import TeyutoVideoJsAdapter from teyuto-player-analytics.
  2. We create refs for the video, player, and analytics adapter.
  3. In the effect hook, we initialize both Video.js and Teyuto Analytics.
  4. In the cleanup function, we dispose of both the player and the analytics adapter.

You can use this VideoPlayer component in your React app by passing the video ID:

import React from 'react';
import VideoPlayer from './VideoPlayer';

function App() {
  return (
    <div className="App">
      <h1>My Video Player</h1>
      <VideoPlayer videoId="your-video-id" />
    </div>
  );
}

export default App;

Remember to replace 'your-channel-public', 'user-token', and 'your-video-id' with the appropriate values for your project.

Note: This example uses Video.js, but you can easily adapt it for other supported players (HLS.js, Plyr, Shaka Player) by using the appropriate adapter.

API Reference​

All adapters (TeyutoVideoJsAdapter, TeyutoHlsJsAdapter, TeyutoPlyrAdapter, and TeyutoShakaPlayerAdapter) have the following methods:

  • constructor(channel, token): Initialize with your channel (required) and user token (optional).
  • init(player, videoId): Start tracking for a specific player and video (both required).
  • destroy(): Clean up resources and stop tracking.

Important Notes​

  • The channel parameter is required and represents your Teyuto channel identifier.
  • The token parameter is optional and represents the token of the user you want to track. This allows you to associate the viewing analytics with a specific user in your system.
  • If you don't provide a token, the analytics will still be tracked, but without user-specific information.

Troubleshooting​

If analytics data isn't appearing:

  1. Check console for errors.
  2. Verify that you've provided a valid channel identifier.
  3. If using user tracking, verify the user token.
  4. Ensure the video ID is correct.
  5. Verify that player events (play, pause, ended) are triggering correctly.