本篇內(nèi)容主要講解“微信小程序怎么添加插屏廣告并設(shè)置顯示頻率”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序怎么添加插屏廣告并設(shè)置顯示頻率”吧!

插屏廣告
用戶觸發(fā)小程序中的特定場景時,插屏廣告將自動向用戶展現(xiàn),用戶可以隨時關(guān)閉插屏廣告。廣告觸發(fā)場景由流量主自定義,廣告按曝光計費(CPM)。
微信小程序今年新上線了插屏廣告,設(shè)置和在代碼庫中接入都非常方便。詳細(xì)可見微信小程序官方文檔。
大體的流程就是在小程序后臺新建廣告位,獲取到廣告位的adUnitId并嵌入到源代碼,因為插屏廣告的單頁面性,在頁面的onload處添加即可。
let interstitialAd = null;
if (wx.createInterstitialAd) {
interstitialAd = wx.createInterstitialAd({
adUnitId: 'adunit-ID'
})
}
if(interstitialAd) {
interstitialAd.show().catch((err) => {
console.error(err);
})
}嵌入廣告非常簡單,畢竟微信已經(jīng)將所有的接口寫好了,開發(fā)者僅需調(diào)用即可。
主要的功能點是設(shè)置一個插屏廣告一天只顯示一次,而微信并沒有提供這方面的api,秉持前端能完成的就不要麻煩后端,便想到直接使用緩存存儲當(dāng)期日期,用戶打開頁面的時候獲取上次緩存的日期查看是否相同即可。
//這里使用的是mpVue框架,寫在mounted里。
let nowday = new Date().getFullYear().toString() + (new Date().getMonth() + 1).toString() + new Date().getDate().toString() ;
//獲取上次打開頁面時間
try {
let lastDay = wx.getStorageSync('day');
if(lastDay) {
console.log('lastday', lastDay);
console.log('nowday', nowday)
if(lastDay == nowday) {
this.flag = false;
} else {
this.flag = true;
}
}
} catch (e) {
//用戶首次打開
this.flag = true;
console.error(e);
console.log('true no storage', this.flag)
}
if(interstitialAd && this.flag) {
interstitialAd.show().catch((err) => {
console.error(err);
})
}
interstitialAd.onLoad(() => {
try {
wx.setStorageSync('day', nowday);
console.log('存儲時間', nowday);
} catch (e) {
console.log('err', err)
}
})PS:下面看下一天只顯示一次的彈出廣告
仿京東官網(wǎng)頂部的廣告關(guān)閉,效果為第一次進(jìn)入官網(wǎng)會出現(xiàn)廣告,然后點擊關(guān)閉,刷新網(wǎng)頁不會再顯示廣告,但是當(dāng)清除localStorage存入的數(shù)據(jù),刷新網(wǎng)頁會再顯示廣告。
html代碼
<div class="header"> <div class="header-a"> <a href=""></a> <i class="close">x</i> </div> </div>
css代碼
.header{
width:100%;
height:80px;
background:#000;
}
.header-a{
width:1190px;
margin:0 auto;
position:relative;
background:url("images/1.jpg") no-repeat;
}
.header-a a{
width:100%;
height:80px;
display:block;
}
.close{
cursor:pointer;
color:#fff;
position:absolute;
top:5px;
right:5px;
background:rgb(129, 117, 117);
width: 20px;
text-align: center;
line-height: 20px;
}js代碼
//localStorage方法
<script src="../js/jquery.min.js"></script>
function popAd(){
//判斷l(xiāng)ocalStorage里有沒有isClose
if(localStorage.getItem("isClose")){
$(".header").hide();
}else{
$(".header").show();
}
//點擊關(guān)閉隱藏圖片存取數(shù)據(jù)
$(".close").click(function(){
$(".header").fadeOut(1000);
localStorage.setItem("isClose", "1");
})
}
popAd();chrome console清本地緩存localStorage.clear()
批量清:
localStorage.clear()
單獨清除某個記錄的緩存,如:
localStorage.clear("popup_info") 或 localStorage.removeItem("popup_info");到此,相信大家對“微信小程序怎么添加插屏廣告并設(shè)置顯示頻率”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)建站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
當(dāng)前名稱:微信小程序怎么添加插屏廣告并設(shè)置顯示頻率-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://chinadenli.net/article22/dphpcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、網(wǎng)站營銷、做網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容