在Angular 2应用程序上使用Google Adsense广告 [英] Using Google Adsense ads on Angular 2 application

问题描述

是否可以在Angular 2应用上使用Google Adsense广告?

Is there any way to use Google Adsense ads on an Angular 2 app?

我看到了> Angular 2组件中的Google AdSense广告吗?但答案实际上并不适合我.我看到的是空白，而不是我的广告.我要放置的是自适应广告.我使用以下模板代码完全按照上述问题的回答进行了操作:

I have seen this Google AdSense ads in Angular 2 components? but the answer isn't actually working for me. I see a blank space instead of my ad. What I'm trying to place is responsive ad. I did exactly as the answer in the above question said, with this template code:

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

有什么想法吗?

推荐答案

此链接中的答案对我有用.更好的是，我设法改进了可与动态广告位信息一起使用的代码.

The answer in this link is worked for me. Even better I managed improve that code which can be use with dynamic Slot info.

banner.component.ts

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中添加

Add this in your html where you want your ad to appear

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

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

Add google adsense script in your main html file

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

别忘了添加app.module.

Don't forget to add app.module.

另一方面，Google adsense标语不会显示在localserver中，如果在服务器中，则需要花费一些时间才能显示出来.您可以通过将备用广告属性更改为

In the other hand, Google adsense banners doesn't show in localserver and if it's in server it takes time to shown up. you can sure that it's working by changing backup ads property to

Fill space with a solid color 

在Google Adsense门户中

in Google Adsense portal.

这篇关于在Angular 2应用程序上使用Google Adsense广告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！