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

Discussion in 'General XenForo Discussion and Feedback' started by CyclingTribe, Jun 21, 2013.

  1. CyclingTribe

    CyclingTribe Well-Known Member

    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?

    Shaun :D
  2. Brogan

    Brogan XenForo Moderator Staff Member


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

    <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 type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    Hoffi, Mike Edge and CyclingTribe like this.
  3. akia

    akia Well-Known Member

    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.
    StonePilot, Brent W and lantek like this.
  4. CyclingTribe

    CyclingTribe Well-Known Member

    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)

    Shaun :D
  5. Jeremy

    Jeremy Well-Known Member

    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.
  6. lantek

    lantek Active Member

    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.
    StonePilot and akia like this.
  7. CyclingTribe

    CyclingTribe Well-Known Member

    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?
  8. Jeremy

    Jeremy Well-Known Member

    @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'.
    CyclingTribe likes this.
  9. Mike

    Mike XenForo Developer Staff Member

    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...
    StonePilot, Walter, Brent W and 4 others like this.
  10. CyclingTribe

    CyclingTribe Well-Known Member

    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.

    Shaun :D
  11. CyclingTribe

    CyclingTribe Well-Known Member

    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)

    Shaun :D
    akia and AzzidReign like this.
  12. lantek

    lantek Active Member

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

    rogerl Member

    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.
    StonePilot likes this.
  14. Jeremy

    Jeremy Well-Known Member

    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).
  15. akia

    akia Well-Known Member

  16. akia

    akia Well-Known Member

    Well until I've come up with a solution I'm going to have to keep the responsive stuff turned off.
  17. Mike Edge

    Mike Edge Formerly Da Bookie Mon

    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.

     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;

    CyclingTribe likes this.
  18. Thom Tyler

    Thom Tyler Well-Known Member

    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.
  19. CyclingTribe

    CyclingTribe Well-Known Member

    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.
  20. RobParker

    RobParker Well-Known Member

    If you create a template for each ad you want and include something like:

    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveMediumWidth)
    include medium ad template
    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?

Share This Page