Angular.js 和 Adsense
Posted
技术标签:
【中文标题】Angular.js 和 Adsense【英文标题】：Angular.js & Adsense 【发布时间】：2013-06-29 07:31:07 【问题描述】：我正在尝试在我的 angular.js 应用上投放广告，但我做了一些阅读，发现无法仅复制和粘贴普通的 adsense 代码。
我听说您应该“将其包装在带有嵌入的指令中”，而我能找到的唯一示例是另一个 *** 帖子： AngularJs and AddThis social plugin
有人可以提供有关如何使用 Google Adsense 执行此操作的指导吗？
【问题讨论】：
你好大卫，我最近也在学习 Angular。我曾经和这个人 John Lindquist 一起工作（他也在 Papervision 上做了一些工作，这就是我最初听说他的方式）无论如何他有一个网站 egghead.io 专门用于 Angular 教程。查看有关指令的内容，他有几个简短的视频涵盖了它。除此之外，我只会使用文档作为最新的参考。据我了解，基本问题是 Angular 将添加/删除 DOM 元素，如果有 JS 需要处理这些 DOM 元素，则需要将其放入指令中以便运行。 【参考方案1】：你需要创建一个指令
yourApp.directive('ads', function()
return
restrict: 'A',
templateUrl: 'partiels/adsTpl',
controller: function()
(adsbygoogle = window.adsbygoogle || []).push();
;
);
在我的例子中使用您的广告代码创建一个模板“partiels/adsTpl.html”
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-00000000"
data-ad-slot="000000"></ins>
将指令添加到您的页面
<div data-ads></div>
将 adSense js 调用放在主页的 head 部分，放在 angularjs 之前
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
....
等等，这对我来说非常适合
【讨论】：
因为我有多个视图和路线，所以它只显示前3次，然后在网站重新加载之前不起作用。 嗨@kode，我的网络应用程序有很多视图，但就我而言，它运行良好，请提供更多详细信息。 谢谢@zied.hosni。我在这里有一个帖子：***.com/questions/29709973/… 看来唯一的区别是我的指令使用了 replace: true 您是否将 adsense 指令添加到您的视图中？或者只是到索引页 太棒了！这正是我一直在寻找的，它很简单并且与 AngularJs 配合得很好！【参考方案2】：您应该像这样对 adSense 脚本执行包装指令...
<div data-my-ad-sense>
<!-- Google AdSense -->
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push();
</script>
</div>
并将此指令添加到您的指令中...
directive('myAdSense', function()
return
restrict: 'A',
transclude: true,
replace: true,
template: '<div ng-transclude></div>',
link: function ($scope, element, attrs)
)
这是 adSense 异步代码。
【讨论】：
这似乎不起作用，我的广告显示为空白（但奇怪的是仍然加载了 iframe）。有任何想法吗？我在 ng-repeat 中使用它们，其中每个第 4 个元素都有一个广告。如果有帮助，你可以在 sparkmyinterest.com 上看到它 此解决方案似乎有效，但是当 ng-view 更改时，如果在 ng-repeat 中打印多个 ADS：我第一次查看视图：OK（或者有时一个或缺少更多 ADS），但更改视图并返回一些（或全部）ADS 丢失 这不是一个好的解决方案。指令包装器完全没有任何作用。只是说 data-my-ad-sense 来自哪里？ @JohnAndrewsdata- 部分只是指定了一个自定义 html5 属性（允许您的 html 进行验证）。 my-ad-sense 部分是第二个 sn-p 中定义的指令的名称。【参考方案3】：
我不确定按照 adsense 条款执行以下操作是否有效。
在更改 url 之前删除所有与 google 相关的变量
Object.keys(window).filter(function(k) return /google/.test(k) ).forEach(
function(key)
delete(window[key]);
);
【讨论】：
【参考方案4】：在AngularJS控制器中，添加init()函数，添加一行
(adsbygoogle = window.adsbygoogle || []).push();
然后在你的视图 html 文件中调用这个init() 函数。
另请参阅https://github.com/featen/ags/blob/master/webapp/js/controllers/dict.js
【讨论】：
以上是关于Angular.js 和 Adsense的主要内容，如果未能解决你的问题，请参考以下文章
ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？
使用 Angular.js 和 Node.js 构建实时应用程序的更好方法是啥？