Cette page a été traduite par l'API Cloud Translation.

Premiers pas avec Tizen (Samsung)

Pour voir une application exemple qui utilise la PAL pour générer un nonce, téléchargez la TV connectée (Tizen) exemple de GitHub

Ce guide intègre le SDK PAL dans une application Samsung (Tizen), demandez un nonce et enregistrer des impressions d'annonces.

Prérequis

Avant de commencer ce guide, vous devez créer une application Tizen de base. Vous pouvez utiliser l'IDE Tizen pour configurer l'application. Pour en savoir plus, regardez cette vidéo sur la première utilisation de Tizen.

Générer un nonce

Un "nonce" est une chaîne chiffrée unique générée par PAL à l'aide de NonceLoader. Le SDK PAL exige que chaque nouvelle requête de flux soit accompagnée d'un nonce nouvellement généré. Toutefois, les nonces peuvent être réutilisés pour plusieurs demandes d'annonces dans le même flux.

Créez un fichier HTML pour votre application. Incluez la dépendance webapis.js dans votre fichier HTML. La PAL nécessite cette dépendance pour fonctionner. Pour en savoir plus, consultez la documentation Samsung WebApi.

Incluez une dépendance pour le SDK PAL pour TV connectée dans votre fichier index.html. Chargez la balise de script après la balise de script pour webapis.js. Consultez le fichier index.html suivant pour en savoir plus.

<!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>Tizen app for PAL sdk</h1>
    </hgroup>
  </header>
  <div id="placeholder-video"></div>
</body>
</html>

Les signaux de spam PAL nécessitent certains droits Tizen pour fonctionner correctement. Créez un config.xml avec les déclarations de droits suivantes:

"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"

Consultez l'extrait de code suivant pour voir un exemple de fichier 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>

Ensuite, créez un fichier JavaScript pour générer un nonce. Cette étape comprend le workflow PAL consistant à créer un NonceLoader, à créer un NonceRequest, puis à demander un nonce à l'aide de NonceLoader.loadNonceManager().

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

/**
 * A placeholder for the publisher's own method of obtaining user
 * consent, either by integrating with a CMP or based on other
 * methods the publisher chooses to handle storage consent.
 * @return {boolean} Whether storage consent has been given.
 */
function getConsentToStorage() {
  return storageConsent;
}

/**
 * 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 `allowStorage` is false, but can be
  // changed once the appropriate consent has been gathered.
  const consentSettings = new goog.ctv.pal.ConsentSettings();
  consentSettings.allowStorage = getConsentToStorage();

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

joindre votre nonce à la demande d'annonce ;

Pour utiliser le nonce généré, ajoutez un paramètre givn et la valeur du nonce à votre balise publicitaire avant d'envoyer vos demandes d'annonces.

  /**
   * 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);
        
      })

Suivre les événements de lecture

Enfin, vous devez implémenter différents gestionnaires d'événements pour votre lecteur. À des fins de test, vous pouvez les associer à des événements de clic sur un bouton, mais dans une implémentation réelle, ils seront déclenchés par les événements de lecteur appropriés :

/**
 * 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();
  }
}

Dans votre implémentation, sendPlaybackStart doit être appelé une fois que votre session de lecture vidéo commence. sendPlaybackEnd doit être appelé une fois votre vidéo la session de lecture prend fin. sendAdClick doit être appelé à chaque fois que la méthode clique sur une annonce. sendAdTouch doit être appelé à chaque interaction tactile avec le joueur.

(Facultatif) Envoyer des signaux Google Ad Manager via des ad servers tiers

Configurez la demande de l'ad server tiers pour Ad Manager.

Configurez votre ad server tiers pour qu'il inclue le nonce dans la requête du serveur envoyée à Ad Manager. Voici un exemple de balise d'annonce configurée dans l'ad server tiers :

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

Pour en savoir plus, consultez l'article Implémentation côté serveur de Google Ad Manager guide de démarrage.

Ad Manager recherche givn= pour identifier la valeur nonce. Le serveur publicitaire tiers doit prendre en charge une macro qui lui est propre, telle que %%custom_key_for_google_nonce%%, et la remplacer par le paramètre de requête nonce que vous avez fourni à l'étape précédente. Pour en savoir plus, consultez la documentation de l'ad server tiers.

Et voilà ! Le paramètre nonce doit maintenant être propagé à partir du SDK PAL, entre vos serveurs intermédiaires, puis vers Google Ad Manager. Cela permet une meilleure monétisation via Google Ad Manager.