The Beginner's Guide to How to Add Google Adsense in Angular

In this tutorial, we will learn how to add google Adsense with angular step by step.

So let's get started...

How to Add Google Adsense in Angular

Sign up for Google AdSense

First of all, we need a google Adsense account to start.

Go to https://www.google.com/adsense/start/ and create it and login if you already have it.

Add your website :

Once you have an AdSense Account, you need to add the URL of your site where you want to display Ads on the Sites tab

Click on sites from the sidebar menu, it will show a list of sites if you already have added or if not let's add a new site by clicking on Add site button:

Then click on the save and continue button, and it will show a popup where it provides you a code snippet containing your Google Ad Client ID, which typically starts with "ca-pub-XXXXXXXX".

Simply copy or write down your Google Ad Client ID, as this will be used later in the steps that follow for our Angular application.

According to the instructions, we should copy and paste the given code into our website's HTML.

In our case, with angular we only need to copy and paste the AdSense script:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Connect Angular website with Google Adsense:

Open your Angular application and in your index.html, between the <head> and </head> tags, put the above script like below:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TutsCoder</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="apple-touch-icon" sizes="192x192" href="assets/icons/apple-touch-icon.png">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>

Install ng2-adsens plugin

In our angular application, we are going to use an open source library called ng2-adsense which makes possible to easily mange integration of adsense.

npm install ng2-adsense

Import AdsenseModule on top of your app.module.ts

import { AdsenseModule } from 'ng2-adsense';

Add AdsenseModule.forRoot() to the imports section of your NgModule in app.module.ts

@NgModule({
  declarations: [
    AppComponent
   ],
   imports: [
    AdsenseModule.forRoot()
...

Add <ng-adsense> tag to any component.html you want to display ads on

<ng-adsense [adClient]="'ca-pub-XXXXXXXXXX'" [pageLevelAds]="true"></ng-adsense>

Deploy your Angular Application

Once all the above changes are completed, we need to deploy these code changes to the server, so that google AdSense can verify your site and that your site is connected to Adsense properly.

AdSense Eligibility Requirements

There is some criteria that need to meet in order to start showing google AdSense to your website, and some of these are

In addition to verifying that your site is connected to AdSense, Google will also need to check that your site meets their eligibility requirements, basically, your website must have original content, comply with their program policies, and be operated by someone who is at least 18 years old.

SEO support for Angular Application

As Angular is a SPA application, it doesn't support SEO right away, so we must have to enable it, which we can do using the Angular Universal tool which allows server-side rendering and can avail Google's bot to crawl through and see if you have original content

Acceptance of AdSense is the last step

I'm going to assume that Google AdSense is fully integrated into your Angular application at this time.

You should be able to see your ad placements immediately away if your AdSense account status is Ready!

Sometimes Google Adsense takes more time to approve so please try to first have some quality content on your site, so it can easily be approved.

👉Note:

Make sure to deactivate any Ad Block extensions you may have installed on your browser.

Blog