📦 ionic-team / ionic-docs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225---
sidebar_label: 'AdMob'
---

import DocsCard from '@components/global/DocsCard';
import DocsButton from '@components/page/native/DocsButton';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';

# AdMob

Most complete Admob plugin with support for [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads.
Monetize your apps and games with AdMob ads, using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!

**Supports:**

- Banner ads (top and bottom)
- Interstitial ads
- Rewarded ads
- [Tappx](http://www.tappx.com/?h=dec334d63287772de859bdb4e977fce6) ads

<p>
  <a href="https://github.com/appfeel/admob-google-cordova" target="_blank" rel="noopener" className="git-link">github.com/appfeel/admob-google-cordova</a>
</p>

<h2>Stuck on a Cordova issue?</h2>
<DocsCard
  className="cordova-ee-card"
  header="Don't waste precious time on plugin issues."
  href="https://ionicframework.com/sales?product_of_interest=Ionic%20Native"
>
  <div>
    <img src="/docs/icons/native-cordova-bot.png" className="cordova-ee-img" />
    <p>If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.</p>
    <DocsButton className="native-ee-detail">Contact Us Today!</DocsButton>
  </div>
</DocsCard>

<h2 id="installation">
  <a href="#installation">Installation</a>
</h2>
<Tabs
  groupId="runtime"
  defaultValue="Capacitor"
  values={[
    { value: 'Capacitor', label: 'Capacitor' },
    { value: 'Cordova', label: 'Cordova' },
    { value: 'Enterprise', label: 'Enterprise' },
  ]}
>
  <TabItem value="Capacitor">
    <CodeBlock className="language-shell">
      $ npm install cordova-admob {'\n'}$ npm install @awesome-cordova-plugins/admob {'\n'}$ ionic cap sync
    </CodeBlock>
  </TabItem>
  <TabItem value="Cordova">
    <CodeBlock className="language-shell">
      $ ionic cordova plugin add cordova-admob {'\n'}$ npm install @awesome-cordova-plugins/admob {'\n'}
    </CodeBlock>
  </TabItem>
  <TabItem value="Enterprise">
    <blockquote>
      Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. &nbsp;
      <a className="btn" href="https://ionic.io/docs/premier-plugins">Learn More</a> or if you're interested in an enterprise version of this plugin <a className="btn" href="https://ionicframework.com/sales?product_of_interest=Ionic%20Enterprise%20Engine">Contact Us</a>
    </blockquote>
  </TabItem>
</Tabs>

## Supported Platforms

- Android
- iOS
- Browser

## Usage

### React

[Learn more about using Ionic Native components in React](../native-community.md#react)

### Angular

**Note:** No ads will be served on apps with package name `io.ionic.starter`. This is the default package name for new `ionic` apps. Make sure to rename the package name so ads can be displayed.

```tsx
import { Admob, AdmobOptions } from '@awesome-cordova-plugins/admob';


constructor(private admob: Admob) {
    // Admob options config
    const admobOptions: AdmobOptions = {
      bannerAdId: 'XXX-XXXX-XXXX',
      interstitialAdId: 'XXX-XXXX-XXXX',
      rewardedAdId: 'XXX-XXXX-XXXX',
      isTesting: true,
      autoShowBanner: false,
      autoShowInterstitial: false,
      autoShowRewarded: false,
      adSize: this.admob.AD_SIZE.BANNER
    };

    // Set admob options
    this.admob.setOptions(admobOptions)
      .then(() => console.log('Admob options have been successfully set'))
      .catch(err => console.error('Error setting admob options:', err));
}



// (Optionally) Load banner ad, in order to have it ready to show
this.admob.createBannerView()
  .then(() => console.log('Banner ad loaded'))
  .catch(err => console.error('Error loading banner ad:', err));


// Show banner ad (createBannerView must be called before and onAdLoaded() event raised)
this.admob.onAdLoaded().subscribe((ad) => {
  if (ad.adType === this.admob.AD_TYPE.BANNER) {
    this.admob.showBannerAd()
      .then(() => console.log('Banner ad shown'))
      .catch(err => console.error('Error showing banner ad:', err));
  }
});


// Hide banner ad, but do not destroy it, so it can be shown later on
// See destroyBannerView in order to hide and destroy banner ad
this.admob.showBannerAd(false)
  .then(() => console.log('Banner ad hidden'))
  .catch(err => console.error('Error hiding banner ad:', err));



// Request an interstitial ad, in order to be shown later on
// It is possible to autoshow it via options parameter, see docs
this.admob.requestInterstitialAd()
  .then(() => console.log('Interstitial ad loaded'))
  .catch(err => console.error('Error loading interstitial ad:', err));


// Show an interstitial ad (requestInterstitialAd must be called before)
this.admob.onAdLoaded().subscribe((ad) => {
  if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) {
    this.admob.showInterstitialAd()
      .then(() => console.log('Interstitial ad shown'))
      .catch(err => console.error('Error showing interstitial ad:', err));
  }
});


// Request a rewarded ad
this.admob.requestRewardedAd()
  .then(() => console.log('Rewarded ad loaded'))
  .catch(err => console.error('Error loading rewarded ad:', err));


// Show rewarded ad (requestRewardedAd must be called before)
this.admob.onAdLoaded().subscribe((ad) => {
  if (ad.adType === this.admob.AD_TYPE.REWARDED) {
    this.admob.showRewardedAd()
      .then(() => console.log('Rewarded ad shown'))
      .catch(err => console.error('Error showing rewarded ad:', err));
  }
});


// Hide and destroy banner or interstitial ad
this.admob.destroyBannerView()
  .then(() => console.log('Banner or interstitial ad destroyed'))
  .catch(err => console.error('Error destroying banner or interstitial ad:', err));



// On Ad loaded event
this.admob.onAdLoaded().subscribe((ad) => {
  if (ad.adType === this.admob.AD_TYPE.BANNER) {
    console.log('Banner ad is loaded');
    this.admob.showBannerAd();
  } else if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) {
    console.log('Interstitial ad is loaded');
    this.admob.showInterstitialAd();
  } else if (ad.adType === this.admob.AD_TYPE.REWARDED) {
    console.log('Rewarded ad is loaded');
    this.admob.showRewardedAd();
  }
});



// On ad failed to load
this.admob.onAdFailedToLoad().subscribe(err => console.log('Error loading ad:', err));



// On interstitial ad opened
this.admob.onAdOpened().subscribe(() => console.log('Interstitial ad opened'));



// On interstitial ad closed
this.admob.onAdClosed().subscribe(() => console.log('Interstitial ad closed'));



// On ad clicked and left application
this.admob.onAdLeftApplication().subscribe(() => console.log('Ad lefted application'));



// On user ad rewarded
this.admob.onRewardedAd().subscribe(() => console.log('The user has been rewarded'));



// On rewarded ad video started
this.admob.onRewardedAdVideoStarted().subscribe(() => console.log('Rewarded ad vieo started'));



// On rewarded ad video completed
this.admob.onRewardedAdVideoCompleted().subscribe(() => console.log('Rewarded ad video completed'));

```