Jetzt starten

Vorbereitung

Zum Integrieren und Testen des PAL SDK für Cast ist Folgendes erforderlich:

Da Sie nur die Empfänger-App aktualisieren müssen, um das PAL SDK zu integrieren, Sie können das CAC-Tool (Cast Command and Control) verwenden. als Web Sender, um den Empfänger zu testen.

Sie können das Beispiel am Ende jedes Schritts ausführen, indem Sie zuerst Ihre Website starten App für Empfänger und führen dann eine beliebige Ladeanfrage aus.

Nonce generieren

Eine „Nonce“ ist ein einzelner verschlüsselter String, der von PAL über das NonceManager Die NonceManager wird generiert durch den loadNonceManager NonceLoader-Methode, basierend auf den Einstellungen, die in einer Tabelle übergeben wurden, NonceRequest Um eine Beispiel-App, die mit PAL eine Nonce generiert, können Sie das Cast-Beispiel GitHub

Für jede neue Streamanfrage ist eine neue Nonce erforderlich. Mehrere Anzeigenanfragen im kann ein Stream dieselbe Nonce verwenden. Um eine Nonce mit dem PAL SDK zu generieren, Erstellen eines benutzerdefinierten Webempfängers App und fügen Sie den folgenden Code hinzu:

receiver.html

<!DOCTYPE html>
<html>
<head>
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/pal/sdkloader/cast_pal.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <footer>
    <script src="js/receiver.js" type="module"></script>
  </footer>
</body>
</html>

Das <cast-media-player>-Element steht für die integrierte Player-Benutzeroberfläche von die Cast Web Receiver API verwenden. Je nach Streamtyp hat der Player können variieren. Die genauen Versionen dieser Player finden Sie in der Google Cast-App SDK-Versionshinweise

Fügen Sie als Nächstes den folgenden Code hinzu, um LOAD abzufangen. Veranstaltungen und jedes Mal eine Nonce generieren, wenn der Empfänger eine neue MediaInformation -Objekt enthält:

js/receiver.js

const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();

const consentSettings = new goog.cast.pal.ConsentSettings();
// For the correct usage of the allowStorage property, See
// developers.google.com/ad-manager/pal/cast/reference/js/ConsentSettings#allowStorage.
consentSettings.allowStorage = true;

// You need a nonce loader to request your stream's nonceManager. The
// nonceManager provides your nonce. You should reuse the same nonce loader for
// the entire lifecycle of the receiver.
const nonceLoader = new goog.cast.pal.NonceLoader(consentSettings);

// You need a reference to the NonceManager to track when an ad is shown or
// clicked.
let nonceManager;

/**
 * Sends a debug message to the CAF sender.
 *
 * @param {String} message - The message to send
 */
const log = (message) => {
  // Use CastDebugLogger to log a message to the sender. See
  // https://developers.google.com/cast/docs/debugging/cast_debug_logger.
}

/**
 * Stores the nonce manager in the outer scoped variable and retrieves a nonce,
 * so it can be used to build your ad request URL
 *
 * @param {NonceManager} loadedNonceManager - The loaded nonce manager
 */
const buildAdRequest = (loadedNonceManager) => {
  nonceManager = loadedNonceManager;

  const nonce = nonceManager.getNonce();
  log('received nonce:' + nonce);

  // TODO: Set this nonce as the value for the `givn` parameter of your ad
  // request URL. For example:
  // const adRequestURL = 'https://myadserver.com/ads?givn=' + nonce;
}

/**
 * Configures a new nonce request, then requests a nonce.
 *
 * @param {LoadRequestData} loadRequestData - the load request object,
 * which contains the MediaInformation object from the sender. See
 * developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages.LoadRequestData
 * @return {(Promise<LoadRequestData>)} - A Promise to build an ad request.
 */
const handleLoadRequest = (loadRequestData) => {
  // Clear any old nonceManager before loading new media.
  nonceManager = null;

  // See developers.google.com/ad-manager/pal/cast/reference/js/NonceRequest
  // for details about each property. The NonceRequest parameters set here are
  // example parameters. You should set your parameters based on your own app
  // characteristics.
  const nonceRequest = new goog.cast.pal.NonceRequest();
  nonceRequest.adWillAutoPlay = true;
  // A URL describing the video stream.
  nonceRequest.descriptionUrl = 'https://example.com';
  nonceRequest.iconsSupported = true;
  nonceRequest.ppid = 'Sample PPID';
  nonceRequest.sessionId = 'Sample SID';
  nonceRequest.url = loadRequestData.media.contentUrl;
  // The height of the player in physical pixels.
  // For a fullscreen player on a 1080p screen, the video height would be 1080.
  nonceRequest.videoHeight = window.devicePixelRatio * window.screen.height;
  // The width of the player in physical pixels.
  // For a fullscreen player on a 1080p screen, the video width would be 1920.
  nonceRequest.videoWidth = window.devicePixelRatio * window.screen.width;

  return nonceLoader.loadNonceManager(nonceRequest)
    .then(buildAdRequest)
    .catch((e) => {
      log("Error: " + e.message);
    });
};

// Set up the event handler for the LOAD event type.
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD, handleLoadRequest);

castContext.start();

Wenn Sie den direkten VAST-Aufruf (DVC) ausführen, legen Sie diese Nonce als Wert in der givn-Parameter. Die Nonce ist URL-sicher. ohne URL-Codierung.

Videointeraktionen erfassen

Neben dem Generieren einer Nonce muss das PAL SDK bei bestimmten Videointeraktionen. Um Interaktionen mit dem Streamingempfänger zu verfolgen, fügen Sie die folgenden Code an Ihren benutzerdefinierten Empfänger an:

js/receiver.js

const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();

const consentSettings = new goog.cast.pal.ConsentSettings();
// For the correct usage of the allowStorage property, See
// developers.google.com/ad-manager/pal/cast/reference/js/ConsentSettings#allowStorage.
consentSettings.allowStorage = true;

// You need a nonce loader to request your stream's nonceManager. The
// nonceManager provides your nonce. You should reuse the same nonce loader for
// the entire lifecycle of the receiver.
const nonceLoader = new goog.cast.pal.NonceLoader(consentSettings);

// You need a reference to the NonceManager for sending ad events.
let nonceManager;

// Track playback status.
let playbackDidStart = false;

...

// Register the start of playback.
playerManager.addEventListener(cast.framework.events.EventType.PLAYING, () => {
  if (playbackDidStart) return;

  playbackDidStart = true;
  if (nonceManager) {
    log('Registered playback start');
    nonceManager.sendPlaybackStart();
  } else {
    log("Error: There is no nonce manager for this media.");
  }
});

// Register any interactions with the player.
const interactionEvents = [
  cast.framework.events.EventType.REQUEST_SEEK,
  cast.framework.events.EventType.REQUEST_STOP,
  cast.framework.events.EventType.REQUEST_PAUSE,
  cast.framework.events.EventType.REQUEST_PLAY,
  cast.framework.events.EventType.REQUEST_SKIP_AD,
  cast.framework.events.EventType.REQUEST_PLAY_AGAIN,
  cast.framework.events.EventType.REQUEST_PLAYBACK_RATE_CHANGE,
  cast.framework.events.EventType.REQUEST_VOLUME_CHANGE,
  cast.framework.events.EventType.REQUEST_USER_ACTION,
  cast.framework.events.EventType.REQUEST_FOCUS_STATE,
];
playerManager.addEventListener(interactionEvents, (interactionEvent) => {
  if (nonceManager) {
    log('Registered interaction: ' + interactionEvent);
    nonceManager.sendAdTouch(interactionEvent);
  } else {
    log("Error: There is no nonce manager for this media.");
  }
});

// Register the end of playback.
playerManager.addEventListener(cast.framework.events.EventType.MEDIA_FINISHED, () => {
  playbackDidStart = false;
  if (nonceManager) {
    log('Registered playback end');
    nonceManager.sendPlaybackEnd();
  } else {
    log("Error: There is no nonce manager for this media.");
  }
});

castContext.start();

(Optional) Google Ad Manager-Signale über Ad-Server eines Drittanbieters senden

Konfigurieren Sie die Anfrage des Ad-Servers eines Drittanbieters an Ad Manager. Nachdem Sie führen Sie die folgenden Schritte aus, wird der Nonce-Parameter vom PAL SDK weitergegeben, zwischen den Servern und dann an Google Ad Manager übertragen werden. Dies ermöglicht mit Google Ad Manager zu optimieren.

Konfigurieren Sie den Ad-Server eines Drittanbieters so, dass die Nonce im an Ad Manager senden. Hier sehen Sie ein Beispiel für ein Anzeigen-Tag, das im eines Drittanbieter-Ad-Servers:

'https://pubads.serverside.net/gampad/ads?givn=%%custom_key_for_google_nonce%%&...'

Weitere Informationen finden Sie unter Serverseitige Google Ad Manager-Implementierung .

In Ad Manager wird nach givn= gesucht, um den Nonce-Wert zu ermitteln. Drittanbieteranzeige muss ein eigenes Makro unterstützen, z. B. %%custom_key_for_google_nonce%% und ersetzen Sie es durch den Nonce-Abfrageparameter. die Sie im vorherigen Schritt angegeben haben. Weitere Informationen dazu, wie Sie dies erreichen in der Dokumentation des Drittanbieter-Ad-Servers verfügbar sein.