Skip to main content

Analytics

What you learn​

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

The goal of this article is to presents the callback functions DIVA Player provides to customize the events payload sent to the analytics provider.

Analytic event behavior​

DIVA Player provides callback functions to customize the analytic events payload to send to the analytics provider.

Analytic event structure​

The analytics event payload identifies the event. All events have the following parameters:

  • type: String
    • It's the event type name.
  • interactive: boolean
    • It's true the a user interaction raises the event. It's false otherwise.
  • eventArguments: Map
    • It's the dictionary that contains all common (for instance videoMetaData parameters) and event-specific arguments. Find the arguments full list in the Arguments list article.

Instantiation​

To customize the events payload sent to the analytics provider, add the following code to the Basic instantiation code:

const config = {
  ...,
  onAnalyticEvent({type, interactive, eventArguments}) {
    console.log(type)
  },
};

Working sample code (.tsx)​

import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
  }
  }, 
  dictionary: {
  messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
    };
  },
  onAnalyticEvent({ type, interactive, eventArguments }) {
    console.log('Event Type:', type);
    console.log('Event is interactive:', interactive);
    console.log('Event arguments:', eventArguments);
    // send event data to the analytics provider
  },
};

export const App = () => {
  return <DivaWebComponent config={config} />;
};

How to connect to the third party analytics provider​

This is an example of how to connect to Firebase Analytics:

import { initializeApp } from "firebase/app";
import { getAnalytics, logEvent } from "firebase/analytics";
import { GenericEvent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "<apiKey>",
  authDomain: "<authDomain>.firebaseapp.com",
  projectId: "<projectId>",
  storageBucket: "<storageBucket>.appspot.com",
  messagingSenderId: "<senderId>",
  appId: "<appId>",
  measurementId: "<measurementId>",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const config = {
  ...,
  onAnalyticEvent({type, interactive, eventArguments}: GenericEvent) {
    const eventParams = eventArguments as any;
    eventParams.interactive = `${interactive}`;
    logEvent(analytics, type, eventParams);
  },
};