Month: April 2020

At the end of this tutorial, you will be able to use google plus plugin in your ionic 4 application. We will use google plus Cordova plugin and firebase to use this feature in our app.

Installation

Install the Cordova plugin to your ionic 4 application
Step 1 – ionic Cordova plugin add Cordova-plugin-google plus
Step 2- npm install @ionic-native/google-plus

After installing the plugin to your ionic 4 apps, you should create a firebase account, and create an application. In the authentication, section enables Google sign in for your application.

Once enabled it will let you download the google-service.jsonconfiguration file, you’ll store this file in your project’s root, right next to the package.json file.

There are two certificates you’ll need, one for production and one for development, in this tutorial we’ll get the development certificate sign-in, and in the end, I’ll show you where to get the production one.

$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Enter the password and you will get the SHA 1 Key, please use this key in firebase. Else you will get the Error 10 while debugging.
For the production environment, you must generate the key and use the sha1 key in your firebase application to enable google sign in.

Download the google-services.json and put this file to the root folder of your application. Now its time to write some code.

Import GooglePlus module to app.module.ts
import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

 constructor(
    private GooglePlus: GooglePlus,
  ) {}

//For login 
 this.GooglePlus.login({})
      .then((res:any) => {
You will get the response.
      })
      .catch((err) => console.error(err));

//For logout  
this.GooglePlus
          .trySilentLogin({
            offline: false,
          })
          .then((res: any) => {
            console.log(res);
            this.google.logout().then(
              (res: any) => {
                console.log(res);
              },
              (err) => console.log(err)
            );
          });

Thank Note

First of all thank you for giving me your time and attention, if you’re experiencing any issues please comment.

At the end of this tutorial, you will learn how to use AdMob in your ionic 4 application. You will be able to use banners, interstitial and rewards video and add those to your application. We will use an AdMob free plugin to show ads in our application.

On every step please create a new app or if you have your app ready and in a working state, install below plugin.

Install Ionic 4 Admob Plugin

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

Please use these sample ad units for test ads, clicking your ads for testing is prohibited and may lead to suspension of your account.

Ad format	Sample ad unit ID
Banner	ca-app-pub-3940256099942544/6300978111
Interstitial	ca-app-pub-3940256099942544/1033173712
Interstitial Video	ca-app-pub-3940256099942544/8691691433
Rewarded Video	ca-app-pub-3940256099942544/5224354917
Native Advanced	ca-app-pub-3940256099942544/2247696110
Native Advanced Video	ca-app-pub-3940256099942544/1044960115

If you want to use rewards video, you must install a plugin for the mediation network. Use below command to install the plugin
cordova plugin add cordova-admob-inmobi --save

Lets Start Coding

Declare a global variable
declare var plugins;

Now we can access the admob using plugins.Admob and start writing the code.

 plugins.AdMob.rewardvideo.config({
    id: "ca-app-pub-3940256099942544/5224354917",
    isTesting: true,
    autoShow: true,
  });
plugins.AdMob.rewardvideo.prepare().then(res=> {console.log(res)

  plugins.AdMob.rewardvideo.show().then(
    (res) => console.log(res),
    (err) => console.log(err)
  );}
,err=> console.log(err))

  document.addEventListener("admob.rewardvideo.events.LOAD", () => {
      console.log("LOAD A REWARD HERE");
    });
    document.addEventListener("admob.rewardvideo.events.START", () => {
      console.log("START REWARD HERE");
    });
    document.addEventListener("admob.rewardvideo.events.CLOSE", () => {
      console.log("CLOSE A HERE");
    });
    document.addEventListener("admob.rewardvideo.events.REWARD", () => {
      console.log("REWARD A HERE");
    });
     document.addEventListener("admob.rewardvideo.events.COMPLETE", () => {
       console.log("complete A HERE");
     });

For Interstitial Ads
 //   plugins.AdMob.interstitial.config({
  //  id: 'ca-app-pub-3940256099942544/5224354917',
  // })
 
  // plugins.AdMob.interstitial.prepare()
 
  // plugins.AdMob.interstitial.show()

Use the above events to perform your actions. The reward video events like REWARD, CLOSE shall be used to perform the actions based on user inputs. In your reward events, you can give rewards to your users, and many more.

Similarly you can use banners and interstitial in place of reward to show other ads.

You can visit other tutorials at http://ionicwhiz.in/ionic

Common Erros

Rewards Video not showing in test mode/ production mode.

Please use the above configuration and I hope you will succed, in case you are facing some other troubles, please comment and let me know. I would be happy to help you.