시작하기

기본 요건

Cast용 PAL SDK를 통합하고 테스트하려면 다음이 필요합니다.

PAL SDK를 통합하려면 수신기 앱을 업데이트하기만 하면 되므로 Cast Command and Control (CAC) 도구를 사용할 수 있습니다. 수신자를 테스트할 수 있습니다.

먼저 웹을 실행하여 각 단계가 끝날 때마다 샘플을 실행할 수 있습니다. 수신 앱을 호출한 후 도구를 사용한 다음 로드 요청을 실행합니다.

nonce 생성

'nonce' PAL이 PAL을 통해 생성한 단일 암호화된 문자열입니다. NonceManager 이 NonceManager은(는) 다음에 의해 생성됩니다. loadNonceManager NonceLoader의 메서드 에 전달된 설정을 기반으로 NonceRequest 이 PAL을 사용하여 nonce를 생성하는 샘플 앱을 빌드하려면 다음에서 Cast 예시를 다운로드합니다. GitHub

새 스트림 요청마다 새 nonce가 필요합니다. 광고 단위 내에서 동일한 nonce를 사용할 수 있습니다. PAL SDK를 사용하여 nonce를 생성하려면 먼저 맞춤설정된 웹 수신기 만들기 앱 그리고 다음 코드를 추가합니다.

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>

<cast-media-player> 요소는 Cast Web Receiver API를 포함합니다. 스트림 유형에 따라 사용자가 실제로 사용하는 다를 수 있습니다 이러한 플레이어의 정확한 버전은 Google Cast SDK 출시 노트

그런 다음, 다음 코드를 추가하여 LOAD를 가로챕니다. 이벤트 수신기가 새 MediaInformation 객체:

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

직접 VAST 호출 (DVC)을 호출할 때 이 nonce를 givn 매개변수 nonce는 URL에 안전합니다. URL 인코딩을 하지 않아도 됩니다

동영상 상호작용 추적

PAL SDK는 nonce를 생성하는 것 외에도 동영상 상호작용을 나타냅니다 Cast 수신기와의 상호작용을 추적하려면 다음 코드를 맞춤 수신기에 전송합니다.

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

(선택사항) 서드 파티 광고 서버를 통해 Google Ad Manager 신호 전송

Ad Manager에 대한 외부 광고 서버의 요청을 구성합니다. 사용자가 다음 단계를 완료하면 nonce 매개변수가 PAL SDK에서 전파됩니다. 중간 서버를 통해 전달되고 Google Ad Manager로 전달됩니다. 이렇게 하면 Google Ad Manager를 통해 수익을 창출할 수 있습니다

서버의 요청을 Ad Manager에 요청하는 것입니다 다음은 외부 애드 서버인

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

자세한 내용은 Google Ad Manager 서버 측 구현 가이드를 참조하세요.

Ad Manager는 nonce 값을 식별하기 위해 givn=를 찾습니다. 타사 광고 서버는 자체 매크로를 지원해야 함(예: %%custom_key_for_google_nonce%%)하고 nonce 쿼리 매개변수로 바꿉니다. 사용할 수 있습니다 이 작업을 수행하는 방법에 대해 자세히 알아보기 외부 광고 서버 설명서에 나와 있습니다.