cordova-facebook-ads Native Banner

post.component.ts

ionViewDidEnter(){
    this.initFacebookAds();
  };

  ionViewDidLeave(){
    if (!this.platform.is('cordova')) return;
    FacebookAds.removeNativeAd('112713919406063_117179372292851');  
  };

  initFacebookAds() {
    if (!this.platform.is('cordova')) return;

    // Native ads
    this.platform.ready().then(() => {
      if(!FacebookAds) return;

      console.log('FacebookAds', FacebookAds);
      this.registerEvents();

      FacebookAds.setOptions({
        isTesting: false
      });

      FacebookAds.createNativeAd('112713919406063_117179372292851', function(addata) {
        console.log("createNativeAd", addata);
      }, function(err) { console.log(JSON.stringify(err)); });

    });

  }

  updateXY(left, top){
    console.log("updateXY:", left, top);

    var d;
    var h, w, x, y;
    d = document.getElementById('native');
    w = document.getElementById('native').clientWidth;
    h = document.getElementById('native').clientHeight;
    x = d.offsetLeft - left;
    y = d.offsetTop - top + 56; // 56 = header height

    console.log("offets x, y, w, h", x, y, w, h);
    console.log("native ID2:", this.nativeId);
    
    FacebookAds.setNativeAdClickArea('112713919406063_117179372292851', x, y, w, h); //test add: 107167926633248_116656009017773
  }

  registerEvents() {
    var self: any = this;

    document.addEventListener('onAdFailLoad', function(data) {
      console.log("onAdFailLoad", data);
    });

    document.addEventListener('onAdLoaded', function(data) {
      console.log("onAdLoaded", data);
      self.showFbNative(data);
    });

    document.addEventListener('onAdPresent', function(data) {
      console.log("onAdPresent", data);
    });
    document.addEventListener('onAdLeaveApp', function(data) {
      console.log("onAdLeaveApp", data);
    });
    document.addEventListener('onAdDismiss', function(data) {
      console.log("onAdDismiss", data);
    });

    this.content.ionScroll.subscribe((data) => { 
      this.updateXY(data.scrollLeft, data.scrollTop);
    });
  }


  showFbNative(data) {
    var self: any = this;

    console.log("showFbNative", data);
    if(data.adType == "native") {
      console.log("data nativeId", data.adId);
      document.getElementById('adIcon').setAttribute("src", decodeURIComponent(data.adRes.icon.url));
      document.getElementById('adCover').setAttribute("src", decodeURIComponent(data.adRes.coverImage.url));
      document.getElementById('adTitle').innerHTML = data.adRes.title;
      document.getElementById('adBody').innerHTML = data.adRes.body;
      document.getElementById('adSocialContext').innerHTML = data.adRes.socialContext;
      document.getElementById('adBtn').innerHTML = data.adRes.buttonText;

      self.updateXY(0, 0);
    }
  }