Facebook Native Ads: Ionic 2

Today lets implement Facebook Audience Network’s Native Advertisement in our Ionic 2 application.

Why Native Ad Unit?
A native ad is a custom designed unit that fits seamlessly with your app. If done well, ads can blend in naturally with your interface.

The unique feature of native ads is that they should balance your app’s experience while protecting the integrity of advertisers’ assets.

Related Read: Facebook Banner and Interstitial Ads: Ionic 2

We’ve installed a blank template for this tutorial

ionic start technotip blank --v2

We create a Ionic 2 project by name ‘technotip’ with blank template.

Related Read: Ionic 2 Starter Templates

Audience Network’s Native Ads: Ionic 2

Package version information:

C:\ionic2\technotip>ionic info

Your system information:

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

Steps To Follow
Step 1: Install FacebookAds plugin
Step 2: Add Platform
Step 3: Implement Facebook Audience Network’s Native Ad into your Ionic 2 project
Step 4: Install your Ionic 2 app to your device to test Facebook Audience Network’s ads.

Note: Make sure to navigate to your ionic 2 project folder before executing any commands.
Example: Our Ionic 2 project name is ‘technotip’, which is inside a folder called ionic2. So I execute all commands once I get inside our project folder.

C:\>cd ionic2
C:\ionic2>cd technotip
C:\ionic2\technotip>ionic serve -l -c

Step 1: Install FacebookAds plugin

ionic plugin add cordova-plugin-facebookads

This installs FacebookAds plugin to our Ionic 2 project.

Step 2: Add Platform

ionic platform add android

OR

ionic platform add ios

If you are developing ios app, than add ios platform(for this, you must be on a Mac). If you’re developing android app, then add android as platform. If you face any difficulty with this step or in installing Ionic framework, please refer to Ionic 2 Starter Templates video tutorial.

Step 3: Implement Facebook Ads into your Ionic 2 project

Native Advertisement

src/pages/home/home.ts

    platform.ready().then(() => {
      if(FacebookAds)
      {
        FacebookAds.createNativeAd('763416880384578_1139417452784517');
        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;
        }

      });

    });

Pass-in native ad units adId to createNativeAd() method. Now add a listener to onAdLoaded event. This event emits bunch of ad data, which we capture and embed into our view.

Here is the data structure(with Facebook Native Test Ad Data) of the emitted data.

 {
    "isTrusted":false,
    "adNetwork":"FacebookAds",
    "adEvent":"onAdLoaded",
    "adType":"native",
    "adId":"763416880384578_1139417452784517",
    "adRes":{"title":"Facebook Test Ad",
             "socialContext":"Get it on Google Play",
             "buttonText":"Install Now",
             "body":"Your ad integration works. Woohoo!",
             "coverImage":{ "url":"https://www.facebook.com/images/ads/network/test_video_banner.png",
                            "width":414,
                            "height":232},
             "icon":{"url":"https://scontent.xx.fbcdn.net/hphotos-xaf1/t39.3079-6/851551_836527893040166_1350205352_n.png",
                     "width":128,
                     "height":128
                     }
             }
}

We check to see if it is a native ad data. If so, we’ll further fetch and assign ad elements to view elements using Javascript.

Full Source Code: src/pages/home/home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Platform } from 'ionic-angular';

declare var FacebookAds: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

 start: any = 0;

  constructor(public navCtrl: NavController, platform: Platform) {
    platform.ready().then(() => {
      if(FacebookAds)
      {
        FacebookAds.createNativeAd('763416880384578_1139417452784517');
        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;
        }

      });

    });
  }
}

Make sure to have global declaration of FacebookAds variable.

View Code: src/pages/home/home.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">
          < p id="adBody">
        < /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>
  < /span>

Here am adding a simple ion-card item with cover image and ion-avatar. We’ve added id’s to each of the elements and will fill the value once the ad data is emitted by onAdLoaded event.

Important Note: This is part 1 of implementing Native Ad. Next we need to implement Clickable area of the ad by using setNativeAdClickArea(adId, x, y, w, h) method. If anyone of you have implemented the Clickable area code for Native Ad, then kindly share your knowledge in the comment section – that would help a lot of us.

I’ve implemented Facebook Native Ads Clickable Area: Ionic 2.

Step 4: Install your Ionic 2 app to your device to test Facebook Audience Network ads

ionic run android -l -c

If you include -l and -c options while installing the project to your device, then you’ll get the live reload and log facility. But you need to be connected to the same network as your terminal where you’re ionic 2 project is running. For Example: Same WiFi for your device as well as your terminal. If your computer is using WiFi and your mobile is using service providers Data connection then this won’t work – in such case use ionic run android command, and you won’t get live reload and log information in the terminal.

Troubleshoot
If you’re getting following errors:
cordova_not_found

OR

int org.json.JSONObject.length() on null

Check these 3 things:
1. You’ve installed proper plugin. Check using ionic plugin list command.
2. You’ve declared FacebookAds variable at the top of the component file.
3. You’ve wrapped the plugins service code inside platform.ready() method.

If all above 3 conditions are set right, then try this:

Remove platform and add it once again.

ionic platform rm android

ionic platform add android

Now install the project ionic run android -l -c to your device and check.

Important Note: Most Ionic plugins work only on the real devices, so do not try to test it using browsers.

I’ve implemented Facebook Native Ads Clickable Area: Ionic 2.