google adsense implementation with angular2 in 5 minutes

In this article, I’m going to show you how to add Google Adsense code into an angular2 application. Before the start, you should have working Google Adsense account. If you have then you are good to go.

I’m assuming here you have working angular2 code and Google AdSense account.

1. Install Google Adsense to your angular2 application

npm install ng2-adsense --save

2. Insert Google Adsense script code into your index.html file head tag.

<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>
google adsense in angular2

google adsense in angular2

3. Insert AdSenseModule to ngModule
In below example, I want to show my ads on the detail page. So it will look like below file code.

import { AdsenseModule } from 'ng2-adsense';
@NgModule({
    imports: [
        CommonModule,       
        AdsenseModule.forRoot({
        adClient: 'ca-pub-1234567899876543', //replace with your client from google adsense
        adSlot: 1234567891 //replace with your slot from google adsense
    }),
    ],
    declarations: [   
        CarouselComponent
    ]
})
export class PropertyDetailModule {}

4. Now add Google Adsense code to your view file. I’m going to add my propertyDetails.html file.
Before add make sure you added your client and slot from Google Adsense as above in component file.
<!–google ads–>
<ng2-adsense
[adClient]=”‘ca-pub-1234567899876543′”
[adSlot]=”1234567891″
[width]=”320″
[height]=”108″>
</ng2-adsense>
<!–/google ads –>

5. If you don’t know how to get the Client and Slot then see below screen shot.

google adsense client and slot

google adsense client and slot

Posted by | View Post | View Group