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

Commencer

Générer un nonce

Un "nonce" est une chaîne chiffrée unique générée par la PAL à l'aide de NonceLoader. Le SDK PAL exige que chaque nouvelle demande de flux soit accompagnée d'un nouvel le nonce généré. Toutefois, les nonces peuvent être réutilisés pour plusieurs demandes d'annonces dans le même flux. Pour voir une application exemple qui utilise la PAL pour générer un nonce, téléchargez l'exemple HTML5 de GitHub.

Pour générer un nonce à l'aide du SDK PAL, créez un fichier HTML et ajoutez le suivantes:

pal.html

<html>
<head></head>
<body>
  <div id="placeholder-video"></div>
  <button id="generate-nonce">Generate Nonce</button>
  <script src="//imasdk.googleapis.com/pal/sdkloader/pal.js"></script>
  <script src="pal.js"></script>
</body>
</html>

Ensuite, créez un fichier JavaScript et ajoutez les éléments suivants:

pal.js

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', (e) => void onVideoTouch(e));
  videoElement.addEventListener('touchstart', (e) => void onVideoTouch(e));
  videoElement.addEventListener('play', () => {
    if (!playbackStarted) {
      sendPlaybackStart();
      playbackStarted = true;
    }
  });
  videoElement.addEventListener('ended', () => void sendPlaybackEnd());
  videoElement.addEventListener('error', () => {
    console.log("Video error: " + videoElement.error.message);
    sendPlaybackEnd();
  });

  document.getElementById('generate-nonce')
      .addEventListener('click', generateNonce);

  // The default value for `allowStorage` is false, but can be
  // changed once the appropriate consent has been gathered.
  const consentSettings = new goog.pal.ConsentSettings();
  consentSettings.allowStorage = getConsentToStorage();

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

/**
 * 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.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/html5';
  request.videoHeight = 480;
  request.videoWidth = 640;

  managerPromise = nonceLoader.loadNonceManager(request);
  managerPromise
      .then((manager) => {
        nonceManager = manager;
        console.log('Nonce generated: ' + manager.getNonce());
      })
      .catch((error) => {
        console.log('Error generating nonce: ' + error);
      });
}

init();

Associer votre nonce à la demande d'annonce

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

pal.js

  /**
   * 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((manager) => {
        nonceManager = manager;
        console.log('Nonce generated: ' + manager.getNonce());
        
        // 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. Pour à des fins de test, vous pouvez les associer aux événements de clic sur un bouton, l'implémentation, ceux-ci sont déclenchés par les événements appropriés liés au joueur:

pal.js

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

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

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

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

Dans votre implémentation, sendPlaybackStart doit être appelé une fois que votre vidéo de lecture. 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 inclure le nonce dans le champ à Ad Manager. Voici un exemple de tag d'emplacement publicitaire configuré à l'intérieur de 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. L'annonce tierce serveur doit prendre en charge une macro qui lui est propre, telle que %%custom_key_for_google_nonce%% et remplacez-le par le paramètre de requête nonce. que vous avez fournies à l'étape précédente. En savoir plus sur la marche à suivre doit être disponible dans 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 grâce à Google Ad Manager.