LG का इस्तेमाल शुरू करें

इस गाइड में, PAL SDK को LG webOS ऐप्लिकेशन में शामिल करने, नॉनस का अनुरोध करने, और विज्ञापन इंप्रेशन रजिस्टर करने के बारे में बताया गया है.

ज़रूरी शर्तें

इस गाइड को शुरू करने से पहले, एक बुनियादी LG webOS ऐप्लिकेशन बनाएं. ऐप्लिकेशन को सेट अप करने के लिए, webOS CLI या webOS Studio का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, अपना पहला ऐप्लिकेशन बनाने की गाइड देखें

एक नॉनस जनरेट करना

"नॉन्स" एक एन्क्रिप्ट किया गया स्ट्रिंग होता है. इसे PAL, NonceLoader का इस्तेमाल करके जनरेट करता है. PAL SDK टूल के लिए, हर नए स्ट्रीम अनुरोध के साथ नया नॉनस भेजना ज़रूरी है. हालांकि, एक ही स्ट्रीम में विज्ञापन के कई अनुरोधों के लिए, नॉनस का फिर से इस्तेमाल किया जा सकता है.

webOS CLI या webOS Studio का इस्तेमाल करके ऐप्लिकेशन जनरेट करने पर, एक एचटीएमएल फ़ाइल बनती है. इसमें webOSTV.js डिपेंडेंसी शामिल होती है. PAL को काम करने के लिए, इस डिपेंडेंसी की ज़रूरत होती है. ज़्यादा जानकारी के लिए, webOSTV.js का दस्तावेज़ देखें.

अपनी index.html फ़ाइल में, CTV PAL SDK के लिए डिपेंडेंसी शामिल करें. webOSTV.js के स्क्रिप्ट टैग के बाद, स्क्रिप्ट टैग लोड करें. उदाहरण के लिए, यह index.html फ़ाइल देखें.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="LG app for PAL sdk"/>
  <title>LG app for PAL sdk</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="path/to/webOSTVjs/webOSTV.js" charset="utf-8"></script>
  <script src="https://imasdk.googleapis.com/pal/sdkloader/pal_ctv.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <header>
    <hgroup>
      <h1>LG app for PAL sdk</h1>
    </hgroup>
  </header>
  <div id="placeholder-video"></div>
</body>
</html>

इसके बाद, नॉनस जनरेट करने के लिए एक JavaScript फ़ाइल बनाएं. इस चरण में, PAL का वर्कफ़्लो शामिल है. इसमें NonceLoader बनाना, NonceRequest बनाना, और फिर NonceLoader.loadNonceManager() का इस्तेमाल करके नॉन्स का अनुरोध करना शामिल है.

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

/**
 * Initializes the PAL loader.
 */
function init() {
  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();
  });

  // PAL automatically determines whether limited ads apply based on the TCF
  // data found on the page. You can optionally use the `forceLimitedAds`
  // parameter to manually enable limited ads regardless of the TCF data.
  const consentSettings = new goog.pal.ConsentSettings();

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

  generateNonce();
}

/**
 * Generates a nonce with sample arguments.
 *
 * 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();
});

विज्ञापन दिखाने के अनुरोध में अपना नॉन्स अटैच करें

जनरेट किए गए नॉन्स का इस्तेमाल करने के लिए, विज्ञापन अनुरोध करने से पहले अपने विज्ञापन टैग में givn पैरामीटर और नॉन्स वैल्यू जोड़ें.

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

अगर आपको Google से विज्ञापनों का अनुरोध करना है और उन्हें दिखाना है, तो आपको AdChoices आइकॉन और ओवरले दिखाना होगा.

वीडियो चलाने से जुड़े इवेंट ट्रैक करना

आखिर में, आपको अपने प्लेयर के लिए अलग-अलग इवेंट हैंडलर लागू करने होंगे. जांच के लिए, इन्हें बटन क्लिक इवेंट से जोड़ा जा सकता है. हालांकि, असल में लागू करने के दौरान, इन्हें प्लेयर के सही इवेंट से ट्रिगर किया जाएगा:

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

लागू करने के दौरान, वीडियो प्लेबैक सेशन शुरू होने के बाद sendPlaybackStart को कॉल किया जाना चाहिए. वीडियो चलाने का सेशन खत्म होने के बाद, sendPlaybackEnd को एक बार कॉल किया जाना चाहिए. sendAdClick को हर बार तब कॉल किया जाना चाहिए, जब दर्शक किसी विज्ञापन पर क्लिक करे. sendAdTouch को प्लेयर के साथ हर टच इंटरैक्शन पर कॉल किया जाना चाहिए.

(ज़रूरी नहीं) तीसरे पक्ष के विज्ञापन सर्वर के ज़रिए, Google Ad Manager के सिग्नल भेजना

Ad Manager के लिए, तीसरे पक्ष के विज्ञापन सर्वर के अनुरोध को कॉन्फ़िगर करें.

Ad Manager को सर्वर के अनुरोध में नॉनस शामिल करने के लिए, तीसरे पक्ष के विज्ञापन सर्वर को कॉन्फ़िगर करें. यहां तीसरे पक्ष के विज्ञापन सर्वर में कॉन्फ़िगर किए गए विज्ञापन टैग का उदाहरण दिया गया है:

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

ज़्यादा जानकारी के लिए, Google Ad Manager के सर्वर-साइड इंटिग्रेशन से जुड़ी गाइड देखें.

Ad Manager, नॉन्स वैल्यू की पहचान करने के लिए givn= को खोजता है. तीसरे पक्ष के विज्ञापन सर्वर को अपने कुछ मैक्रो का इस्तेमाल करना होगा. जैसे, %%custom_key_for_google_nonce%%. साथ ही, इसे पिछले चरण में दिए गए नॉन्स क्वेरी पैरामीटर से बदलना होगा. इसे पूरा करने के तरीके के बारे में ज़्यादा जानकारी, तीसरे पक्ष के विज्ञापन सर्वर के दस्तावेज़ में उपलब्ध होनी चाहिए.

हो गया! अब आपके पास PAL SDK से, मध्यस्थ सर्वर के ज़रिए, और फिर Google Ad Manager को भेजा गया नॉन्स पैरामीटर होना चाहिए. इससे Google Ad Manager के ज़रिए बेहतर तरीके से कमाई की जा सकती है.