如何在主题页面右侧边栏的折叠上方显示一个浮动的固定300x250 AdSense广告?

基本上,我想要实现的效果与以下网站非常相似:

注意 Quora 话题页面右侧边栏中的 300x250 广告。

我有一个类似的 Discourse 论坛话题布局,每个话题包含大量帖子。我希望我的用户能看到一个固定/悬浮的 300x250 横幅广告,并且该广告应该是粘性的。也就是说,当用户在话题页面滚动以阅读更多帖子时,这个右侧边栏广告应保持在当前位置,恰好位于 Discourse 当前话题导航滑块(话题时间线)的下方。

其行为应与 https://www.quora.com/What-are-the-lessons-people-most-often-learn-too-late-in-life 上看到的效果一致。

我该如何实现这一点?我已经在使用 https://github.com/discourse/discourse-adplugin,但并未在该广告插件中找到实现此功能的选项。

我找到了这个链接:https://meta.discourse.org/t/how-to-show-advertising-in-timeline-of-the-topic-page/160049,但不确定如何将 Google AdSense 广告代码插入其中。该代码看起来像这样,我不知道如何在 Ember JS HTML 中插入它,因为它会给我带来脚本和未闭合 div 的错误。既然它本身已经是一个 script 标签,我该如何在现有的 Discourse Ember JS 脚本中加载 Google JS 脚本呢?

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Topic side bar timeline -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-708790731309"
 data-ad-slot="5067761793"
 data-ad-format="auto"
 data-full-width-responsive="true"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

当我尝试这样做时,我收到了以下错误:


我的代码如下:

<script type="text/discourse-plugin" version="0.8">

api.decorateWidget('topic-timeline-container:before', helper => {
    return helper.h('div.side-block', [
    	helper.rawHtml('<div id="friends"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-708790731302" data-ad-slot="5067761793" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script></div>'),
    ])
 });    
</script>

此外,我还在使用 Discourse 目录功能(https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143),因此广告也必须显示在当前目录下方。现在我注意到,当目录出现时,话题时间线就会消失。

有人能帮我实现这个功能吗?这个粘性广告将更能被我的用户看到,从而提高 CPM。
@ladydanger @neil 你们能帮忙吗?

提前感谢。

我认为浮动广告可能违反 AdSense 的使用条款,请小心。

上次我检查时他们也是。

不,它们并不违反 AdSense 政策。我已经在运营一个网站多年,并与 Google 认证合作伙伴合作,是他们自己添加了这种浮动广告。Quora 也在做同样的事情。

你在帖子中也提到了这一点。但我该如何获取 AdSense 代码的 iframe 版本呢?

我的浮动广告是我的,不是 AdSense 的。

许多顶级新闻网站在右侧边栏展示固定广告,因为用户在页面左侧阅读新闻并向下滚动时可以看到这些广告。

包括 Forbes、Huffingtonpost、Quora、9gag、BBC 等。

有人能帮我将 AdSense 代码嵌入到那个 Ember.js 代码块中吗?我遇到了语法错误。

您的代表是否已在您的账户中添加了允许使用粘性 AdSense 广告单元的权限?我可以肯定,您提到的发布商和我们都有此权限,但您必须与他们签署高级发布商合同。否则,这是导致账户被封禁的最快途径之一。特此提醒,也供其他有意尝试此操作的人参考。

@Terrapop 是的,我是 Google 的官方高级发布商合作伙伴。能否请您帮我解决这个难题?我折腾了一整天,却始终无法让它正常运行。

同时,我也是 Google Ad Exchange 的官方高级合作伙伴。

此外,我还接入了其他广告网络,因此也可以将它们的代码放入粘性广告位。但问题是,这些广告网络提供的都是基于 JavaScript 的标签,需要插入到 HTML 代码中。当我尝试将这些 JS 标签嵌入到 Ember.js 代码中(就像我在上面的帖子中展示的那样)时,系统就会报语法错误。

为什么不直接在时间线容器上方添加一个带 ID 的 div,并通过 DFP 进行定向/投放呢?特别是如果您不希望在该位置显示响应式 AdSense 单元,而是固定尺寸的单元。广告容器根本不需要 JavaScript。我们在 Discourse 上所有的广告都是这样做的,包括通过 prebid.js 进行头部竞价。否则,我想您可能需要开发一个插件,因为我不确定是否可以通过模板组件在某处放置原始 script 标签。我认为不行,但其他人可能会有更好的答案。

非常感谢您的建议。我实际上从未使用过 DFP,但我确实有一个 DFP 账户。
能否请您提供一个代码示例,说明如何在时间轴容器上方放置一个带有 ID 的 div,并通过 DFP 进行定位/投放流量?

我需要对我的 Discourse 设置和 DFP 账户进行哪些更改?请提供截图和代码示例,这将非常有帮助。

抱歉,我在自定义主题页面布局或 Discourse 方面经验不足,一直使用的是默认设置。如果您能提供帮助,那将非常棒。

既是 Premium AdX 合作伙伴却从未使用过 DFP?这怎么可能?好吧……:roll_eyes:

这里(Meta)有很多关于如何构建组件的指南。但我无法将我们的 DFP 实现代码分享给您,因为这只会让您感到困惑,因为我们还将其与 header bidding 集成在一起,这比您所需的内容复杂得多。不过,Google 提供了非常详细的简单设置文档,其中主要是基础的 JavaScript 内容。

我的广告网络总是帮我处理 DFP,我自己并不操作。

你本可以提供一个简单的代码示例,而无需分享你的个人代码,只需告诉我我会用自己的代码替换你的即可……任何视频教程或代码示例都可以(你可以移除你私密的 DFP 代码,我不介意),但我希望了解具体该如何操作……?

从未听说过广告网络会为客户处理 DFP。代理商确实会……但广告网络也会吗?

大致是这样的……(这并非完全可运行的代码,还需要更多内容,但仅供您参考)

<div id="adunit_sidebar"></div>

var adunit_sidebar = googletag.defineSlot('/XXXXXXX/SIDEBAR', [300,250], 'adunit_sidebar').addService(googletag.pubads());

googletag.pubads().disableInitialLoad();
googletag.enableServices();
googletag.display([adunit_sidebar]);
googletag.pubads().refresh([adunit_sidebar]);

但如果您完全无法理解这段代码,就必须向您的“广告网络”或代理商咨询,请他们帮忙设置。

让我试试这个。我应该把这段代码放在 Discourse 的哪个位置?如果是在 after head 部分,请更新代码,以便我可以将其放入 site head 中,而不会出现任何 JavaScript 或语法错误。此外,还需要哪些其他依赖项或脚本才能让这段代码完全运行?

不,你不能直接这样使用。正如多次提到的,还需要更多条件。由于你缺乏对 DFP、Discourse 或 JavaScript 的基本技术理解,建议你在 Marketplace 中聘请具备相关能力的人来帮助你。