What is Google AdSense?

There are several ways to monetize website traffic, and most of them are related to advertising third-party products and services on your website.

Today, there are many advertising programs that can help a website owner or a webmaster, to integrate their websites with such programs, and display advertisements on their websites.

Google AdSense is one such advertising program, that can help monetize website traffic.

Here is a list of things that need to be satisfied to partner with AdSense.

  • Website must have unique content
  • The website must have at least 30 to 50 pages of content indexed on Google Search
  • Website must involve in AdSense policy violations and adhere to its terms

Once the above things are satisfied, a Google AdSense account can be created with your website URL and apply for Google AdSense approval.

Google AdSense team will review the website and update its status.

The website will be able to configure and display ads only after AdSense approval.

Google AdSense Code

The HTML code provided by AdSense looks something like the one below, which needs to be included within the <body> section of an HTML code.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5567643689414685"
     crossorigin="anonymous"></script>
<!-- Sidebar Vertical #1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5567643689414685"
     data-ad-slot="9741359113"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

How to include Google Adsense code in an Angular application?

We cannot include the HTML code provided by AdSense directly into an Angular application, as the code needs to be converted to TypeScript compatible code.

However, we have an Angular library ng2-adsense that can be used to simplify this process.

Install the library

Install the library using the below command

npm install ng2-adsense

Include AdSense Module in the application

Then, include its module as mentioned below within the imports of app.modules.ts file.

Add Module without any global variables

AdsenseModule.forRoot({ })

(OR) Add Module along with global client ID, which will be applied to all the AdSense slots in the application if not specified on a slot.

AdsenseModule.forRoot({
    adClient: 'ca-pub-5567643689414685'
})

(OR) Add Module along with global client ID and slot ID, which will be applied to all the AdSense slots in the application if not specified on a slot.

AdsenseModule.forRoot({
    adClient: 'ca-pub-5567643689414685',
    adSlot: 9741359113
})

Include Ad Slot to display the ads

Include the below component to HTML content wherever an ad is required in the application.

<ng-adsense
    [adClient]="'ca-pub-5567643689414685'"
    [adSlot]="9741359113"
    [adFormat]="'auto'"
    [fullWidthResponsive]="true">
</ng-adsense>

Overall

The Angular Adsense component comes in handy to implement the Google AdSense ads in an Angular application.