在单页网络应用程序中显示相同的 dfp 广告答案

【问题标题】：Showing same dfp ads in a single page web application在单页网络应用程序中显示相同的 dfp 广告
【发布时间】：2014-06-12 19:30:43
【问题描述】：

我有一个包含 dfp 广告的单页网络应用程序。我有两个正在触发的 dfp adunit，它们被放置在内容之间，内容是特定类别的文章列表。

当我点击另一个类别时，它只是加载不同类别的文章（不更改地址栏中的 url）并触发相同的广告。所以这就像在同一页面上触发广告一样。

广告没有第二次出现，这是因为您不能在同一页面上使用相同的广告单元。

由于我的 DOM 每次都在重建，所以我无法使用 dfp 提供的刷新功能，有什么办法可以做到这一点吗？

【问题讨论】：

标签： javascript ads single-page-application google-dfp

【解决方案1】：

从这个问题中得到的启示很少。 dfp 插件以及正常的 googletag 实现应该适用于单页应用程序，只是应该满足两个要求

enableSingleRequest 不应设置为 true。如果是 Matt 的 dfp 插件，您应该传递 enableSingleRequest:false 以便他不会将其设置为 true。这是因为如果您将其设置为 true，您将无法在同一页面上提出更多请求来获取广告。另外 enableSingleRequest(false) 也失败了。
当您动态触发广告时，即无需重新加载页面；确保从放置广告的新容器开始。其确切原因仍未得到证实，但似乎这是 googletag 内部的工作方式。

如果您还有其他的cmets，请添加。

【讨论】：

【解决方案2】：

如果您使用 jQuery，请查看我制作的 plugin，它封装了 DFP 并允许您在单页应用程序中轻松使用它。

这是一个使用 turbolinks 的演示，类似于您的单页应用程序：

http://coop182.github.io/jquery.dfp.js/dfptests/demo1.html

还有什么问题可以告诉我。

编辑：这是另一个单页示例 - http://coop182.github.io/jquery.dfp.js/dfptests/spa.html

【讨论】：

上面的demo如何是一个单页应用？。单击链接会将您带到另一个页面。查看上述演示的修改版本。 app.genwi.com/resources/44132/misc/ad_single_page.html。当您单击此处刷新时；它尝试制作相同的广告；但未能投放广告。
最初的演示绝对是一个单页应用程序... turbolinks 处理点击并将 url 更改推送到浏览器...所以即使看起来它正在更改页面，但它不是。无论如何...我添加了另一个演示，应该提供更好的示例...您制作的演示无法正常工作，因为您正在更改 id 并清空 div...
感谢演示。我仍然有一个困惑。当我从演示中删除 enableSingleRequest:false 时，它不会触发新广告。你能告诉我为什么使用 enableSingleRequest 吗？
DFP 使用 enableSingleRequest 选项一次性获取当前页面的所有广告...使用此选项时，无法为同一页面获取更多广告...我的插件设置 enableSingleRequest默认为 true，因为在大多数情况下它更有效，但对于在同一页面上生成和获取新广告的单页应用程序，您始终需要将 enableSingleRequest 设置为 false。
又是一个困惑；你说我上面的演示不起作用，因为我正在清空 div 并更改 id。这是 googletag 实现本身的限制，我们不能以这种方式使用它吗？

【解决方案3】：

努力去做：

function myGoogleTagLoaderFn(callback) {
    // reset googletag lib
    window.googletag = null;

    // we're using requirejs, so we have to do this as well
    window.requirejs.undef('http://www.googletagservices.com/tag/js/gpt.js');

    myRequireOr$getScriptFn('http://www.googletagservices.com/tag/js/gpt.js', function success() { callback(); });
}

不用担心在每次页面加载时加载库，这与在非单页站点中相同，并且库会发送合理的缓存标头。当然，缺点是脚本每次都会重新评估。好处是您可以通过这种方式使用 singleRequest 模式。

【讨论】：