× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Monetize Ionic 2 App With Google Admob

Patrick
Aug 26, 2016
<p>This is how you monetize an ionic 2 App with typescript and angular2:</p> <p>Install the admob plugin:</p> <pre><span style="color:rgb(102, 217, 239)">ionic plugin add cordova</span><span style="color:rgb(248, 248, 242)">-</span><span style="color:rgb(102, 217, 239)">plugin</span><span style="color:rgb(248, 248, 242)">-</span><span style="color:rgb(102, 217, 239)">admobpro</span></pre> <p>Then, add this to your view controller:</p> <p> </p> <pre><span style="color:rgb(249, 38, 89)">import</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(166, 226, 46)">Component</span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">from</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'@angular/core'</span><span style="color:rgb(248, 248, 242)">;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">import</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(166, 226, 46)">NavController</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">Platform</span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">from</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'ionic-angular'</span><span style="color:rgb(248, 248, 242)">;</span><span style="color:rgb(102, 217, 239)"> declare </span><span style="color:rgb(249, 38, 89)">var</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> any</span><span style="color:rgb(248, 248, 242)">;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(174, 129, 255)">@Component</span><span style="color:rgb(248, 248, 242)">({</span><span style="color:rgb(102, 217, 239)"> templateUrl</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'build/pages/home/home.html'</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">})</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">export</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">class</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">HomePage</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">private</span><span style="color:rgb(102, 217, 239)"> admobId</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> any</span><span style="color:rgb(248, 248, 242)">;</span><span style="color:rgb(102, 217, 239)"> constructor</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(249, 38, 89)">private</span><span style="color:rgb(102, 217, 239)"> navController</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">NavController</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">private</span><span style="color:rgb(102, 217, 239)"> platform</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">Platform</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">createBanner</span><span style="color:rgb(248, 248, 242)">();</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(147, 161, 161)">// These two lines run the function and add the banner to the page</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">showBanner</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(230, 219, 116)">'bottom'</span><span style="color:rgb(248, 248, 242)">);</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">platform </span><span style="color:rgb(248, 248, 242)">=</span><span style="color:rgb(102, 217, 239)"> platform</span><span style="color:rgb(248, 248, 242)">;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">if</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(230, 219, 116)">/(android)/</span><span style="color:rgb(102, 217, 239)">i</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">test</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(102, 217, 239)">navigator</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">userAgent</span><span style="color:rgb(248, 248, 242)">))</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">admobId </span><span style="color:rgb(248, 248, 242)">=</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> banner</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'ca-app-pub-xxx/yyy'</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> interstitial</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'ca-app-pub-jjj/kkk'</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">};</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">else</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">if</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(230, 219, 116)">/(ipod|iphone|ipad)/</span><span style="color:rgb(102, 217, 239)">i</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">test</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(102, 217, 239)">navigator</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">userAgent</span><span style="color:rgb(248, 248, 242)">))</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">admobId </span><span style="color:rgb(248, 248, 242)">=</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> banner</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'ca-app-pub-ddd/sss'</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> interstitial</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">'ca-app-pub-ppp/zzz'</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">};</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> createBanner</span><span style="color:rgb(248, 248, 242)">()</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">platform</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">ready</span><span style="color:rgb(248, 248, 242)">().</span><span style="color:rgb(249, 38, 89)">then</span><span style="color:rgb(248, 248, 242)">(()</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">=&gt;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">if</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">createBanner</span><span style="color:rgb(248, 248, 242)">({</span><span style="color:rgb(102, 217, 239)"> adId</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">admobId</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">banner</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> autoShow</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">false</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">});</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">});</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> showInterstitial</span><span style="color:rgb(248, 248, 242)">()</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">platform</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">ready</span><span style="color:rgb(248, 248, 242)">().</span><span style="color:rgb(249, 38, 89)">then</span><span style="color:rgb(248, 248, 242)">(()</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">=&gt;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">if</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">prepareInterstitial</span><span style="color:rgb(248, 248, 242)">({</span><span style="color:rgb(102, 217, 239)"> adId</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">admobId</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">interstitial</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> autoShow</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">true</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">});</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">});</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> showBanner</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(102, 217, 239)">position</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">platform</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">ready</span><span style="color:rgb(248, 248, 242)">().</span><span style="color:rgb(249, 38, 89)">then</span><span style="color:rgb(248, 248, 242)">(()</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">=&gt;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">if</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">var</span><span style="color:rgb(102, 217, 239)"> positionMap </span><span style="color:rgb(248, 248, 242)">=</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">"bottom"</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">AD_POSITION</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">BOTTOM_CENTER</span><span style="color:rgb(248, 248, 242)">,</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(230, 219, 116)">"top"</span><span style="color:rgb(248, 248, 242)">:</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">AD_POSITION</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">TOP_CENTER </span><span style="color:rgb(248, 248, 242)">};</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">showBanner</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(102, 217, 239)">positionMap</span><span style="color:rgb(248, 248, 242)">[</span><span style="color:rgb(102, 217, 239)">position</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">toLowerCase</span><span style="color:rgb(248, 248, 242)">()]);</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">});</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> hideBanner</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(102, 217, 239)">position</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">this</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">platform</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">ready</span><span style="color:rgb(248, 248, 242)">().</span><span style="color:rgb(249, 38, 89)">then</span><span style="color:rgb(248, 248, 242)">(()</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">=&gt;</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(249, 38, 89)">if</span><span style="color:rgb(248, 248, 242)">(</span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">)</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">{</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(166, 226, 46)">AdMob</span><span style="color:rgb(248, 248, 242)">.</span><span style="color:rgb(102, 217, 239)">hideBanner</span><span style="color:rgb(248, 248, 242)">();</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">});</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span><span style="color:rgb(102, 217, 239)"> </span><span style="color:rgb(248, 248, 242)">}</span></pre> <p>You’re done! Good luck!</p> <p> </p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus