Best Online Tutorials

SQL Tutorial

Free SQL Tutorial

SQL Interview Questions

SQL Practice Questions

SQL Tips & Tricks

SQL Errors

SQL Books

Angular Tutorial

Free Angular Tutorial

Angular Interview Questions

Angular Practice Questions

Angular Tips & Tricks

Angular Errors

Angular Books

Node.js Tutorial

Free Node.js Tutorial

Node.js Interview Questions

Node.js Practice Questions

Node.js Tips & Tricks

Node.js Errors

Node.js Books

React.js Tutorial

Free React.js Tutorial

React.js Interview Questions

React.js Practice Questions

React.js Tips & Tricks

React.js Errors

React.js Books

SSIS Tutorial

Free SSIS Tutorial

SSIS Interview Questions

SSIS Practice Questions

SSIS Tips & Tricks

SSIS Errors

SSIS Books

SEO Tutorial

Free SEO Tutorial

SEO Interview Questions

SEO Practice Questions

SEO Tips & Tricks

SEO Errors

SEO Books

Javascript Tutorial

Free Javascript Tutorial

Javascript Interview Questions

Javascript Practice Questions

Javascript Tips & Tricks

Javascript Errors

Javascript Books

MongoDB Tutorial

Free MongoDB Tutorial

MongoDB Interview Questions

MongoDB Practice Questions

MongoDB Tips & Tricks

MongoDB Errors

MongoDB Books

Next.js Tutorial

Free Next.js Tutorial

Next.js Interview Questions

Next.js Practice Questions

Next.js Tips & Tricks

Next.js Errors

Next.js Books

How to add google adsense in angular universal 

Prashant Surya  |   Dec 2, 2019  |  Views: 2181

Description:


What this article is about?

  • How to add google adsense in angular pages
  • How to add google adsense in angular Universal

If you are making a SPA website in angular 2/4/5/6/7/8, its quiet difficult to add google adsense in your application.

But as usual there is always a solution for a problem.

Today I am discussing on How to add google adsense in angular application with angular Universal SSR is enabled.


Google adsense provides two ways to add ads on your application pages:

1.  Auto ads
2.  Ads Units


1.   Auto ads :

Its quiet simple to implement. We have to add the script code given by the google adsense on the index.html page once, and there you can enable page level ads to true.

So that google can automatically show ads on all the nested pages, where they find the suitable space to show an ad.



How to add auto ads:

Open your index.html or the main html page and place the below codes in the head tag of that html

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-316708913017093498",
            enable_page_level_ads: true
        });
    </script>
    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>



But auto ads is not much useful in angular pages, you will not able to see the ads on the routing based rendered pages.

Second drawback is that if any ads appears, it may ruin your page/content/section designs.

You don't have control over the ads positioning done by the google automatically.


So the better option is to go for the ad units, you can choose your ads schema as per the size and positions, available in your application.


2.  Ads Units:

Its a second option for adding the ads on your pages.

You have to create ad units as per your placement and sizes.

You can either choose responsive or the fixed size ads units as per your space available.


How to add ad Units:

Lets suppose we want to show an ad on the top of page as a small banner. 

For that create a component topbanner.component.ts and paste the below code and change the ads ins section with yours created one.

import { Component, OnInit, AfterViewInit } from '@angular/core'
@Component({
    moduleId: module.id,
    selector: 'google-adsense-topban',
    template: ` <div>
      <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article"
      data-ad-format="fluid" data-ad-client="ca-pub-316708913017093498" data-ad-slot="9110629824"></ins>
             </div>   
                <br>            
      `,
})
export class TopBannerComponent implements AfterViewInit {
    constructor() {
        
    }
    ngAfterViewInit() {
        setTimeout(() => {
            try {
                (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
            } catch (e) {
                console.error("error");
            }
        }, 2000);
    }
}

Here you can see in the <ins> tag we have slot id there, so each slot is given a unique id by the google ads unit.

So for each different ads you should have different slot id with you like for side bar banners or for horizontal ad units both have different slot id.

Now place the selector in your html template where you want to display.

<google-adsense-topban></google-adsense-topban>


ngAfterViewInit have a delay to set global variable adsbygoogle, which sometimes may be required or may not be , so be on safe side by using the delay and a try catch.

If its not been required in your application, then remove that delay code.


I have tested this code with my , angular 8 application with angular universal server side rendering enabled. its have been working fine there.

For running demo, you can see this article page, which also have been implemented the same.




Summary:

By implementing the google adsense ad units , now its quite easy to add your ads position and size by the above given code.

For any kind of help or any issue you can discuss below in the comments and reply section, so that I can help you.





About Author:

I am a software developer, expert in MEAN Stack. I work as a consultant for MEAN stack on-page SEO, Angular universal SSR, micro-services architecture, performance, docker/nginx deployment, load balancing, cluster, security and on much more. 



Comments:
Content Contributor
Prashant Surya

Prashant Surya

Software developer at Uniserve Data Technologies Pvt. Ltd.  |   Noida, Uttar Pradesh, India

I am a software developer, freelancer and trainer working on technologies likes. MEAN stack, MERN Stack, ASP.NET full stack, WebRTC, socket.io ,PWA, SQL, JavaScript, jQuery, HTML, CSS, SEO, responsive UI/UX designing... having 7 years of experience in development in multiple domains like, eCommerce, RTA, capital markets, education, real estate...


Read related articles

Deploy your first Node.js App on Heroku for free

Prashant Surya  |   Jan 22, 2020  |  Views: 1219

How to add google adsense in angular universal

Prashant Surya  |   Dec 2, 2019  |  Views: 2182

Want to sell your software ?-

If you want to sell your readymade software to the genuine clients or businessman, list your software with details and demo links.

  • Sell ERP
  • Sell Website Clones
  • Sell App Clones
  • Sell Readymade Portals
  • Sell Readymade Websites
  • Sell Mobile Apps
  • Sell Window Apps

Clients will find it using our advanced search filter and will contact you directly.

No any charge for the product lsiting.

Do you own a Company ?+

Property.sale

Buy or Sell Commercial Property+

Are you a freelancer ?+

Looking for a job ?+

Are you a Service Provider ?+

Are you a blogger ?+

Do you own an IT Institute ?+



Property.sale