Ionic-v3中实现Facebook Audience Network中的Native Ads

Ionic-v3中实现Facebook Audience Network中的Native Ads

• 前言
• 安装插件
• 添加代码
• 结束

前言

公司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.log(FacebookAds)
        FacebookAds.createNativeAd("[从Facebook申请的广告ID]", function () {
          console.log("created")
          document.addEventListener("onAdLoaded", function (data) {
            let temp: any = data;
            console.log(temp)
            if (temp.adType == "native") {//判断到Native广告后将内容一一填写进容器里
              document.getElementById("adIcon").setAttribute("src", temp.adRes.icon.url)
              document.getElementById("adCover").setAttribute("src", temp.adRes.coverImage.url)
              document.getElementById("adTitle").innerHTML = temp.adRes.title;
              document.getElementById("adBody").innerHTML = temp.adRes.body;
              document.getElementById("adSocialContext").innerHTML = temp.adRes.socialContext;
              document.getElementById("adBtn").innerHTML = temp.adRes.buttonText;
            }
          })
        });
      })
    }, 1)
  }
}

到这里我们的广告就可以显示出来了，但是还有一个问题，也是这个插件使用时的缺陷，就是目前我们的广告并无法实现点击跳转这个功能

插件中有一个方法FacebookAds.setNativeAdClickArea()提供点击广告的跳转，但这个方法需要你提供坐标以及宽高，无法绑定在我们准备的容器上，并且永远浮动在APP的最上层，会导致像是误触发等一系列问题，要解决这些我们需要实时更新广告点击区域的坐标以及宽高，并且将不需要点击的时候进行特殊判断

因为本人的菜，这个问题困扰了我一段时间，主要是一直找不到元素相对于整个APP的Y轴坐标，导致点击区域总是不能跟随容器滚动或者是有偏差，哎，总之就是对于各个属性了解不够透彻，多亏在网上看到了这位大哥的帖子，解决了这个难题
在文件中加入下面方法，用来实时获取并更新点击区域的位置

  updateXY(left, top, addClick) {
    var x, y, w, h;
    var headerHeight = 0;
    //获取元素宽高位置
    headerHeight = document.getElementById("native").clientHeight;
    x = document.getElementById("native").offsetLeft - left;
    y = this.getElementToPageTop(document.getElementById("native")) - top;
    w = document.getElementById("native").clientWidth;
    h = document.getElementById("native").clientHeight;
    /*这里因为APP中还有一个导航栏和下方的工具栏，在这些地方都不应该相应广告的点击事件，
    所以还需要在这些地方重新计算一下高度和坐标*/
    var windowHeight = window.innerHeight
    console.log(h)
    h = windowHeight - y > document.getElementById("native").clientHeight ? h : windowHeight - y - 50;
    h = y <= 50 ? h - (50 - y) : h;
    y = y <= 50 ? 50 : y;
	/*
	这部分是因为这个插件必须要build出来才能看到广告，所以为了方便直观的看到现在广告的
	点击区域在哪，添加了一个元素
    document.getElementById("showClickableArea").style.width = w + "px";
    document.getElementById("showClickableArea").style.height = h + "px";
    document.getElementById("showClickableArea").style.top = y + "px";
    document.getElementById("showClickableArea").style.left = x + "px";
	*/

	//在广告容器超出可视范围时整体消除
    if (addClick && y <= window.innerHeight && h > 0) {
      FacebookAds.setNativeAdClickArea('564750931012716_564751944345948', x, y, w, h)
    } else {
      FacebookAds.setNativeAdClickArea('564750931012716_564751944345948', 0, 0, 0, 0)
    }

  }
    getElementToPageTop(el) {//从大佬学到的一个使用递归获取元素相对整个界面位置的方法
    if (el.parentElement) {
      return this.getElementToPageTop(el.parentElement) + el.offsetTop
    }
    return el.offsetTop
  }

到这里为止差不多就搞定了，另外要注意的就是如果切换页面，点击区域也会一直存在在APP最上方，所以离开页面时也要把点击区域去掉，最后把方法绑定在初始和页面滚动事件上，整体代码差不多就是下面这个样子

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 {
  @ViewChild(Content) content: Content;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public plt: Platform) {
     this.plt.ready().then(() => {
      this.content.ionScroll.subscribe((data) => {//页面滚动时更新
        this.updateXY(data.scrollLeft, data.scrollTop, true);
      })
    })
  }
    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)
            if (temp.adType == "native") {//判断到Native广告后将内容一一填写进容器里
              document.getElementById("adIcon").setAttribute("src", temp.adRes.icon.url)
              document.getElementById("adCover").setAttribute("src", temp.adRes.coverImage.url)
              document.getElementById("adTitle").innerHTML = temp.adRes.title;
              document.getElementById("adBody").innerHTML = temp.adRes.body;
              document.getElementById("adSocialContext").innerHTML = temp.adRes.socialContext;
              document.getElementById("adBtn").innerHTML = temp.adRes.buttonText;
              that.updateXY(0, 0, false)//初始化结束后更新坐标和宽高
            }
          })
        });
      })
    }, 1)
  }
   ionViewDidLeave() {
   //离开页面时把点击区域去掉
    FacebookAds.setNativeAdClickArea('564750931012716_564751944345948', 0, 0, 0, 0)
  }
    updateXY(left, top, addClick) {
    var x, y, w, h;
    var headerHeight = 0;
    //获取元素宽高位置
    headerHeight = document.getElementById("native").clientHeight;
    x = document.getElementById("native").offsetLeft - left;
    y = this.getElementToPageTop(document.getElementById("native")) - top;
    w = document.getElementById("native").clientWidth;
    h = document.getElementById("native").clientHeight;
    /*这里因为APP中还有一个导航栏和下方的工具栏，在这些地方都不应该相应广告的点击事件，
    所以还需要在这些地方重新计算一下高度和坐标*/
    var windowHeight = window.innerHeight
    console.log(h)
    h = windowHeight - y > document.getElementById("native").clientHeight ? h : windowHeight - y - 50;
    h = y <= 50 ? h - (50 - y) : h;
    y = y <= 50 ? 50 : y;
	/*
	这部分是因为这个插件必须要build出来才能看到广告，所以为了方便直观的看到现在广告的
	点击区域在哪，添加了一个元素
    document.getElementById("showClickableArea").style.width = w + "px";
    document.getElementById("showClickableArea").style.height = h + "px";
    document.getElementById("showClickableArea").style.top = y + "px";
    document.getElementById("showClickableArea").style.left = x + "px";
	*/

	//在广告容器超出可视范围时整体消除
    if (addClick && y <= window.innerHeight && h > 0) {
      FacebookAds.setNativeAdClickArea('564750931012716_564751944345948', x, y, w, h)
    } else {
      FacebookAds.setNativeAdClickArea('564750931012716_564751944345948', 0, 0, 0, 0)
    }

  }
    getElementToPageTop(el) {//从大佬学到的一个使用递归获取元素相对整个界面位置的方法
    if (el.parentElement) {
      return this.getElementToPageTop(el.parentElement) + el.offsetTop
    }
    return el.offsetTop
  }
}

Html页面

<ion-content no-padding>
 <ion-card>
       <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>
  <ion-card>
       <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>
  <ion-card>
       <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>
  <ion-card>
       <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>
  <ion-card>
       <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>
 <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>
   <ion-card>
       <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>
  <ion-card>
       <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>
  <ion-card>
       <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>
  <ion-card>
       <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>
</ion-content>

结束

来源：CSDN

作者：kaienss

链接：https://blog.csdn.net/kaienss/article/details/103966978