Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to add screen ads and set the display frequency for WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs how to add screen ads and set the display frequency" bar!

Plug-in advertisement

When the user triggers a specific scene in Mini Program, the plug-in advertisement will be automatically displayed to the user, and the user can turn off the plug-in advertisement at any time. The advertisement trigger scenario is customized by the traffic master, and the advertisement is billed by exposure (CPM).

WeChat Mini Programs has launched a new plug-in advertisement this year, which is very convenient to set up and access in the code base. For details, please see the official document of WeChat Mini Programs.

The general process is to create a new advertising space in the background of Mini Program, get the adUnitId of the advertising space and embed it into the source code, because of the single page of the plug-in advertisement, you can add it at the onload of the page.

Let interstitialAd = null;if (wx.createInterstitialAd) {interstitialAd = wx.createInterstitialAd ({adUnitId: 'adunit-ID'})} if (interstitialAd) {interstitialAd.show () .catch ((err) = > {console.error (err);})}

Embedding ads is very easy. After all, Wechat has written all the interfaces, and developers only need to call them.

The main function point is to set up a screen plug-in ad to be displayed only once a day, and Wechat does not provide this aspect of api, adhering to the front end can complete do not bother the backend, they think of directly using the cache to store the current date, the user opens the page to get the last cached date to see if it is the same.

/ / the mpVue framework is used here, which is written in mounted. Let nowday = new Date (). GetFullYear (). ToString () + (new Date (). GetMonth () + 1). ToString () + new Date (). GetDate (). ToString (); / / get the last time the page was opened: 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) {/ / user opens this.flag = true; console.error (e) for the first time; 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 ('storage time', nowday) } catch (e) {console.log ('err', err)}})

PS: let's take a look at the pop-up ads that only show once a day.

The advertisement at the top of JD.com 's official website is closed, and the effect is that the advertisement will appear when you enter the official website for the first time, and then click close, and the refresh page will no longer display the advertisement, but when you clear the data stored in localStorage, the refresh page will display the advertisement again.

Html code

X

Css code

.header {width:100%; height:80px; background:#000;}. Header-a {width:1190px; margin:0 auto; position:relative; background:url ("images/1.jpg") no-repeat;}. Header-an 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 code

/ / localStorage method function popAd () {/ / determine whether isClose if (localStorage.getItem ("isClose")) {$(".header") {hide ();} else {$(".header"). Show ();} / / Click to close the hidden image access data $(".close") .click (function () {$(".header") .fadeOut (1000); localStorage.setItem ("isClose", "1") })} popAd ()

Chrome console clears the local cache localStorage.clear ()

Batch clearance:

LocalStorage.clear ()

Clear the cache of a record separately, such as:

LocalStorage.clear ("popup_info") or localStorage.removeItem ("popup_info"); at this point, I believe you have a better understanding of "how to add screen ads and set the display frequency of WeChat Mini Programs". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.