Responsive AdSense

[Andre Daub]

Wow thank you very much. Now it works fine.
And the oferflow auto in .bbCodeQuote works perfect.

Thank you for your patience.

 

[zastavra]

Hey Brogan,

How can this part:

                    if (width > 743) {
                    /* Thread List Below Stickies */
                    google_ad_slot = "123456890";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    }

to be set like that?

if (width > 743) {
/* Above Content */
Two adsense blocks 336x280 inline;
}

Thanks

 

[Paul B]

You will need to use two ad slots and two divs.

 

[zastavra]

Well, I use this

if (width > 743) {
<div style="text-align: left;">
/* Above Content Left 336x280 */
google_ad_slot = "codehere";
google_ad_width = 336;
google_ad_height = 280;
</div>
<div style="text-align: right;">
/* Above Content Right 336x280 */
google_ad_slot = "codehere";
google_ad_width = 336;
google_ad_height = 280;
</div>
}

but no ads are showing up.

This one for a single block works fine though

if (width > 743) {
/* Above Content Left 336x280 */
google_ad_slot = "codehere";
google_ad_width = 336;
google_ad_height = 280;
}

 

[Anthony Parsons]

Thought I would share mine...

I have to seriously thank all those before me who have played with this stuff, which just made my life a whole lot easier. I modified some of this code, and some other stuff found which works great, for displaying both ad links and text/image responsive ads inline with threads. I changed the avatar slightly, to a registered and private account I created to show the inline display as Google Adsense specifically by avatar, not just username.

If you want to use any of this, go for it. I've used this in the ad_message_below to get this type of ad layout: https://www.mycombatptsd.com/threads/spouses-should-be-respected-not-rejected.3225/page-3

The first you can modify, then replicate which inserts full width ad links, then medium as the screen decreases, then small block ads for mobile viewing. You will obviously have to change some details below with your own adsense id and ad identifiers, and if you create an adsense user, swap it with your userid.

<xen:if is="!{$visitor.user_id} AND {$post.position} % {$xenOptions.messagesPerPage} == 0 AND {$thread.reply_count} > 0">
        <li class="message">
        <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
                <div class="messageUserBlock">
                    <div class="avatarHolder">
                        <span class="helper"></span>
                        <a href="{xen:link 'members/member.2326/'}" class="avatar" data-avatarhtml="true"><img src="data/avatars/m/2/2326.jpg" width="96" height="96" alt="Member" /></a>
                    </div>
                    <h3 class="userText">
                    <span style="font-weight: bold">Google AdSense</span>
                    <em class="userTitle" itemprop="title">Advertisement</em>
                    </h3>
                    <span class="arrow"><span></span></span>
                </div>
           </div>
            <div class="messageInfo primaryContent">
                <div class="messageContent">
                    <article>
                        <blockquote class="messageText ugc baseHtml">
                            <div id="google-linkads-1"></div>
                            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <script>  
                ad = document.getElementById('google-linkads-1'); 
               
                var adWidth = (typeof ad.getBoundingClientRect === 'function') ?
                ad.getBoundingClientRect().width : ad.offsetWidth; 
               
                /* replace XXX with your publisher id */
                google_ad_client = "ca-pub-xxx";
              
                /* replace all ad-slot#X strings with the correct ad slot IDs */
                if ( adWidth >= 698 )      google_ad_param = ["728", "15", "ad-slot#X"];
                else if ( adWidth >= 460 ) google_ad_param = ["468", "15", "ad-slot#X"];
                else if ( adWidth >= 100 ) google_ad_param = ["200", "90", "ad-slot#X"];
                else                       google_ad_param = ["200", "90", "ad-slot#X"];
          
                document.write (
                '<ins class="adsbygoogle" style="display:inline-block;'
                + 'width:' + google_ad_param[0] + 'px;'
                + 'height:' + google_ad_param[1] + 'px'
                + '" data-ad-client="' + google_ad_client
                + '" data-ad-slot="' + google_ad_param[2]
                + '"></ins>'
                );
                (adsbygoogle = window.adsbygoogle || []).push({});
          
            </script>
                         
                        </blockquote>
                    </article>
                </div>
            </div>
        </li>
</xen:if>

And the new responsive adsense ads look something like:

<xen:if is="!{$visitor.user_id} AND {$post.position} % {$xenOptions.messagesPerPage} == 1 AND !{$message.conversation_id}">

<li class="message">
        <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
                <div class="messageUserBlock">
                    <div class="avatarHolder">
                        <span class="helper"></span>
                        <a href="{xen:link 'members/member.2326/'}" class="avatar" data-avatarhtml="true"><img src="data/avatars/m/2/2326.jpg" width="96" height="96" alt="Member" /></a>
                    </div>
                    <h3 class="userText">
                    <span style="font-weight: bold">Google AdSense</span>
                    <em class="userTitle" itemprop="title">Advertisement</em>
                    </h3>
                    <span class="arrow"><span></span></span>
                </div>
           </div>
            <div class="messageInfo primaryContent">
                <div class="messageContent">
                    <article>
                        <blockquote class="messageText ugc baseHtml">
                         
                             <div class="message-body">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- message-body -->
                <ins class="adsbygoogle message-body"
                     style="display:inline-block"
                     data-ad-client="ca-pub-xxx"
                     data-ad-slot="xxx"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                </div>
                         
                        </blockquote>
                    </article>
                </div>
            </div>
        </li>

</xen:if>

And for the responsive ads to be displayed, just play with the sizes needed in the following media queries, adjust as required:

@media (min-width: 940px) {
.message-body {
    width: 728px;
    height: 90px;
}
}

@media (max-width: 939px) {
.message-body {
    width: 300px;
    height: 250px;
}
}

@media (max-width: 400px) {
.message-body {
    width: 250px;
    height: 250px;
}
}

 

[Anthony Parsons]

How do I stop this showing with the best posts add-on? That add-on grabs multiple posts with ads on a single page, thus breaching Googles policy.

Where do I find the array name to use?

 

[rdn]

How do I stop this showing with the best posts add-on? That add-on grabs multiple posts with ads on a single page, thus breaching Googles policy.

Where do I find the array name to use?

And this to your xen if array:

AND !({$post.isBestAnswer} AND {$post.dupe})

 

[Anthony Parsons]

Nope, that didn't work.

 

[Paul B]

I don't use that add-on so have no idea what the variable names are or which templates they are available in.

You may be better off asking the author.

 

[Anthony Parsons]

Ok... even tried adding: AND !in_array({$contentTemplate}, array('dark_bestposts_list'))

Didn't work either.

 

[rdn]

Nope, that didn't work.

And this to your xen if array:

Nah, it works fine for me.
I ask this on the addon author myself few months ago.

 

[rdn]

And this to your xen if array:

@Lior. can confirm this.

AND !({$post.isBestAnswer} AND {$post.dupe})

Using it for months already.

 

[Anthony Parsons]

I ask this on the addon author myself few months ago.

You sure? I just read through the discussion and I don't see you: http://xenforo.com/community/threads/best-posts-uncover-your-top-content-paid.75322/

 

[rdn]

You sure? I just read through the discussion and I don't see you: http://xenforo.com/community/threads/best-posts-uncover-your-top-content-paid.75322/

Vis PM.

 

[rdn]

Here it is:

 

[Anthony Parsons]

To remove adsense from the best post add-on by @Luke Foreman he gave me the answer, which is to add to your xen:if statement wrapping your adsense:

AND !{$dark_bestposts_type}

Example: <xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 0 AND !{$message.conversation_id} AND !{$dark_bestposts_type}">

 

[rdn]

Aw sorry that's different addon than I have.

 

[0ptima]

@Anthony Parsons Do the media queries go in EXTRA.CSS?

 

[Paul B]

You can put them in the ad template.

 

[0ptima]

Thanks.