如何在桌面平台的ionic4项目中显示谷歌广告？
由于我是ionic框架的新手，我对Ionic知之甚少。在文档中，他们展示了如何在移动平台上显示广告。但他们没有展示如何在桌面平台上显示广告的文档。它们展示了adMobfree和adMobPro在移动平台上的使用。有没有办法在ionic项目的桌面平台上显示广告？请告诉我一种在ionic项目的桌面平台上显示广告的方法。
回答 2
Stack Overflow用户
发布于 2020-01-06 17:10:30
使用ng2-adsense npm包对我没有帮助。但我找到了解决这个问题的简单方法。首先，需要将脚本添加到head标记中，如下所示。
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>之后，您需要在body标记中编写以下代码。
<body>
<div>
<ins class="adsbygoogle"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="link"
data-full-width-responsive="true"
data-full-width-responsive="true">
</ins>
<!-- data-ad-slot=Your ad Unit number that you have created -->
</div>
<app-root style="display: none;"></app-root>
<script>
window.onload = function () {
(adsbygoogle = window.adsbygoogle || []).push({});
console.log(adsbygoogle);
}
</script>
</body>就这样。编写完这段代码后，您将看到广告。顺便说一句，要查看广告，你需要提供一个活跃的谷歌广告感知账户的data-ad-client id。你需要disable your ad-blocker才能看到广告。如果你看到这样的console.log，就意味着你的广告来了。
{loaded: true, push: ƒ}我已经设置了style=" display: none;"，这样你就可以看到广告了。如果你看到的广告意味着广告意识正在发挥作用。现在，您可以添加您的逻辑以在您想要显示的位置显示广告。
Stack Overflow用户
发布于 2020-01-07 01:37:44
在我的例子中，我只使用Web平台标准的web组件，而没有像Angular、Vue或React这样的框架。如果您寻求相同的解决方案，这可能会有所帮助。这是一个适合我的stencil.js组件。在我的例子中，现在，我只是硬编码来呈现单个广告，但你可以用标签属性来扩展这个想法，这样它就可以根据标签的使用进行更多的定制，就像易卜拉欣·哈利勒上面描述的ng2-adsense (我稍后会用到的东西)。
这就要求你在你的单页应用程序的index.html头中包含标准的javascript include for Google Adsense。例如：
<!-- Global site tag - Google Adsense -->
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>然后，这里是模板组件gls-adsense ad.tsx...
import { Component, h } from '@stencil/core';
declare global {
interface Window { adsbygoogle: any; }
}
@Component({
tag: 'gls-adsense-ad',
})
export class GlsAdsenseAd {
adsbygoogle:any;
componentDidRender() {
(this.adsbygoogle = window.adsbygoogle || []).push({});
}
render() {
return (
<div>
<ins class="adsbygoogle"
style={{ display: `block` }}
data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>
);
}
}您可以在my site上博客帖子页面的右栏中看到这一点，my site是一个用ION4和Stencil.js构建的静态站点：https://codyburleson.com
https://stackoverflow.com/questions/59598271
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号