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

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

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

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

नॉन्स जनरेट करें

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

webOS CLI या webOS Studio का इस्तेमाल करके ऐप्लिकेशन जनरेट करने पर, एक ऐसी HTML फ़ाइल बनती है जिसमें 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 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() {
  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.
 *
 * 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);
        
      })

प्लेबैक इवेंट ट्रैक करें

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

/**
 * 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 की मदद से बेहतर तरीके से कमाई की जा सकती है.