The Blings SDK enables easy integration of your analytics solution, such as Google Analytics, Mixpanel, or Amplitude, with MP5 video playback.
By adding a small piece of code, you can track various video analytics, including events like "video is ready", button clicks, scene changes, play and pause, and more. All these analytics will be sent directly to your system.
By integrating the Blings SDK, you can easily analyze the behavior of users while they watch the video as part of the entire user journey, all within your existing tool set. This unified approach allows you to gain valuable insights and understand how users interact with the video content, and compare that to the results of this communication.
Blings SDK requires three functions to set up analytics:
init - This function is used to set up the tool and pass the analytics token. It is called immediately.
config - This function is used to set parameters such as page and user ID. It is called once the player has received user data.
send - This is the main function that gets called for every playback event.
// custom analytics configuration object
{
init: ()=>{},
config: (player)=>{},
send: (event, properties)=>{}
}
You can use these functions in accordance with your analytics tool, as shown in this example that uses Mixpanel:
First, add the library script to your page, and then, set the analytics this in this way:
const customAnalytics = {
init() {
mixpanel.init("YOUR_MIXPANEL_TOKEN");
},
config(player) {
mixpanel.register({
userID: "xyz-123",
userType: "customer",
});
},
send(event, properties) {
mixpanel.track(event, properties);
},
};
To integrate your analytics platform, you have two options:
Per Instance Configuration (Recommended): Set the customAnalytics configuration in the analyticsConfig property, inside settings property, when you call BlingsPlayer.create.
(This configuration takes precedence over the global configuration)
BlingsPlayer.create({
settings: {
analyticsConfig: {
customAnalytics: {
init() {},
config(player) {},
send(event, properties) {},
},
},
},
// ...
// standard configuration: project, data, scenes, ...
});