결론적으로, 제가 원하는 것은 아래 사이트와 매우 유사한 것입니다.
Quora의 토픽 페이지 우측 사이드바에 있는 300x250 광고를 주목해 보세요.
저도 유사한 Discourse 포럼 토픽 레이아웃을 가지고 있으며, 각 토픽에는 많은 게시글이 있습니다. 사용자가 300x250 고정/떠다니는 배너 광고를 볼 수 있도록 하고, 이는 스티키(sticky) 상태여야 합니다. 즉, 사용자가 토픽 페이지에서 더 많은 게시글을 읽기 위해 아래로 스크롤할 때, 이 우측 사이드바 광고는 Discourse의 현재 토픽 내비게이션 슬라이더(토픽 타임라인) 바로 아래에 고정되어 있어야 합니다.
https://www.quora.com/What-are-the-lessons-people-most-often-learn-too-late-in-life 에서 볼 수 있는 것과 동일한 동작 방식입니다.
이것을 어떻게 구현할 수 있을까요? 이미 GitHub - discourse/discourse-adplugin: Official Discourse Advertising Plugin. Install & Start Serving Ads on Your Discourse Forum · GitHub 을 사용 중이지만, 광고 플러그인에서 이를 위한 옵션을 찾을 수 없었습니다.
How to show advertising in timeline of the topic page? 를 찾았지만, 여기에 Google AdSense 광고 코드를 어떻게 삽입해야 하는지 확실하지 않습니다. 광고 코드는 다음과 같은 형태인데, 이를 Ember JS HTML에 어떻게 삽입해야 하는지 모르겠습니다. 스크립트 및 닫히지 않은 div 오류가 발생하거든요. 이미 스크립트 태그인데, 기존 Discourse Ember JS 스크립트 안에 Google JS 스크립트를 어떻게 로드해야 할까요?
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 토픽 사이드바 타임라인 -->
<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 table of content DiscoTOC - automatic table of contents 도 사용 중이므로, 광고는 현재 TOC(목차) 아래에도 표시되어야 합니다. 현재 TOC가 나타날 때 토픽 타임라인이 사라지는 것을 확인했습니다.
이 스티키 광고가 제 사용자에게 더 잘 노출되어 CPM이 개선될 수 있도록 이 문제를 해결하는 데 도움을 주실 수 있을까요?
@ladydanger @neil 도와주실 수 있나요?
미리 감사합니다.
