Jetzt starten

Vorbereitung

Für die Integration und das Testen des PAL SDK für Cast benötigen Sie Folgendes:

Da Sie nur Ihre Receiver-App aktualisieren müssen, um das PAL SDK einzubinden, können Sie das CAC-Tool (Cast Command and Control) als Websender verwenden, um Ihren Receiver zu testen.

Sie können das Beispiel am Ende jedes Schritts ausführen. Starten Sie dazu zuerst Ihre Web-Receiver-App im CAC-Tool und stellen Sie dann eine Ladeanfrage.

Nonce generieren

Eine „Nonce“ ist ein einzelner verschlüsselter String, der von PAL über die NonceManager generiert wird. Der NonceManager wird von der Methode loadNonceManager des NonceLoader auf Grundlage der in einem NonceRequest übergebenen Einstellungen generiert. Eine Beispiel-App, in der mit PAL eine Nonce generiert wird, finden Sie im Cast-Beispiel auf GitHub.

Für jede neue Streaminganfrage ist eine neue Nonce erforderlich. Für mehrere Anzeigenanfragen innerhalb desselben Streams kann dieselbe Nonce verwendet werden. Wenn Sie mit dem PAL SDK einen Nonce generieren möchten, müssen Sie zuerst eine benutzerdefinierte Web Receiver-App erstellen und den folgenden Code hinzufügen:

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 stellt die integrierte Player-Benutzeroberfläche dar, die von der Cast Web Receiver API bereitgestellt wird. Je nach Streamtyp kann der tatsächlich verwendete Player variieren. Die genauen Versionen dieser Player finden Sie in den Versionshinweisen zum Google Cast SDK.

Fügen Sie als Nächstes den folgenden Code hinzu, um LOAD-Ereignisse abzufangen und jedes Mal, wenn der Receiver ein neues MediaInformation-Objekt lädt, eine Nonce zu generieren:

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();

Legen Sie bei Ihrem direkten VAST-Aufruf (Direct VAST Call, DVC) diese Einmal-ID als Wert für den Parameter givn fest. Die Nonce ist URL‑sicher und muss nicht URL‑codiert werden.

Wenn Sie Anzeigen von Google anfordern und rendern, müssen Sie das AdChoices und das zugehörige Overlay rendern. Weitere Informationen zum Parsen der VAST-Antwort und zum Rendern von Symbolen finden Sie unter Datenschutzinfo-Symbol und ‑Overlay.

Videointeraktionen erfassen

Neben dem Generieren einer Nonce muss das PAL SDK über bestimmte Videointeraktionen benachrichtigt werden. Wenn Sie Interaktionen mit dem Cast-Empfänger erfassen möchten, fügen Sie Ihrem benutzerdefinierten Empfänger den folgenden Code hinzu:

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 von Drittanbietern senden

Konfigurieren Sie die Anfrage des Drittanbieter-Ad-Servers für Ad Manager. Nachdem Sie die folgenden Schritte ausgeführt haben, wird der Nonce-Parameter vom PAL SDK über Ihre Vermittlungsserver an Google Ad Manager weitergegeben. So lässt sich die Monetarisierung über Google Ad Manager verbessern.

Konfigurieren Sie den Ad-Server eines Drittanbieters so, dass die Nonce in die Serveranfrage an Ad Manager aufgenommen wird. Hier ein Beispiel für ein Anzeigen-Tag, das auf dem Ad-Server eines Drittanbieters konfiguriert ist:

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

Weitere Informationen finden Sie im Leitfaden zur serverseitigen Implementierung von Google Ad Manager.

In Ad Manager wird nach givn= gesucht, um den Nonce-Wert zu ermitteln. Der Ad‑Server des Drittanbieters muss ein eigenes Makro wie %%custom_key_for_google_nonce%% unterstützen und es durch den Nonce-Abfrageparameter ersetzen, den Sie im vorherigen Schritt angegeben haben. Weitere Informationen dazu finden Sie in der Dokumentation des Drittanbieter-Ad-Servers.