Começar a usar o Samsung Tizen

Para conferir um app de exemplo que usa a PAL para gerar um número único, faça o download do exemplo do smart TV Samsung Tizen no GitHub.

Este guia incorpora o SDK da PAL a um aplicativo Samsung Tizen, solicita um valor de uso único e registra impressões de anúncio.

Pré-requisitos

Antes de começar este guia, crie um app Tizen básico. Você pode usar o Tizen IDE para configurar o app. Consulte este vídeo sobre como começar a usar o Tizen para mais informações.

Gerar um valor de uso único

Um "nonce" é uma única string criptografada gerada pela PAL usando o NonceLoader. O SDK PAL exige que cada nova solicitação de stream seja acompanhada por um nonce gerado recentemente. No entanto, os nonces podem ser reutilizados para várias solicitações de anúncio no mesmo fluxo.

Crie um arquivo HTML para seu app. Inclua a dependência webapis.js no arquivo HTML. O PAL exige essa dependência para funcionar. Para mais informações, consulte a documentação da Samsung WebApi.

Inclua uma dependência para o SDK do PAL de CTV no arquivo index.html. Carregue a tag script depois da tag script para webapis.js. Confira o arquivo index.html a seguir para um exemplo.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 <script src="$WEBAPIS/webapis/webapis.js"></script>
 <script src="//imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
 <script src="app.js"></script>
</head>
<body>
  <header>
    <hgroup>
      <h1>Samsung Tizen app for PAL sdk</h1>
    </hgroup>
  </header>
  <div id="placeholder-video"></div>
</body>
</html>

Os indicadores de spam da PAL exigem determinados privilégios do Tizen para funcionar corretamente. Crie um arquivo config.xml com as seguintes declarações de privilégio:

"http://tizen.org/privilege/internet"
"http://tizen.org/privilege/system"
"http://tizen.org/privilege/telephony"
"http://tizen.org/privilege/tv.inputdevice"
"http://developer.samsung.com/privilege/network.public"
"http://developer.samsung.com/privilege/productinfo"

Confira o snippet de código a seguir para um exemplo de arquivo config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/BasicProject" version="1.0.0" viewmodes="maximized">
    <tizen:application id="PACKAGE_STRING.BasicProject" package="PACKAGE_STRING" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>
    <name>BasicProject</name>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/system"/>
    <tizen:privilege name="http://tizen.org/privilege/telephony"/>
    <tizen:privilege name='http://tizen.org/privilege/tv.inputdevice'/>
    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
    <tizen:profile name="tv-samsung"/>
    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
    <access origin="*" subdomains="true"/>
</widget>

Em seguida, crie um arquivo JavaScript para gerar um nonce. Esta etapa inclui o fluxo de trabalho da PAL de criação de um NonceLoader, um NonceRequest e, em seguida, solicitação de um nonce usando NonceLoader.loadNonceManager().

let videoElement;
let nonceLoader;
let managerPromise;
let nonceManager;
let playbackStarted = false;

/**
 * Initializes the PAL loader.
 */
function init() {
  const videoElement = document.getElementById('placeholder-video');
  videoElement.addEventListener('mousedown', onVideoTouch);
  videoElement.addEventListener('touchstart', onVideoTouch);
  videoElement.addEventListener('play', function() {
    if (!playbackStarted) {
      sendPlaybackStart();
      playbackStarted = true;
    }
  });
  videoElement.addEventListener('ended', sendPlaybackEnd);
  videoElement.addEventListener('error', function() {
    // Handle video error.
    sendPlaybackEnd();
  });

  // The default value for the `allowStorage` parameter is false. You must
  // set this value to true to let PAL determine whether limited ads applies
  // based on the TCF data. You can optionlly use the `forceLimitedAds`
  // parameter to enable limited ads regardless of the TCF data.
  const consentSettings = new goog.pal.ConsentSettings();
  consentSettings.allowStorage = true;

  nonceLoader = new goog.ctv.pal.NonceLoader(consentSettings);

  generateNonce();
}

/**
 * Generates a nonce with sample arguments and logs it to the console.
 *
 * The NonceRequest parameters set here are example parameters.
 * You should set your parameters based on your own app characteristics.
 */
function generateNonce() {
  const request = new goog.ctv.pal.NonceRequest();
  request.adWillAutoPlay = true;
  request.adWillPlayMuted = false;
  request.continuousPlayback = false;
  request.descriptionUrl = 'https://example.com';
  request.iconsSupported = true;
  request.playerType = 'Sample Player Type';
  request.playerVersion = '1.0';
  request.ppid = 'Sample PPID';
  request.sessionId = 'Sample SID';
  // Player support for VPAID 2.0, OMID 1.0, and SIMID 1.1
  request.supportedApiFrameworks = '2,7,9';
  request.url = 'https://developers.google.com/ad-manager/pal/ctv';
  request.videoHeight = 480;
  request.videoWidth = 640;

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then(function(manager) {
        nonceManager = manager;
      })
      .catch((error) => {
        // Handle nonce generating error.
      });
}

window.addEventListener("load", function(event) {
  init();
});

Anexar o nonce à solicitação de anúncio

Para usar o valor de uso único gerado, adicione ao final a tag de anúncio com um parâmetro givn e o valor de uso único, antes de fazer as solicitações de anúncio.

  /**
   * The ad tag for your ad request, for example:
   * https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=
   *
   * For more sample ad tags, see https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags
   */
  const DEFAULT_AD_TAG = "Your ad tag";

  ...

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then(function(manager) {
        nonceManager = manager;
        
        // Append the nonce to the ad tag URL.
        makeAdRequest(DEFAULT_AD_TAG + "&givn=" + nonceString);
        
      })

Rastrear eventos de reprodução

Por fim, você precisa implementar vários manipuladores de eventos para seu player. Para fins de teste, você pode anexar esses eventos de clique do botão, mas em uma implementação real, eles seriam acionados pelos eventos apropriados do player:

/**
 * Informs PAL that an ad click has occurred. How this function is
 * called will vary depending on your ad implementation.
 */
function sendAdClick() {
  if (nonceManager) {
    nonceManager.sendAdClick();
  }
}

/**
 * Handles the user touching on the video element, passing it to PAL.
 * @param {!TouchEvent|!MouseEvent} touchEvent
 */
function onVideoTouch(touchEvent) {
  if (nonceManager) {
    nonceManager.sendAdTouch(touchEvent);
  }
}

/** Informs PAL that playback has started. */
function sendPlaybackStart() {
  if (nonceManager) {
    nonceManager.sendPlaybackStart();
  }
}

/** Informs PAL that playback has ended. */
function sendPlaybackEnd() {
  if (nonceManager) {
    nonceManager.sendPlaybackEnd();
  }
}

Na sua implementação, sendPlaybackStart precisa ser chamado quando a sessão de reprodução de vídeo começar. sendPlaybackEnd deve ser chamado quando a sessão de reprodução de vídeo terminar. sendAdClick precisa ser chamado sempre que o espectador clicar em um anúncio. sendAdTouch precisa ser chamado em todas as interações de toque com o player.

(Opcional) Enviar indicadores do Google Ad Manager por servidores de anúncios de terceiros

Configure a solicitação do servidor de anúncios terceirizado para o Ad Manager.

Configure seu servidor de anúncios de terceiros para incluir o nonce na solicitação do servidor ao Ad Manager. Confira um exemplo de tag de anúncio configurada no servidor de anúncios de terceiros:

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

Para mais detalhes, consulte o guia de implementação do lado do servidor do Google Ad Manager.

O Ad Manager procura givn= para identificar o valor de uso único. O servidor de anúncios terceirizado precisa ser compatível com uma macro própria, como %%custom_key_for_google_nonce%%, e substituí-la pelo parâmetro de consulta de nonce fornecido na etapa anterior. Mais informações sobre como fazer isso estão disponíveis na documentação do servidor de anúncios terceirizado.

Pronto! Agora, o parâmetro nonce precisa ser propagado do SDK do PAL pelos servidores intermediários e, em seguida, para o Google Ad Manager. Isso permite uma monetização melhor com o Google Ad Manager.