How to implement Google Adsense ads in angular? (Typescript)

Google Adsense in Angular

For implementing Google ads, first things first we need to set up our Google ads account. There we also need to verify our domain ownership. For this go to Google Search Console and verify your domain ownership.

Now in Google Adsense, we need to approve our website. After that, we can do the coding part

In the index.html we need to load the Google ads script

<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-id", //google publisher id
      enable_page_level_ads: true //enable page level ads
    });
</script>

Now in the ts and HTML file, we need to add the ‘ads’ code.

For the ads code, we need to set up our ad unit, once it is set up we can add the same to our website.

Here we’re doing on the Angular website. Let’s assume we’re adding the ads to the home page

File — home.component.html

<div class="text-center">
  <ins
    class="adsbygoogle ads_resp"
    style="display: inline-block"
    data-ad-client="ca-pub-id"
    data-ad-slot="ad-slot-id"
    data-full-width-responsive="true"
  ></ins>
</div>

File — home.component.ts

declare interface Window {
  adsbygoogle: any[];
}
declare var adsbygoogle: any[];


@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.scss"],
})
export class HomeComponent implements OnInit {

ngAfterViewInit() {
    setTimeout(() => {
      try {
        (window["adsbygoogle"] = window["adsbygoogle"] || []).push({});
      } catch (e) {
        console.error("ads", e);
      }
    }, 900);
  }

}

File — home.component.scss

Here in the below CSS, we have changed height and width according to screen sizes using the media query.

/* Ads*/
.ads_resp {
  width: 320px;
  height: 100px;
  margin: 0 auto;
}
@media (min-width: 500px) {
  .ads_resp {
    width: 480px;
    height: 60px;
  }
}
@media (min-width: 900px) {
  .ads_resp {
    width: 900px;
    height: 90px;
  }
}

Note:- If we want to add multiple ads in the same component, then we need to add again in the html and ts.

For Multiple ads

File — home.component.html

<div class="text-center">
  <ins
    class="adsbygoogle ads_resp"
    style="display: inline-block"
    data-ad-client="ca-pub-id"
    data-ad-slot="ad-slot-id"
    data-full-width-responsive="true"
  ></ins>
</div>
my-content
<div class="text-center">
  <ins
    class="adsbygoogle ads_resp"
    style="display: inline-block"
    data-ad-client="ca-pub-id"
    data-ad-slot="ad-slot-id"
    data-full-width-responsive="true"
  ></ins>
</div>

File — home.component.ts

ngAfterViewInit() {
    setTimeout(() => {
      try {
        (window["adsbygoogle"] = window["adsbygoogle"] || []).push({});
        //adding 2nd time as we add two ads in the Html
        (window["adsbygoogle"] = window["adsbygoogle"] || []).push({}); 
      } catch (e) {
        console.error("ads", e);
      }
    }, 900);
  }

If we add 3 ads in the HTML section then we need to push 3 times in window[“adsbygoogle”] variable

In a similar way, we can add the same in the Javascript too.

Hope it helps you 😊