99. A-tag-not-highly-recommended

Integrate adsense in Ionic Angular.


Note:please keep in mind that I am not native English speaker.

In this article, I would like to summarize how to insert ads into Ionic (Angular) project using adsense. Admob is more popular than adsense for Ionic, but Admob does not support web platforms. If you want to deploy your project as a web app, you need to use Adsense instead of Admob. However, there is little information on how to use Adsense with Angular, let alone Ionic. Therefore, I would like to introduce the steps here in this article.


Basically, I recommend you to use ng2-adsense plugin, but it doesn’t work even if you implement it according to the instructions on the official page. You need to add some other code. In addition, it is important to have a ad with fixed size(not responsive). If you set your ad style with responsive, it will not work. Lastly, I recommend you to place your ad on the top area for your page. It may sounds nonsense, but it was important to me.

GitHub page


Demo site



Angular11, Ionic6

   Ionic CLI                     : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1102.4
   @angular-devkit/schematics    : 9.1.6
   @angular/cli                  : 11.2.4
   @ionic/angular-toolkit        : 2.2.0


   Capacitor CLI   : 2.1.2
   @capacitor/core : 2.1.2


   cordova-res                          : not installed
   native-run (update available: 1.3.0) : 1.0.0


   NodeJS : v12.18.0 (/usr/local/bin/node)
   npm    : 6.14.6
   OS     : macOS Big Sur
the version of ng2-adsense was 9.1.0.


Create your project
ionic start adsense-demo blank --type=angular
cd  adsense-demo
Install plugin from here . https://github.com/scttcper/ng2-adsense
npm install ng2-adsense
Please note that you need to install the one that matches your version of Angular. You can specify plugin version as followings.
npm install ng2-adsense@9.1.0
Next, add the following snippet in Index.html(above </head>).
<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>
It should look like the picture below.
Next, add following codes to the module where you want to place your ad. Officially, it says to add to app.module.ts, but please add it into the module you want to use. For example, add code into home.module.ts as shown below.
The codes you need to add are followings.
import { AdsenseModule } from 'ng2-adsense';
    imports: [
    <Other modules>,
        adClient: 'ca-pub-XXXXXXXXXXXXXX',
        adSlot: XXXXXXXXXXX,
You don’t have to add anything to home.page.ts. Then add snippet below into home.page.html.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- ocr-app -->
  <ins class="adsbygoogle"
       (adsbygoogle = window.adsbygoogle || []).push({});

Please note the followings.
  • Create ad styles in fixed size, not responsive mode (I recommend you to create ad with inline-block; width: 728px; height: 90px).
  • Add the snippet on top of the ion-content tag.
If you set ad style to responsive, it will not work. If you do not add it to the top of the ion-content tag, it will not work neither. I know it sounds strange, but I think Adsense doesn’t recognize content in Angular page. So I recommend you to do that. Furthermore, it sounds strange to add the snippet starting with “<script” tag. However, this was also necessary for me to work. You can check adClient and adSlot and snippet in your adsense page. To see your snippet, click the <> button at the bottom right of the screen below.
Also, to change the style of your ad from responsive to fixed size, press the pencil mark to fix it from responsive.
It it my pleasure to visit following demo site. https://adsense-demo.np-sys.com Thank you.
Meditation Tools開発者
絹田 雅
複数の瞑想を学ぶことができるMeditation Toolsの開発者。 売上は人権段階を通じた寄附により社会をより良くすることに使われます。 利用はこちら