web-dev-qa-db-ja.com

Angular 2アプリケーションでのGoogleAdSense広告の使用

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

私はこれを見ました GoogleAdSense広告はAngular 2コンポーネント？ ですが、答えは実際には機能していません。広告の代わりに空白が表示されます。何ですかレスポンシブ広告を配置しようとしています。上記の質問の回答とまったく同じように、次のテンプレートコードを使用しました。

<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>

何か案は？

angularadsense
9
TheUnreal

この リンク の答えは私のために働いています。さらに良いことに、動的スロット情報で使用できるコードを改善することができました。

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);
} }

広告を表示するHTMLにこれを追加します

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

あなたのメインのhtmlファイルにグーグルアドセンススクリプトを追加します

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

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

一方、グーグルアドセンスバナーはローカルサーバーに表示されず、サーバーにある場合は表示されるまでに時間がかかります。バックアップ広告のプロパティを次のように変更することで、機能していることを確認できます。

Fill space with a solid color

グーグルアドセンスポータルで。

8
Levent Üncü

これは最善の答えではないかもしれませんが、モジュール ng2-adsense を使用することをお勧めします。そこから、HTMLタグを使用して広告をスムーズに配置できますng-adsense。

0
Kristian Mark Surat