कस्टम विज्ञापन यूज़र इंटरफ़ेस (यूआई)

इस गाइड में IMA SDK का इस्तेमाल करके, अपनी पसंद के मुताबिक यूज़र इंटरफ़ेस (यूआई) लागू करने का तरीका बताया गया है HTML5 के लिए है. ऐसा करने के लिए, आपको डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) को बंद करना होगा. इसके बाद, नया पसंद के मुताबिक बनाया जा सकता है और फिर विज्ञापन की जानकारी से नए यूज़र इंटरफ़ेस (यूआई) को भरा गया है. का इस्तेमाल किया है. यह गाइड सिंपल सैंपल HTML5 के लिए है.

यूज़र इंटरफ़ेस (यूआई) एलिमेंट को डीओएम में जोड़ें

कोई भी JavaScript लिखने से पहले, उसे जोड़ने के लिए एचटीएमएल और स्टाइलशीट में बदलाव करें ज़्यादा जानें बटन, विज्ञापन छोड़ें बटन, और काउंटडाउन टाइमर:

index.html

<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
    </video>
  </div>
  <div id="adContainer"></div>
  <div id="customUi">
    <div id="adClick" class="customUIButton">Click me!</div>
    <div id="skipButton" class="customUIButton"></div>
    <div id="adCountdown"></div>
  </div>
</div>

Style.css

...
#customUI {
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
}

.customUIButton {
  position: absolute;
  right: 0px;
  background-color: red;
}

#adClick {
  top: 0px;
  width: 100px;
  height: 50px;
  line-height: 3em;
  cursor: pointer;
}

#skipButton {
  top: 213px;
  width: 150px;
  height: 35px;
  line-height: 2em;
  display: none;
}

#adCountdown {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 120px;
  height: 20px;
  background-color: red;
}
...

अगर आप चाहें, तो अपने यूज़र इंटरफ़ेस (यूआई) को अलग स्टाइल में बदला जा सकता है; ऊपर दिया गया यूज़र इंटरफ़ेस (यूआई) सिर्फ़ एक उदाहरण के लिए.

पहले से मौजूद यूज़र इंटरफ़ेस (यूआई) को बंद करें

सबसे पहले, SDK टूल को बताएं कि आपको डिवाइस पर पहले से मौजूद यूआई को बंद करना है.

ads.js

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.disableUi = true;
  // videoContent should be set to the content video element.
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings);
  ...
}

अनुमति होने पर, अपनी पसंद के मुताबिक बनाया गया यूज़र इंटरफ़ेस (यूआई) दिखाएं और छिपाएं

AdSense विज्ञापन जैसे कुछ Google विज्ञापन, कस्टम यूज़र इंटरफ़ेस (यूआई) की अनुमति नहीं देते हैं और हमेशा इसके बजाय उन्हें अपना यूज़र इंटरफ़ेस (यूआई) रेंडर करना होगा. कस्टम यूज़र इंटरफ़ेस (यूआई) के ऊपर स्टाइलशीट में div है डिफ़ॉल्ट रूप से छिपा हुआ होता है. इसे केवल तब दिखाएं, जब वर्तमान में चल रहा विज्ञापन अपनी सामग्री को छिपा रहा हो यूआई और हर विज्ञापन के बाद कस्टम यूज़र इंटरफ़ेस (यूआई) छिपाएं, ताकि हो सकता है कि बाद में दिखने वाला विज्ञापन कुछ भी न दिखे कस्टम यूज़र इंटरफ़ेस (यूआई) को अनुमति दें:

ads.js

let mainContainerDiv, currentAd, customUiDiv;
...
function setUpIMA() {
  customUiDiv = document.getElementById('customUi');
  mainContainerDiv = document.getElementById('mainContainer');
  mainContainerDiv.addEventListener('click', () => {
    // Need this to resume ads after clickthrough.
    adsManager.resume();
  });
  ...
}

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.SKIPPED,
      onAdEvent);
}

function onAdEvent(adEvent) {
  switch(adEvent.type) {
    ...
    case google.ima.AdEvent.Type.STARTED:
      currentAd = adEvent.getAd();
      if (currentAd.isUiDisabled()) {
        showCustomUi();
      }
      break;
    case google.ima.AdEvent.Type.COMPLETE:
    case google.ima.AdEvent.Type.SKIPPED:
      hideCustomUi();
      break;
  }
}

function showCustomUi() {
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  customUiDiv.style.display = 'none';
}

ज़्यादा जानें बटन में लॉजिक जोड़ें

ज़्यादा जानें बटन, सबसे पहले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट है. यह एलिमेंट क्लिक किए जाने पर, SDK टूल को इसकी सूचना देता है:

ads.js

let clickDiv;
...
function setUpIma() {
  ...
  clickDiv = document.getElementById('adClick');
  clickDiv.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    adsManager.clicked();
  });
  ...
}

काउंटडाउन टाइमर में लॉजिक जोड़ें

इसके बाद, बचे हुए समय की पोलिंग के लिए इस्तेमाल होने वाला काउंटडाउन टाइमर सेट अप करें विज्ञापनों में.

ads.js

let countdownDiv, uiUpdateInterval;
...
function setUpIma() {
  ...
  countdownDiv = document.getElementById('adCountdown');
  ...
}

function showCustomUi() {
  uiUpdateInterval = setInterval(updateUi, 100);
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  if (uiUpdateInterval) {
    clearInterval(uiUpdateInterval);
  }
  customUiDiv.style.display = 'none';
}

function updateUi() {
  updateCountdown();
}

function updateCountdown() {
  let countdownText = 'Ad ';
  const adPodInfo = currentAd.getAdPodInfo();
  const totalAds = adPodInfo.getTotalAds();
  if (totalAds > 1) {
    const position = adPodInfo.getAdPosition();
    countdownText += position + ' of ' + totalAds;
  }
  const remainingTime = Math.ceil(adsManager.getRemainingTime());
  countdownText +=  ' (' + remainingTime + 's)';
  countdownDiv.innerText = countdownText;
}

विज्ञापन छोड़ें बटन में लॉजिक जोड़ें

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

ads.js

let skipDiv;
// Set this infinitely high to fail early <=0 checks.
let timeTillSkip = Number.POSITIVE_INFINITY;
...
function setUpIma() {
  ...
  skipButton = document.getElementById('skipButton');
  skipButton.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    if (timeTillSkip <= 0) {
      adsManager.skip();
    }
  });
  ...
}

function showCustomUi() {
  if (currentAd.isSkippable()) {
    skipButton.innerText = '';
    skipButton.style.display = 'block';
  } else {
    skipButton.style.display = 'none';
  }
  ...
}

function updateUi() {
  updateCountdown();
  if (currentAd.isSkippable()) {
    updateSkip();
  }
}

function updateSkip() {
  const currentTime = currentAd.getDuration() - adsManager.getRemainingTime();
  timeTillSkip = Math.ceil(currentAd.getSkipTimeOffset() - currentTime);
  if (timeTillSkip > 0) {
    skipButton.innerText = "Skip this ad in " + timeTillSkip + '...';
    skipButton.style.cursor = 'default';
   } else {
    skipButton.innerText = "Skip ad";
    skipButton.style.cursor = 'pointer';
  }
}

समस्या का हल

क्या आपके पास कोई ऐसा सैंपल टैग है जिसे विज्ञापन के यूज़र इंटरफ़ेस (यूआई) को बंद करने के लिए चालू किया गया है?
आप इसका यूआरएल कॉपी कर सकते हैं टैग का नमूना और इसे IMA लागू करने के तरीके में चिपकाएं.
मैं डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) को बंद नहीं कर सकता.
यह पक्का करने के लिए जांच करें कि आपने adsRenderingSettings.disableUi को true पर सेट किया है और getAdsManager को पास कर देता है. यह देखने के लिए जांच करें कि ad.isUiDisabled() true दिखाता है. इसके अलावा, Ad Manager में अपने नेटवर्क का चालू होना ज़रूरी है, ताकि विज्ञापन यूज़र इंटरफ़ेस (यूआई) की इमेज. अगर आप चालू हैं, तो आपके वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) में एक Extension होता है, जो पसंद: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 अगर आपको अब भी समस्या आ रही है, तो अपने खाता मैनेजर से संपर्क करके पक्का करें कि आपने चालू किया हो. कुछ विज्ञापन टाइप के लिए खास यूज़र इंटरफ़ेस (यूआई) होना ज़रूरी है; ये विज्ञापन इसके साथ वापस आते हैं <UiHideable> की वैल्यू 0 है. अगर आपके सामने यह समस्या आती है, तो ट्रैफ़िकिंग टीम को इस तरह के विज्ञापन न दिखाएं, यह पक्का करने के लिए बदलाव करें.