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.
絹田 雅
アーナンダよ、あなたはカピラヴァットゥのサキャ族の人たちに、修学すべき人(有学)の修学と実践について説明しなさい。わたしは背中が疲れました。背中を伸ばそう。 マハーナーマよ、ここに貴い弟子は戒をそなえ、感覚器官の門を防御し、食事の適量を知り、覚醒しており、七つの正しい教えをそなえており、明瞭なこころに依存し、現世で安楽に過ごす、明瞭なこころに依存する四段階からなる瞑想(四禅)を希求し、容易に得て、困難なく得ます。