Logo

Application collectors

Chromecast Receiver Media Player

v2.20.0 • For the Javascript Collector

The Chromecast Receiver Media Player Extension is a configuration option for the Javascript Collector by Datazoom that makes the following additional data points automatically collectable in real time.

Integration Instructions

Data collected by our Chromecast Collector will appear in its own app session. For example, if you are viewing video on a web browser configured with one of our javascript Collectors and you then cast to a Chromecast web receiver that is instrumented with our Chromecast Collector, data from that viewer will be split into two app sessions, one from the web browser and one from the web receiver.

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the Chromecast receiver plugin into your Chromecast web receiver application with the following snippet:

<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>

  • Insert this JS line into your HTML

  • Replace the CONFIG_ID value with the collector configuration ID.

This inserts Datazoom's data collection SDK into the page.

Activate Data Collection for a Chromecast Receiver

To activate data collection for the Chromecast receiver instance, create a Datazoom context which references the playerManager instance with the following snippet:

var datazoom_context = datazoom.createContext(playerManager);

For example:

<html>

<head>
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>
  <cast-media-player></cast-media-player>

  <script>
    const context = cast.framework.CastReceiverContext.getInstance();
    context.start();
    const playerManager = context.getPlayerManager();
    //Activates Data Collection
    let datazoom_context = datazoom.createContext(playerManager);
  </script>
</body>

</html>

Enable Ad Data Collection (Google IMA)

To enable a Chromecast collector to capture the ad related data points, the required steps for a web application differ depending on how the IMA ad framework is integrated with the chromecast player. In general, there are two types of integration method between the chromecast player and ad framework:

1. Ad framework integration supported by the chromecast player (Native IMA)

Chromecast player support IMA ad integration as a part or an optional module of the player. Since the corresponding Datazoom collector for the player is prebuilt with knowledge of the player’s ad related features, for a web application who simply leverages the video player for ads, no additional code is required to enable ad data collection in this scenario.

2. Ad integration external to the chromecast player (Direct IMA)

For a web application who likes to enable IMA ads independent of the chromecast player, it can choose to utilize the IMA ad framework library directly. Since it is impossible for the corresponding Datazoom collector to gather ad information through the chromecast player, some provisioning steps will be required to enable ad data collection.

For a Datazoom collector to gather ad information in this scenario, the application should give access by attaching these IMA objects to the collector context as soon as they become available. The Datazoom collector context interface expose these methods for this purpose:

// share a adsManager object with the collector context, once per ad-request
this.datazoom_context.attachImaAdsManager(adsManager);

// share the adsLoader object with the collector context, usually once per context
this.datazoom_context.attachImaAdsLoader(adsLoader);

For more info https://help.datazoom.io/hc/en-us/articles/5395580961805-Enable-Ad-Data-Collection-by-Attaching-IMA-Objects .

Direct IMA Integration Methods

Direct IMA integration can be done in different ways. See below.

1. Pause-Resume Method

This implementation pauses the content when the ad starts and resume the content when ad completes. To enable ad data collection in this scenario, some provisioning steps will be required.

The below code snippet helps to pause content when ad starts and resume content when ad ends.

// Pauses the content when ad starts
this.adsManager_.addEventListener(
  google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
  this.playerManager_.pause();
);

// Resumes the content when ad ends
this.adsManager_.addEventListener(
  google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
  this.playerManager_.play();
);

Example:

let Player = function () {
  // Gets the Cast Reciever Context
  this.context_ = cast.framework.CastReceiverContext.getInstance();

  // Gets the Player Manager
  this.playerManager_ = this.context_.getPlayerManager();

  // share a playerManager object with the collector context
  this.datazoom_context = datazoom.createContext(this.playerManager_);
  
  // Gets Media Element
  this.mediaElement_ = document.getElementById("player").getMediaElement();

  this.context_.start();
  this.initIMA_();
};

Player.prototype.initIMA_ = function () {
  //Initializing IMA
  ...
  this.adsLoader_ = new google.ima.AdsLoader(adDisplayContainer);
  this.adsLoader_.addEventListener(
    google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
    this.onAdsManagerLoaded_.bind(this),
    false
  );
  ...
};

Player.prototype.onAdsManagerLoaded_ = function (adsManagerLoadedEvent) {
  ...
  // share a adsManager object with the collector context, once per ad-request
  this.datazoom_context.attachImaAdsManager(this.adsManager_);

  // share the adsLoader object with the collector context, usually once per context
  this.datazoom_context.attachImaAdsLoader(this.adsLoader_);

  // Pauses the content when ad starts
  this.adsManager_.addEventListener(
    google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
    this.onContentPauseRequested_.bind(this)
  );

  // Resumes the content when ad ends
  this.adsManager_.addEventListener(
    google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
    this.onContentResumeRequested_.bind(this)
  );
  ...
};

// Pauses the content 
Player.prototype.onContentPauseRequested_ = function () {
  this.playerManager_.pause();
};

// Resumes the content
Player.prototype.onContentResumeRequested_ = function () {
  this.playerManager_.play();
};

That’s it. The Datazoom collector is now provided with the required access to gather ad related information with pause-resume method.

2. Stop-Load Method

This implementation stops the content when the ad starts and loads the content when ad completes.

Currently Chromecast collector don’t support this type of implementation.

NPM (Node Package Manager)

We have made it convenient to manage your Chromecast Collector integration by providing NPM (Node Package Manager) support. Please see installation details here.

References:

Chromecast Web Receiver API : https://developers.google.com/cast/docs/reference/web_receiver

Ad Frameworks Extensions

If your Javascript application has a media player with an ad framework, Datazoom’s Javascript Collector with a Chromecast Receiver Media Player can be extended with the following ad framework extensions.

Previous
Brightcove Media Player
Next
Freewheel Ad Framework