QQ小游戲 廣告

Banner 廣告

Banner 廣告組件是由客戶端原生的圖片、文本控件組成的原生組件，層級最高，會覆蓋在上屏 Canvas 上。 開發(fā)者可以調(diào)用 qq.createBannerAd 創(chuàng)建 Banner 廣告組件。Banner 廣告組件在創(chuàng)建后會自動拉取廣告數(shù)據(jù)并進(jìn)行渲染，開發(fā)者只需要控制 Banner 廣告組件的位置和顯示/隱藏即可。

const bannerAd = qq.createBannerAd({
  adUnitId: "xxxx",
  style: {
    width: 320
  }
});


bannerAd.onResize(size => {
  // 底部居中顯示
  bannerAd.style.top = windowHeight - size.height;
  bannerAd.style.left = (windowWidth - size.width) / 2;


  bannerAd
    .show()
    .then(() => {
      console.log("show ok");
    })
    .catch(res => {
      console.log("show error", res);
    });
});

顯示/隱藏

Banner 廣告組件默認(rèn)是隱藏的，需要調(diào)用 BannerAd.show() 進(jìn)行顯示。

bannerAd.show();

當(dāng)切換到?jīng)]有 Banner 廣告組件的場景或頁面時，調(diào)用 BannerAd.hide() 隱藏 Banner 廣告組件。

bannerAd.hide();

廣告拉取成功與失敗

BannerAd 在創(chuàng)建后會拉取廣告。如果拉取失敗，通過 BannerAd.onError() 注冊的回調(diào)函數(shù)會執(zhí)行，回調(diào)函數(shù)的參數(shù)是一個包含錯誤信息的對象。

bannerAd.onError(err => {
  console.log(err);
});

BannerAd.show() 返回的 Promise 也會是一個 rejected Promise。

bannerAd.show().catch(err => console.log(err));

反之，如果拉取成功。BannerAd.onLoad() 會執(zhí)行，BannerAd.show() 返回的 Promise 也會是一個 resolved Promise。兩者的回調(diào)函數(shù)中都沒有參數(shù)傳遞。

bannerAd.onLoad(() => {
  console.log("banner 廣告加載成功");
});


bannerAd.show().then(() => console.log("banner 廣告顯示"));

onResize

開發(fā)者在創(chuàng)建 BannerAd 時設(shè)置寬高，也可以在創(chuàng)建后設(shè)置。

const bannerAd = qq.createBannerAd({
  adUnitId: "xxxx",
  style: {
    left: 10,
    top: 76,
    width: 320
  }
});


bannerAd.show();
bannerAd.style.width = 400;

Banner 廣告組件的尺寸會根據(jù)開發(fā)者設(shè)置的寬度，即 style.width 進(jìn)行等比縮放，縮放的范圍是 300 到 屏幕寬度。屏幕寬度是以邏輯像素為單位的寬度，通過 qq.getSystemInfoSync() 可以獲取到。

const { screenWidth } = qq.getSystemInfoSync();

當(dāng) style.width 小于 300 時，會取作 300。 當(dāng) style.width 大于屏幕寬度時，會取作屏幕寬度。 在組件內(nèi)部會以此值為基準(zhǔn)，根據(jù) Banner 廣告的標(biāo)準(zhǔn)尺寸，進(jìn)行縮放。 每當(dāng)縮放發(fā)生且縮放后的尺寸不同時，通過 BannerAd.onResize() 注冊的回調(diào)函數(shù)就會執(zhí)行?；卣{(diào)函數(shù)的參數(shù)是一個包含 BannerAd 縮放后的寬和高的對象。BannerAd 的 style.realWidth 和 style.realHeight 到經(jīng)過縮放后的寬和高。

bannerAd.onResize(res => {
  console.log(res.width, res.height);
  console.log(bannerAd.style.realWidth, bannerAd.style.realHeight);
});

如果在 onResize 的回調(diào)函數(shù)中重設(shè) width 且總是與上一次縮放后的 width 不同，那么可能會導(dǎo)致 onResize 的回調(diào)函數(shù)一直觸發(fā)，并卡死在 onResize 的回調(diào)函數(shù)中。

bannerAd.onResize(res => {
  bannerAd.style.width = res.width + Math.random() * 10;
});

創(chuàng)建新的 BannerAd，銷毀舊的 BannerAd 每個 BannerAd 實例在創(chuàng)建后會去拉取一次廣告數(shù)據(jù)并進(jìn)行渲染，在此之后不再更新。如果想要展示其他內(nèi)容的 BannerAd，需要創(chuàng)建新的 BannerAd 并將之前的 BannerAd 進(jìn)行銷毀。 如果不對廢棄的 BannerAd 進(jìn)行銷毀，則會導(dǎo)致其上的事件監(jiān)聽器無法釋放。當(dāng)沒有釋放的 BannerAd 積累過多時，將會產(chǎn)生性能問題。

oldBannerAd.destroy();
const newBannerAd = qq.createBannerAd({
  // ...
});
newBannerAd.show();

激勵視頻廣告

激勵視頻廣告組件是由客戶端原生的圖片、文本、視頻控件組成的，層級最高，會覆蓋在上屏 Canvas 上。 開發(fā)者可以調(diào)用 qq.createRewardedVideoAd 創(chuàng)建激勵視頻廣告組件。該方法返回的是一個全局單例。

const video1 = qq.createRewardedVideoAd({ adUnitId: "xxxx" });
const video2 = qq.createRewardedVideoAd({ adUnitId: "xxxx" });
console.log(video1 === video2);
// true

激勵視頻廣告組件默認(rèn)是隱藏的，因此可以提前創(chuàng)建，以提前初始化組件。

const rewardedVideoAd = qq.createRewardedVideoAd({ adUnitId: "xxxx" });

為避免濫用廣告資源，目前每個用戶每天可觀看激勵式視頻廣告的次數(shù)有限，建議展示廣告按鈕前先判斷廣告是否拉取成功。

顯示/隱藏

激勵視頻廣告組件默認(rèn)是隱藏的，需要調(diào)用 RewardedVideoAd.show() 進(jìn)行顯示。

bannerAd.show();

只有在用戶點擊激勵視頻廣告組件上的 關(guān)閉廣告 按鈕時，廣告才會關(guān)閉。開發(fā)者不可控制激勵視頻廣告組件的隱藏。

廣告拉取成功與失敗

激勵視頻廣告組件是自動拉取廣告并進(jìn)行更新的。在組件創(chuàng)建后會拉取一次廣告，用戶點擊 關(guān)閉廣告 后會去拉取下一條廣告。 如果拉取成功。RewardedVideoAd.onLoad() 會執(zhí)行，RewardedVideoAd.show() 返回的 Promise 也會是一個 resolved Promise。兩者的回調(diào)函數(shù)中都沒有參數(shù)傳遞。

rewardedVideoAd.onLoad(() => {
  console.log("激勵視頻 廣告加載成功");
});


rewardedVideoAd.show().then(() => console.log("激勵視頻 廣告顯示"));

如果拉取失敗，通過 RewardedVideoAd.onError() 注冊的回調(diào)函數(shù)會執(zhí)行，回調(diào)函數(shù)的參數(shù)是一個包含錯誤信息的對象。常見異常錯誤參考文檔。

rewardedVideoAd.onError(err => {
  console.log(err);
});

RewardedVideoAd.show() 返回的 Promise 也會是一個 rejected Promise。

rewardedVideoAd.show().catch(err => console.log(err));

拉取失敗，重新拉取

如果組件的某次自動拉取失敗，那么之后調(diào)用的 show() 將會被 reject。此時可以調(diào)用 RewardedVideoAd.load() 手動重新拉取廣告。

rewardedVideoAd.show().catch(err => {
  rewardedVideoAd.load().then(() => rewardedVideoAd.show());
});

如果組件的自動拉取是成功的，那么調(diào)用 load() 方法會直接返回一個 resolved Promise，而不會去拉取廣告。

rewardedVideoAd.load().then(() => rewardedVideoAd.show());

監(jiān)聽用戶關(guān)閉廣告

只有在用戶點擊激勵視頻廣告組件上的 關(guān)閉廣告 按鈕時，廣告才會關(guān)閉。這個事件可以通過 RewardedVideoAd.onClose() 監(jiān)聽。 RewardedVideoAd.onClose() 的回調(diào)函數(shù)會傳入一個參數(shù) res，res.isEnded 描述廣告被關(guān)閉時的狀態(tài)。