如果你在谷歌上搜索在angular 里面加 adsense 的方法, 很多人会告诉你这是不能的. 特别是一些比较老的文章.
原因也很简单, 因为谷歌无法验证你的网站, 也就是不会在你的网站上投放广告. 但是这个已经是老黄历了, 现在的SPA的网站都是可以成功的投放谷歌的adsense 广告的. 如果你没有成功, 那应该是你没有做对.
首先, 我们来理解一下为什么过去在SPA中无法放谷歌的广告. SPA的特点就是, 几乎所有的内容都是由javascript 生成的, 如果你看首页的源码, 你可能只能看到短短的一页. 里面基本没有什么内容, 就是调用了几个javascript. 在不支持 javascript 的浏览器中, 这种网站基本就是一片空白. SPA 既然叫做single page, 那就是只有一个页面. 没有更多的页面了, 所有的内容都是由javascript 生成并呈现的, 跳转页面也是由javascript 完成, 对于浏览器来说, 其实还是在index.html 这个页面.
早期的谷歌爬虫由于不支持 javascript, 所以它们是看不见网站的内容的, 在他们眼里, 这个网站就是一个空白页面. 试问一个空白页面有没有投放广告的必要? 所以, 早期的SPA是无法投放谷歌的广告的, 当然有些聪明人会给机器人设置一个特别的缓存页面让机器人可以看到一些内容从而通过验证.
而现在的爬虫基本上都可以认识SPA了, 所以也就不存在这个问题. 但是在SPA中投放广告还是有些不同的, 这就是为什么很多人不成功的原因. 因为谷歌提供的广告代码通常包含 javascript, 由于安全原因, 直接粘贴谷歌的代码在你想要的地方可能无效. 比如说在 angular 2+ 中, 你如果把谷歌的广告代码贴在某个 component 的 html 文件里, 这是没有用的, 因为 angular 会移除所有的 script tag, 所以谷歌广告的代码不会被执行, 所以要通过一些别的办法来运行这个Script, 或者干脆把这些代码放在 index.html 里面, 而不是component 里面.
以下的这种广告代码放在angular 的 index.html 是会工作的.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22https%3A%2F%2Fpagead2.googlesyndication.com%2Fpagead%2Fjs%2Fadsbygoogle.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9753349551653834" data-ad-slot="3179523493" data-ad-format="auto" data-full-width-responsive="true"></ins> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20(adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D).push(%7B%7D)%3B%0A%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
演示请看这里 https://cc.dengnz.com