Google Adsense Ads in Angular 2 Components?

Question

I am trying to load some revocable ads in AdComponentin my application. The component is dead simply:

import { Component } from '@angular/core';
import { FORM_DIRECTIVES, CORE_DIRECTIVES } from '@angular/common';

@Component({
  selector: 'ad',
  templateUrl: 'app/views/ad.html',
  directives: [ FORM_DIRECTIVES, CORE_DIRECTIVES ]
})
export class AdComponent {}

ad.html:

<div class="demo-card-wide mdl-card mdl-shadow--2dp ad-card">
  <div class="mdl-card__supporting-text">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-0123456789"
        data-ad-slot="0123456789"
        data-ad-format="rectangle, horizontal"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</div>

I find that these script tags do not fall into the user interface and this seems to be a focused solution .

I could move some code, such as a js link, into the head of my index.html and window.adsbygoogleinto the component constructor, but I'm not sure if these modifications are allowed or if there is a better alternative for these declarations to work in Angular 2.

Does anyone have experience with Google Adsense ads running in Angular 2? Is there any other, correct way to do this?

Answer 1

. , " " adsense, , , :

// ad component
import { Component, AfterViewInit } from '@angular/core';
import { FORM_DIRECTIVES, CORE_DIRECTIVES } from '@angular/common';

@Component({
  selector: 'ad',
  templateUrl: 'app/views/ad.html',
  directives: [ FORM_DIRECTIVES, CORE_DIRECTIVES ]
})
export class AdComponent implements AfterViewInit {

  ngAfterViewInit() {
    try {
      (adsbygoogle = window.adsbygoogle || []).push({});
    } catch (e) {}
  }
}

// ad.html
<div class="demo-card-wide mdl-card mdl-shadow--2dp ad-card">
  <div class="mdl-card__supporting-text">
    <ins class="adsbygoogle" style="display:inline-block;width:330px;height:120px" data-ad-client="my_client_number" data-ad-slot="my_ad_slot_number"></ins>
  </div>
</div>

Material Design Lite, 2 divs . <ins> , adsense.

AfterViewInit, , adsense adsbygoogle, , DOM. , DOM <ins>.

try/catch, , . . Angular 2 .

, , AdSense, . - Angular 2. Angular 2 RC4 .

, , , TOS ...

Typescript, , .d.ts:

declare interface Window {
  adsbygoogle: any[];
}

declare var adsbygoogle: any[];

, Typescript (adsbygoogle = window.adsbygoogle || []).push({}); .

Answer 2

:

TopBannerComponent.ts == >

    import {Component,OnInit,AfterViewInit} from '@angular/core'

    @Component({
      moduleId: module.id,
      selector: 'google-adsense',
      template: ` <div>
            <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="ca-pub-0443011292983797"
                data-ad-slot="8184819393"
                data-ad-format="auto"></ins>
             </div>   
                <br>            
      `,

    })

    export class TopBannerComponent implements AfterViewInit {

      constructor() {    
      } 

      ngAfterViewInit() {
         setTimeout(()=>{
          try{
            (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
          }catch(e){
            console.error("error");
          }
        },2000);
     }     
    }

html, ,

<google-adsense></google-adsense>

google adsense script html

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

Answer 3

There is a module that works very well for me: ng2-adsense .

If you decide to use it, your HTML code will look something like this:

<ng2-adsense
  [adClient]="'ca-pub-7640562161899788'"
  [adSlot]="7259870550">
</ng2-adsense>

After installing the module, you need to import it and add it to your NgModule:

import { AdsenseModule } from 'ng2-adsense';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AdsenseModule, // <--- Add to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And add this standard adsense code to index.html:

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