Angular 2アプリケーションでGoogle Adsense広告を使用する

Question

Angular 2アプリでGoogle Adsense広告を使用する方法はありますか？

私はこれを見ましたGoogle AdSense ads in Angular 2 components?答えは実際に私のために働いていません。広告の代わりに空白が表示されます。私が配置しようとしているのは反応性の高い広告です。上記テンプレートのコードで、上記の質問に答えたとおりに正確に答えました。

<div class="text-center"> 
    <ins class="adsbygoogle" style="display:inline-block;height:150px" 
    data-ad-client="my ca-pub" data-ad-slot="my ad slot"></ins> 
    </div> 

アイデアをお持ちですか？

Answer 1

この回答はlinkで解決しました。さらにうまく私は動的スロット情報で使用できるコードを改善しました。

banner.component.ts

import { Component, AfterViewInit, Input } from "@angular/core" 
@Component({ 
moduleId: module.id, 
selector: "google-adsense", 
template: ` <div> 
     <ins class="adsbygoogle" 
      style="display:block;" 
      data-ad-client="write_your_pub_" 
    [attr.data-ad-slot]="data" 
      data-ad-format="auto"></ins> 
     </div> 
      <br>    
    `, 

}) 

export class BannerComponent implements AfterViewInit { 
@Input() data; 
constructor() {} 
ngAfterViewInit() { 
setTimeout(() => { 
try { 
    (window["adsbygoogle"] = window["adsbygoogle"] || []).push({}); 
    } catch (e) { 
    console.error(e); 
    } 
}, 2000); 
} } 

広告が

<google-adsense [data]="your_slot_id"></google-adsense> 

は、あなたのメインのHTMLファイルにGoogle AdSenseのスクリプトを追加表示するあなたのhtmlでこれを追加

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

app.moduleを追加することを忘れないでください。

一方、Google AdSenseのバナーはローカルサーバーに表示されず、サーバーにある場合は表示に時間がかかります。 Google Adsenseポータルで代替広告のプロパティを

Fill space with a solid color 

に変更しても問題ありません。