How can i show a floating sticky 300x250 Adsense Ad on right side bar of topic page above the fold?

[Faizan_Zahid]

Basically, what i want is very similar to what below site has,
Notice the 300x250 Ad on right side bar of the topic page of Quora.

I have a similar Discourse forum topic layout with lots of posts in each topics, i want my users to see a fixed/floating 300x250 banner ad, and it should be sticky, means when users are scrolling down on topic page to read more posts, this right side bar ad should stay sticky, exactly below the current topic navigation slider (topic timeline) of Discourse.
Same behaviour as you see on What are the lessons people most often learn too late in life? - Quora

How can i achieve this? I am already using https://github.com/discourse/discourse-adplugin but i didn’t find any option in the advertising plugin to do that.

I have found this How to show advertising in timeline of the topic page? but not sure how to insert a google adsense ad code inside this, which looks something like, i dont know how to insert this in ember JS html, it gives me script and unclosed div errors. As its already a script tag and how do i load Google JS script inside existing discourse embejs script?

<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>

I am getting this error when i try to do do,

My code looks like ,

<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>

Also, i m also using discourse table of content DiscoTOC - automatic table of contents so the ad must also show below the current TOC. As now i notice when TOC comes, the topic timeline disappears.

Can anyone please help me achieve this, this sticky ad will be more visible to my users and hence CPM can improve.
@ladydanger @neil can u help me?

Thanks in advance.

[bartv (Bart)]

I think floating ads may be against the Adsense terms of use, be careful.

[Stephen]

Last I checked they were too.

[Faizan_Zahid]

no they are not against adsense policy. I’m already running a site for years with a Google certified partner and they themselves added this floating ad. Quora is doing the same.

you also did in your post. but how can I get iframe version of adsense tag?

[bartv (Bart)]

My floating ads are my own, not AdSense’s.

[Faizan_Zahid]

Many top news sites show fixed ad on right side bar, as users read their news on left side of the page and while scrolling down.

including Forbes, Huffingtonpost, Quora, 9gag, BBC etc

Can anyone help me render my adsense code inside that ember js code block. I’m getting syntax errors.

[Terrapop]

Do you have an allowance for a sticky Adsense ad unit put in your account by your representative? I’m certain the publishers you named and we do, but you have to be on a Premium Publisher Contract with them.

If not, that’s one of the fastest ways to get your account banned. Just saying… and possibly for the interest of others who want to pursue this.

[Faizan_Zahid]

@Terrapop yes I’m a premium publisher partner of Google. Can you please help me resolve my problem ? I have been struggling all day to make it work.

I’m also premium partner of Google ad exchange.

Also, I have other ad networks too so I can put their code in sticky too, but to they all are JS based tags which r inserted in html code. but when I insert js tags inside emberjs code like in my topic post above, it gives me syntax error.

[Terrapop]

Why don’t you just put a div with an ID above the timeline container and target/traffic via DFP? In particular, as you do not want to show a responsive Adsense unit at that location, but a fixed size one. No need for JS in the ad container at all. That’s how we do all our ads on Discourse, including header bidding via prebid.js. Otherwise, I guess you have to develop a plugin, as I don’t know if its even possible via a template component to put raw script tags somewhere. I don’t think so, but others may have a better answer.

[Faizan_Zahid]

@Terrapop

n ID above the time

Many thanks for your suggestion, i have actually never used DFP, but i do have an account with DFP.
Can you please provide me a code example how how can i put a div with an ID above the timeline container and target/traffic via DFP ?

What changes would i need to do in discourse settings and in my DFP account, please provide screenshot and a code sample, it would be very helpful of you.

Apologies but i dont have much experience in customising the topic page layout or discourse in general, i have just been using it as default as it is. If you can help me , it would be superb.

[Terrapop]

Premium AdX Partner and never used DFP? How is that possible? Ok…

There are plenty of guides on how to build components here on meta. And I can’t share our DFP implementation code with you. It would just confuse you as we also baked header bidding into it, which is far more complex compared to what you need, but Google has very detailed documentation for a simple setup, it’s pretty basic JS stuff.

[Faizan_Zahid]

My ad networks always handle DFP for me, i don’t.

You could have given me a simple code based example without sharing your personal code, just tell me i will insert my own code instead of yours… any video tutorial or code examples (u can remove ur secret DFP codes, i dont mind) but i want to understand how to do it… ?

[Terrapop]

Never heard that ad networks handle DFP for clients. Agencies yes… but ad networks?

Something along these lines… (this is not fully working code, a lot more is needed, but to give you an idea)

<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]);

But if you can’t understand this code at all, you have to ask your “ad network” or agency to set it up.

[Faizan_Zahid]

let me try this. where do I put this code in discourse ? if in after head. please update the code so that I can put it in site head without any js or syntax errors.
and what other dependencies or scripts are needed to make this fully run?

[Terrapop]

No, you can’t put this as it is anywhere. As said a lot more is required, and as you don’t have any basic technical understanding of either DFP, Discourse, or Javascript, please hire someone who has the ability to help you e.g. in marketplace.