Google Adsense integration with angular 2,3,4,5,6,7,8,9, component-based
 |
| Google Adsense integration with angular 2,3,4,5,6,7,8,9, component-based |
hey, fans we want to tell about Google Adsense, and we want to teach about how to integrate Google Adsense in angular or angular projects.
if you are interested to learn this please follow our full interactions step by step if you want the demo to see the demo by clicking this link.
- Creating an angular project or in an existing project
- Creating Component Adsense.
- Use component and deploy the project to your server-hosting
1.Creating an angular project or in an existing project: First, create an angular project what name you want or ready on your existing project with an experiment that done these steps.
2. Creating Component Adsense: the second step you should be generated the component name of the component we decided 'top-banner' after that add this code written by me:-
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-topbanner',
template: `<div><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-********** place your id" data-ad-slot="******** place you id"
data-ad-format="auto" data-full-width-responsive="true"></ins></div>`
})
export class TopbannerComponent implements AfterViewInit {
ngAfterViewInit() {
setTimeout(() => {
try {
(window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
} catch (e) {
console.error('error');
}
}, 2000);
}
}.
3. Use component and deploy the project to your server-hosting: after creating components you can use your component on Html page where you want to show Google AdSense places its components name like this component name is <app-topbanner></app-topbanner> after that build your project and deploy on your hosted server then you see the magic called Google Adsense ads to show a better look like.
after this, you make more different size and type ads component and place different place, thank comment me for any problems.
