The Beginner's Guide to How to Add Google Adsense in Angular
Tags: angular, webdev, tutorial, howto
Published: 2023-02-02 10:54:22

<p class="paragraph"> In this tutorial, we will learn how to add <b>google Adsense</b> with angular step by step. </p><p class="paragraph"> So let's get started... </p><h2>How to Add Google Adsense in Angular</h2><h3>Sign up for Google AdSense</h3><p class="paragraph"> First of all, we need a google Adsense account to start. </p><p class="paragraph"> Go to&nbsp;<a href="https://www.google.com/adsense/start/" target="_blank">https://www.google.com/adsense/start/</a>&nbsp;and create it and login if you already have it. </p><figure class="fig-img"><img class="img   " src="https://res.cloudinary.com/dvo6eiftd/image/upload/v1663431331/rjsnnmu5okyrjkdfuazl.jpg" alt="Google-Adsense-homepage"><figcaption class="fig-cap">Google-Adsense-homepage</figcaption></figure><h3>Add your website :</h3><p class="paragraph"> 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 </p><p class="paragraph"> 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 <b>Add site</b> button: </p><figure class="fig-img"><img class="img   " src="https://res.cloudinary.com/dvo6eiftd/image/upload/v1663431779/ymod2di6ahashkudxfcy.jpg" alt="Add-site-to-google"><figcaption class="fig-cap">Add-site-to-google</figcaption></figure><p class="paragraph"> Then click on the <b>save and continue</b> button, and it will show a popup&nbsp;where it provides you a code snippet containing your <b>Google Ad Client ID</b>, which typically starts with <b>"ca-pub-XXXXXXXX"</b>. </p><p class="paragraph"> 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. </p><p class="paragraph"> According to the instructions, we should copy and paste the given code into our website's HTML. </p><p class="paragraph"> In our case, with angular we only need&nbsp;to copy and paste the <b>AdSense</b> script: </p><pre><code class="code-block">﻿&lt;script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
</code></pre><h2>Connect Angular website with Google Adsense:</h2><p class="paragraph"> Open your Angular application and&nbsp;﻿in your <code class="inline-code">index.html</code>, between the <b>&lt;head&gt; and &lt;/head&gt;</b> tags, put the above script like below: </p><pre><code class="code-block">&lt;!DOCTYPE html&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;TutsCoder&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="apple-touch-icon" sizes="192x192" href="assets/icons/apple-touch-icon.png"&gt;
    &lt;script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
</code></pre><h3>Install ng2-adsens plugin</h3><p class="paragraph"> In our angular application, we are going to use an open source library called <a href="https://www.npmjs.com/package/ng2-adsense">ng2-adsense</a> which makes possible to easily mange integration of adsense. </p><pre><code class="code-block">npm install ng2-adsense</code></pre><p class="paragraph"> Import AdsenseModule on top of your <code class="inline-code">app.module.ts</code> </p><pre><code class="code-block">import { AdsenseModule } from 'ng2-adsense';
</code></pre><p class="paragraph"> Add <code class="inline-code">AdsenseModule.forRoot()</code> to the imports section of your NgModule in <code class="inline-code">app.module.ts</code> </p><pre><code class="code-block">@NgModule({
  declarations: [
    AppComponent
   ],
   imports: [
    AdsenseModule.forRoot()
...</code></pre><p class="paragraph"> Add <code class="inline-code">&lt;ng-adsense&gt;</code> tag to any component.html you want to display ads on </p><pre><code class="code-block">&lt;ng-adsense [adClient]="'ca-pub-XXXXXXXXXX'" [pageLevelAds]="true"&gt;&lt;/ng-adsense&gt;</code></pre><h3>Deploy your Angular Application</h3><p class="paragraph"> 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. </p><h2>AdSense Eligibility Requirements</h2><p class="paragraph"> There is some criteria that need to meet in order to start showing google AdSense to your website, and some of these are&nbsp; </p><p class="paragraph"> 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. </p><h3>SEO support for Angular Application</h3><p class="paragraph"> As Angular is a SPA application, it doesn't support SEO right away, so we must have to enable it, which we can do&nbsp;using the Angular Universal tool which allows server-side rendering and can avail&nbsp;Google's bot to crawl through and see if you have original content </p><h3>Acceptance of AdSense is the last step</h3><p class="paragraph"> I'm going to assume that Google AdSense is fully integrated into your Angular application at this time.  </p><p class="paragraph"> You should be able to see your ad placements immediately away if your AdSense account status is Ready!  </p><p class="paragraph"> 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. </p><div class="content-box green"> 
<span class="title">👉Note: </span> 
<p>Make sure to deactivate any Ad Block extensions you may have installed on your browser.</p>
</div>