• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

1.2 - Responsive layout and Adsense concerns

CTXMedia

Formerly CyclingTribe
#1
I'm enjoying using the new responsive layout on xenforo.com but am concerned about my Adsense revenue and how the responsive design will impact on that (since my understanding is that it cannot be turned off by default?).

Currently my guests see the "desktop" layout regardless of whether they are using a mobile device or not, but those ads are presumably going to be too big to fit on the responsive page space?

So, will I need to set-up "mobile" ad units that are smaller in size and serve those when the responsive layout is being used?

If so, how would that be achieved?

Cheers,
Shaun :D
 

Brogan

XenForo moderator
Staff member
#2
https://support.google.com/adsense/answer/1354736

Essentially, use if statements coupled with different sized ad units.

Code:
<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    width = document.documentElement.clientWidth;
    google_ad_slot = "1234567890";
    google_ad_width = 320;
    google_ad_height = 50;
        if (width > 500) {
        google_ad_slot = "3456789012";
        google_ad_width = 468;
        google_ad_height = 60;
    }
    if (width > 800) {
        google_ad_slot = "2345678901";
        google_ad_width = 728;
      google_ad_height = 90;
    }

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 

CTXMedia

Formerly CyclingTribe
#4
Thanks @Brogan - so it's going to be down to the ad-code provider to supply responsive javascript, as opposed to being able to directly control the ad template XenForo uses?

In that case I'd better open a support ticket with BuySellAds ... (y)

Cheers,
Shaun :D
 

Jeremy

Well-known member
#5
Yes, its up to the provider, since each provider has separate TOS that must be followed. Google's ad sense code won't work for another one and vice versa.

If you provide your own, @akia, you will have to determine the best way to handle responsive. Be it via media queries or JavaScript.
 

lantek

Active member
#6
That's my concern, all the examples I've seen are for Adsense, but what about if your using DoubleClick for Publishers (DFP) Small Business and having a mix of adsence and your own ads.
Yes I also use DFP to deliver my own direct sold ads and a backfill with Adsense. I too am unclear how the responsive layout can work with regard to ads. Often ads are in completely different positions for mobile, and may be accompanied by other specific changes. It is not as simple as just changing an ad to a different size.
 

CTXMedia

Formerly CyclingTribe
#7
Before I rush off to the suggestions forum @Mike, is it technically possible to have separate "mobile" ad_ templates that are only displayed when in responsive mode?
 

Jeremy

Well-known member
#8
@Clickfinity, with responsive design you don't realistically known what type of browser you are serving before you serve it. You serve the desktop site and apply CSS to refit it. So only showing certain templates on mobile isn't 'feasible'.
 

Mike

XenForo developer
Staff member
#9
Not really. Responsive is entirely a client side thing (it's CSS only).

Besides, you probably don't want to be hiding ads using CSS as they're still being served but won't be clickable. That's likely a good way to violate an ad network's policies...
 

CTXMedia

Formerly CyclingTribe
#10
@Clickfinity, with responsive design you don't realistically known what type of browser you are serving before you serve it. You serve the desktop site and apply CSS to refit it. So only showing certain templates on mobile isn't 'feasible'.
Okay, thanks, and that's why I asked - I thought it was handled at the browser (client) end of the delivery (and that's why XF didn't include the templates already) but just wanted to confirm.

Cheers,
Shaun :D
 

lantek

Active member
#12
I'm thinking of working it something like this:

Create a new child style based off the new responsive style.
In that new child style, put mobile targeted ad delivery code. In the parent style, put the desktop targeted ad code.
Use something like Advanced Styling Rules http://xenforo.com/community/threads/advanced-styling-rules.27918/ to detect a mobile device, and force the load of the secondary responsive style that contains the mobile ad code.

This setup would mean that there would be two styles, both would be largely the same, but one would include mobile optimized ad code, and the other would contain desktop ad code. The trick of course is having something to determine if you are on a mobile device and showing the appropriate style. I know that Advanced Styling Rules can do this in the current version, but I don't know if it will work in 1.2. Has anyone tried it?
 
#13
That sounds like a great way of doing it if you can get it to work.

The vast majority of forums are monetised by selling ads so a lot of us are going to have this problem using a responsive design.
 

Jeremy

Well-known member
#14
You'll want to be careful with redirecting based on style. Depending on the method, it may generate false impressions (ie, it counts the impression and then the user is redirected away).
 

akia

Well-known member
#16
That sounds like a great way of doing it if you can get it to work.

The vast majority of forums are monetised by selling ads so a lot of us are going to have this problem using a responsive design.
Well until I've come up with a solution I'm going to have to keep the responsive stuff turned off.
 

Mike Edge

Well-known member
#17
Here is what I worked out for my header. I lose the ad in the header if they are on mobile using longer length rather then wider width (don't know the term) but looks good for logo only. Fits logo and the banner code.

PHP:
 width = document.documentElement.clientWidth;
/* small header - show logo only  */
/* no ad slot as no banner shown */
google_ad_width = 1;
google_ad_height = 1;

if (width > 500) {
/* response  */
google_ad_slot = "";
google_ad_width = 234;
google_ad_height = 60;
   }

if (width > 790) {
/* smaller monitors */
google_ad_slot = "";
google_ad_width = 468;
google_ad_height = 60;
    }

if (width > 1050) {
/* large screen */
google_ad_slot = "";
google_ad_width = 728;
google_ad_height = 90;
    }
 

Thom Tyler

Well-known member
#18
Another good place to look for solutions may be the Soft Responsive Style thread - I've got it set-up that depending on certain resolutions, it shows the ads or not, based on the Ad being within a DIV. If it isn't that set resolution, it won't call that DIV (Full size) but will call another DIV instead (Mobile ads)

You can see this by looking at www.ps4gamer.net on your PC browser, then view it on your mobile. You'll notice the image banners etc are not shown on the mobile version.

Just to note, I'm still on 1.1 but using "Responsive Design" by Arty.
 

CTXMedia

Formerly CyclingTribe
#19
Thanks guys. I'll await BSAs response and if it's something that will be useful to other community members, post it up here for reference. (y)

Cheers,
Shaun :D
I've posted the details elsewhere but BSA have advised that they do provide responsive ad-code for their Pro account type, which is similar to DfP and allows you to sell / run your own campaigns; however their Marketplace ad-code remains non-responsive, even if it is used as back-fill on a Pro account ad slot.

This means you have to drop the Marketplace ad-code below a certain screen/viewport width so as not to count false impressions for Marketplace advertisers.
 

RobParker

Well-known member
#20
Not really. Responsive is entirely a client side thing (it's CSS only).

Besides, you probably don't want to be hiding ads using CSS as they're still being served but won't be clickable. That's likely a good way to violate an ad network's policies...
If you create a template for each ad you want and include something like:

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{   
include medium ad template
}
}
</xen:if>
Wouldn't that template only be loaded (and hence the ads only served) when it satisfies that resolution condition? Or can't you use conditionals like that in templates?