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

在您希望展示广告的html中添加此内容

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

在主html文件中添加google adsense脚本

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

不要忘记添加app.module。

另一方面，Google adsense横幅广告并未显示在本地服务器中，如果它位于服务器中，则需要时间才能显示。您可以通过将备份广告属性更改为

来确保它正常工作

Fill space with a solid color

在Google Adsense门户网站中。

Answer 2

这可能不是最佳答案，但是我建议使用模块ng2-adsense。在这里，您可以使用HTML标签ng-adsense平稳地放置广告。

在Angular 2应用程序上使用Google Adsense广告

2 个答案: