Responsive AdSense

[Brogan]

Brogan submitted a new resource:

Responsive AdSense - Adverts R Us

One of the biggest concerns with 1.2 has been how to activate the responsive design while still using AdSense.

Obviously as the various page widths are now totally dynamic, simply adding a Google ad slot in the normal manner won't work.
Once the browser width reduces below the width of the advertisement, it will break out of the right hand side, producing a horizontal scrollbar.

This is a simple guide explaining how to display different ad slots based on the screen width.

This is based on...

Read more about this resource...

 

[rdn]

Thanks for this @Brogan

 

[Indiamatic]

Final Touch and clear way for XF 1.2

 

[darren]

Final Touch and clear way for XF 1.2

Agreed, thanks Brogan!

 

[Brogan]

Brogan updated Responsive AdSense with a new update entry:

An example using if and else.

Here's another example using if and else statements.

This is in the ad_below_content template.

As the width of this area varies depending on whether there is a sidebar or not, we can factor that in to the code.

We can also use a template array to stop ads being served on some templates altogether.

<xen:hook name="ad_below_content" />

<xen:if is="!{$visitor.user_id}">
    <xen:if is="!in_array({$contentTemplate}, array('register_form', 'forum_list', 'cta_overtaking_index'))">...

Read the rest of this update entry...

 

[TsinJu]

Thanks a lot. This is very Helpful

 

[Rho Delta]

Extremely helpful. Once I upgrade to 1.2 I'm gonna try this ASAP.

 

[RobParker]

The adsense help page sort of hints that this can be done to make it properly responsive with media queries. Has anyone found an acceptable way of doing that or is it just not possible?

 

[MattW]

Just to note, using the user="$visitor" will show the current members avatar who is viewing the thread. Just had some of my members wondering why their avatar was showing in the sponsors add.

I've changed the avatar div to use the medium default avatar

<div class="avatarHolder">
                    <span class="helper"></span>
                    <a class="avatar Avm" data-avatarhtml="true"><img src="@imagePath/xenforo/avatars/avatar_m.png" width="96" height="96" alt=""></a>
                </div>

 

[Brogan]

Good point.
If only showing to guests though it will be fine to use that.

 

[MattW]

Good point.
If only showing to guests though it will be fine to use that.

I didn't know it was showing their avatar, as I was always testing it as a guest. It's took them long enough to realise!

 

[Brogan]

Brogan updated Responsive AdSense with a new update entry:

Another example using different ad slots for responsive and non-responsive styles

This is another example showing how different styling can be applied to ad slots based on whether the style is responsive or not and the width of the browser window.

If like me you have two styles - a non-responsive and responsive style - you may want to position your ad slots differently.

Let's take a look at the template code first:

<style type="text/css">
.CtaDbAd {
float: right;
}

<xen:if is="@enableResponsive">
    @media (max-width:910px) {
    .CtaDbAd {
    float: none;...

Read the rest of this update entry...

 

[Bram]

Can't find the right page anymore on the webs with the explanation how to do but Google now also supports this for their new Asynchronous Ad Tags.

 

[rdn]

The second code tutorial might be against adsense TOS?

Hey guys, just a heads-up ... I've had "second post" ads for several years on my forums and never had problems. Recently had an Adsense Terms of Service violation using this mod so I had to remove the second post camouflaged ad.

Google sent a notice saying the ad that blended in as a forum post was against the turns of service. Mine was no more conspicuous than any I've seen, I even kept the standard "Sponsored Links" text that was permitted and did not show an avatar.

Just be warned, if you're using such an ad, you run the risk of violating Adsense TOS. For me this was a deal breaker so I had to remove the ad, despite it being so profitable over the years

Hello,
This is a warning message to alert you that there is action required to bring your AdSense account into compliance with our AdSense program policies. We’ve provided additional details below, along with the actions to be taken on your part.
Issue ID#: 214******
Affected website: ******
Example page where violation occurred: *******
Action required: Please make changes to your site within 72 hours.
Current account status: Active

Violation explanation
FORMAT MIMICKING: Publishers may not implement Google ads in a manner that disguises the ads in any way. For instance, publishers may not format neighboring content to look similar to the ads, or make ads look like games or forum posts. More information about this policy can be found in our help center (http://support.google.com/adsense/bin/answer.py?hl=en&answer=1346295#Formatting_content_to_mimic_ads ).

 

[MattW]

The second code tutorial might be against adsense TOS?

I had a warming from Google regarding a similar issue for 2nd post adds, but it was due to me putting a similar add near theirs. As soon as I removed the other add, they closed the case, so I don't think they are that concerned about it as long as it doesn't look like it's content in a post and it clearly an advert and not being disguised in any way.

 

[Brogan]

Yes, I've had mine styled like that since the start without issue.
I have text under the avatar and also in the post stating it is an advertisement.

 

[Brogan]

The adsense help page sort of hints that this can be done to make it properly responsive with media queries. Has anyone found an acceptable way of doing that or is it just not possible?

I can't see a way to do it.

Media queries can't be used to include or remove templates, only affect the styling of existing elements on the page.
So you can apply different styling like so:

<style type="text/css">
.CtaDbAd {
float: right;
}

<xen:if is="@enableResponsive">
    @media (max-width:910px) {
        .CtaDbAd {
        float: none;
        text-align: center;
        margin: 8px 0;
        }
    }
</xen:if>
</style>

<xen:if is="!{$visitor.user_id}">
    <xen:if is="@enableResponsive">
        <div class="CtaDbAd">
            <script type="text/javascript">
            google_ad_client = "ca-pub-id";
            width = document.documentElement.clientWidth;
            /* Overtaking Top Responsive */
            google_ad_slot = "1234567890";
            google_ad_width = 320;
            google_ad_height = 50;
                if (width > 483) {
                /* Overtaking Top */
                google_ad_slot = "1234567891";
                google_ad_width = 468;
                google_ad_height = 60;
                }
            </script>
            <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
    <xen:else />
        <div class="CtaDbAd">
            <script type="text/javascript">
            google_ad_client = "ca-pub-id";
            /* Overtaking Top */
            google_ad_slot = "1234567891";
            google_ad_width = 468;
            google_ad_height = 60;
            </script>
            <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
    </xen:if>
</xen:if>

What that does is display the ad floated right for the fixed style and also the responsive style at widths of 910px and above.
Below that the ad is not floated and is center aligned, which as achieved using the CSS at the top and the .CtaDbAd class.

You can of course use display:none to show or hide ads using the same method but that is against the ToS of Google AdSense and probably most (all?) other ad serving companies.

Unfortunately what you can't do is this:

<xen:if is="@enableResponsive">
    @media (max-width:320px) {
        <xen:include template="ad_1" />
    }
<xen:else />
    @media (max-width:480px) {
        <xen:include template="ad_2" />
    }
<xen:else />
    @media (max-width:800px) {
        <xen:include template="ad_3" />
    }
<xen:else />
    <xen:include template="ad_4" />
</xen:if>

Which would dynamically include or remove templates as the browser width changes.

So at this moment in time, the only method is to use the JavaScript provided by Google, which means the adverts don't dynamically change as the browser width changes.
I can't imagine this will be a major problem though as rarely do people change their browser width when browsing and even if they do, the next page they click on, the correct size ads will be shown.

 

[Veer]

Very informative resource!

@Brogan, Do we have to create 3 different ad units in AdSense for a single ad place in ad_thread_list_below_stickies template for example? Like 1) ad unit for 320x50, 2) another ad unit for 468x60, and 3) 728x90

 

[Brogan]

Yes.

You can re-use ad units in other templates if you wish.

 

[Bram]

@Brogan I noticed you are using the same ad slot id for all three sizes. Is that just as an example or will this actually resize one single ad size you pick as default?

If so, how do you track which device is click which ad?

Can you also use three different id's ?