前言
公司APP使用的Ionic,最近要求加入广告,试了Google Admob的插件,Google的插件只提供了Banner Ad,一直浮动在app上方的,和Interstitial Ad,全页覆盖式的弹出广告。效果都不是很好,领导要求实现Native自定义界面的那种,翻来翻去找不到可以用的插件,自己又菜得很写不来。最后用了Facebook Audience Network的一款插件,有一些缺陷,但是总算可以达到要求。
第一次在CSDN上写文章,主要给自己记个笔记,怕时间久了全都忘了,也给可能需要的人分享一下经验。
安装插件
首先创建项目我就不讲了,进入项目文件夹输入插件安装命令
ionic plugin add cordova-plugin-facebookads
之后看到项目中添加了
cordova-plugin-facebookads 4.23.2 "FacebookAds"
就ok了
添加代码
步骤很简单,首先在要引用的ts文件中声明,之后在平台准备好后使用插件的内置方法根据广告的特有ID创建广告,并且添加广告生成监听,获取广告内容,代码片段像下面这样
这里要注意生成广告时需要一个从Facebook申请的广告ID,每个广告位有个自己的ID,也可以申请测试的广告位
import {
Component, ViewChild } from '@angular/core';
import {
IonicPage, Content, Platform, NavController, NavParams} from 'ionic-angular';
declare var FacebookAds: any;//声明
@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public plt: Platform) {
}
ionViewDidLoad() {
var that = this;
setTimeout(function () {
that.plt.ready().then(() => {
console.log(FacebookAds)
FacebookAds.createNativeAd("[从Facebook申请的广告ID]", function () {
console.log("created")
document.addEventListener("onAdLoaded", function (data) {
let temp: any = data;
console.log(temp)
})
});
})
}, 1)
}
}
之后在前端创建一个显示广告的容器,因为请求下来的只是包含广告内容的JSON,所有样子可以随便你怎么定,之后往里面填数据就是了
<ion-card id="native">
<img src="" id="adCover" style="max-width: 100%;max-height: 20rem; height: auto;object-fit: cover;" />
<ion-card-content text-wrap>
<ion-item>
<ion-avatar item-left>
<img src="" id="adIcon" />
</ion-avatar>
<h2 id="adTitle"></h2>
<p id="adBody"></p>
</ion-item>
<ion-row>
<ion-col center text-left width-70 small style="font-size: x-small">
<span id="adSocialContext" small></span>
</ion-col>
<ion-col center text-right width-30>
<button ion-button small color="secondary" id="adBtn"></button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
准备好广告的容器之后就可以回头补上获取到内容之后的操作
import {
Component, ViewChild } from '@angular/core';
import {
IonicPage, Content, Platform, NavController, NavParams} from 'ionic-angular';
declare var FacebookAds: any;//声明
@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public plt: Platform) {
}
ionViewDidLoad() {
var that = this;
setTimeout(function () {
that.plt.ready().then(() => {
console.