Hi. I just finished my Ionic app and now I want to add some ads. I’ve installed the plugin for Facebook ads but I’m having some problems.
- The interstitial is loaded even if I’m outside the app. This is very bad.
- If one interstitial is loaded and I wait another 2 minutes, another interstitial is loaded over the 1st. ( I load the interstitial at each 2 minutes )
I’ve added the code in app.component.ts
declare var FacebookAds: any;
platform.ready().then(() => {
setInterval( () => {
if(FacebookAds)
{
let options = {
adId: 'native_code_id'
};
FacebookAds.prepareInterstitial(options, function(data){
FacebookAds.showInterstitial();
}, function(err){})
}
}, 1000 * 60 * 2);
});
- Native ads is looking bad until it loads. How can I make the div visible only when ad is ready.
start: any = 0;
if(FacebookAds) {
FacebookAds.createNativeAd('native_code_id');
this.start = 1;
}
document.addEventListener("onAdLoaded", function(data){
let temp: any = data;
if(temp.adType == "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;
}
});
and in home/id.html
<span id="native" *ngIf="start != 0">
<ion-card>
<img src="" id="adCover" style="max-width: 100%; height: auto;" />
<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="primary" id="adBtn"></button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</span>
4. I wanted to add the code in app.component.ts once for native ads and to use it everywhere in my app. How it’s possible? Right now I’m using it only on specific view. Also right now I’m facing another problem. If I go from home.html to home/id.html is working but if I go from /home/id.html to home/id2.html the ad is not working. It appears like in the
top image .
Thank you!
I’m using facebook ads on my website also.