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

最新推荐文章于 2021-07-13 15:19:11 发布

kaienss

最新推荐文章于 2021-07-13 15:19:11 发布

阅读量372

点赞数

文章标签： js typescript 前端 npm angular

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

版权

本文介绍了如何在使用Ionic v3构建的APP中实现Facebook Audience Network的Native Ads，包括安装插件、添加代码以显示自定义界面广告，并解决广告点击跳转的问题。作者分享了在实现过程中遇到的挑战和解决方案，如动态更新广告点击区域坐标，以及在页面切换时的管理策略。

摘要由CSDN通过智能技术生成

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.