DIVA Player analytics setup

What you learn

Learn how DIVA Player is used in the AXIS application and how to set up DIVA Player analytics plugins.

Before starting

• Ensure your project is checked out in your local workspace.
• Install all project dependencies.

Instantiation

DIVA Player allows you to set up two analytics plugins for tracking video analytics data: Conviva and Youbora.

Environment Variables

To configure Diva analytics plugins, ensure the following environment variables are set:

# Conviva related variables
CLIENT_CONVIVA_CUSTOMER_KEY=<customer_key>
CLIENT_CONVIVA_PLATFORM=Web
CLIENT_CONVIVA_DEBUG=true

# Youbora related variables
CLIENT_YOUBORA_ACCOUNT_CODE=<youbora_account_code>
CLIENT_YOUBORA_PLAYER_VERSION=5.2.0

DIVA Player Analytics Setup

The DivaPlayerStandard component prepares the analytics plugins and shares the setup with DIVA Player:

const { onMediaAnalytics: handleMediaAnalytics } = useMediaAnalytics({
    isConvivaOn: !!config.convivaCustomerKey,
    isYouboraOn: !!config.youboraAccountCode,
    isAllowAnalyticsTracking: true,
});

The useMediaAnalytics hook handles both plugins:

export const useMediaAnalytics = ({ isConvivaOn, isYouboraOn, isAllowAnalyticsTracking }: Props) => {
    useEffect(() => {
        // Conviva plugin instantiation
    }, [isConvivaOn, userName]);

    useEffect(() => {
        // Youbora plugin instantiation
    }, [isYouboraOn, userName]);

    const onMediaAnalytics = useCallback(
        (event: MediaEvent | MediaTvEvent) => {
            // Raise analytics events to plugins
        },
        [convivaPlugin, youboraPlugin]
    );

    return {
        onMediaAnalytics
    };
};

Conviva Plugin Configuration

Conviva plugin is distributed by the DIVA product team and can be configured as follows:

export const useMediaAnalytics = ({ isConvivaOn, isYouboraOn, isAllowAnalyticsTracking }: Props) => {
    ...
    useEffect(() => {
        const config = getConvivaConfig({
            isConvivaOn,
            convivaCustomerKey: moduleConfig.convivaCustomerKey,
            divaVersion: DivaCommonSDK.getDivaVersion(),
            isConvivaDebug: moduleConfig.convivaDebug,
            convivaGatewayUrl: moduleConfig.convivaGatewayURl,
            userName: userName
        });

        if (config) {
            const plugin = new ConvivaPlugin();

            plugin.init(config);
            setConvivaPlugin(plugin);

            return () => {
                plugin.detachPlugin();
            };
        }

        return undefined;
    }, [isConvivaOn, userName]);

    const onMediaAnalytics = useCallback(
        (event: MediaEvent|MediaTvEvent) => {
			if(isAllowAnalyticsTracking) {
                if (convivaPlugin) {
					convivaPlugin.handleEvent(event as unknown as ConvivaMediaEvent);
				}
                ...
			}
        },
        [convivaPlugin]
    );

    return {
        onMediaAnalytics
    };
};

Youbora Plugin Instantiation and Configuration

Similarly, the Youbora plugin can be instantiated and configured as follows:

export const useMediaAnalytics = ({ isConvivaOn, isYouboraOn, isAllowAnalyticsTracking }: Props) => {
    ...

    useEffect(() => {
        const config = getYouboraConfig({
            isYouboraOn,
            divaVersion: DivaCommonSDK.getDivaVersion(),
            youboraAccountCode: moduleConfig.youboraAccountCode,
            userName: userName
        });

        if (config) {
            const plugin = new YouboraPlugin();

            plugin.init(config);
            setYouboraPlugin(plugin);

            return () => {
                plugin.detachPlugin();
            };
        }

        return undefined;

    }, [isYouboraOn, userName]);

    const onMediaAnalytics = useCallback(
        (event: MediaEvent|MediaTvEvent) => {
			if(isAllowAnalyticsTracking) {
                if (youboraPlugin) {
					youboraPlugin.handleEvent(event as unknown as YouboraMediaEvent);
				}
                ...
			}
        },
        [youboraPlugin]
    );

    return {
        onMediaAnalytics
    };
};