Skip to main content

Analytics

What you learn​

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the 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 React from 'react';
import { DivaWebBoAdapter } from '@deltatre-vxp/diva-sdk/diva-web-bo-adapter';
import '@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css';

const videoId = '<videoId>';

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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: videoId,
  libs: libs,
  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, see an example below
  },
};

const props = {
  settingsUrl: '<Settings URL>',
  languageCode: 'en-US',
  languageDictionary: 'en-US',
  onDivaBoAdapterError: console.error,
  config: config,
};

function App() {
  return <DivaWebBoAdapter {...props} />;
}

export default App;

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