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

Responsive AdSense

Adverts R Us

Tags:
  1. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan submitted a new resource:

    Responsive AdSense - Adverts R Us

    Read more about this resource...
     
    CNK, Anpanman, resonansER and 3 others like this.
  2. RoldanLT

    RoldanLT Well-Known Member

  3. Indiamatic

    Indiamatic New Member

    Final Touch and clear way for XF 1.2 (y)
     
  4. darren

    darren Member

    Agreed, thanks Brogan!
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan updated Responsive AdSense with a new update entry:

    An example using if and else.

    Read the rest of this update entry...
     
    resonansER likes this.
  6. TsinJu

    TsinJu Well-Known Member

    Thanks a lot. This is very Helpful (y)
     
  7. Rho Delta

    Rho Delta Well-Known Member

    Extremely helpful. Once I upgrade to 1.2 I'm gonna try this ASAP.
     
    TsinJu likes this.
  8. RobParker

    RobParker Well-Known Member

    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?
     
  9. MattW

    MattW Well-Known Member

    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

    Code:
    <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 likes this.
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Good point.
    If only showing to guests though it will be fine to use that.
     
    MattW likes this.
  11. MattW

    MattW Well-Known Member

    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!
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan updated Responsive AdSense with a new update entry:

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

    Read the rest of this update entry...
     
    resonansER and RoldanLT like this.
  13. Bram

    Bram Well-Known Member

    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.
     
  14. RoldanLT

    RoldanLT Well-Known Member

    The second code tutorial might be against adsense TOS?

     
  15. MattW

    MattW Well-Known Member

    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.
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    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:
    HTML:
    <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:
    HTML:
    <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.
     
  18. Veer

    Veer Well-Known Member

    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 :unsure:
     
  19. Brogan

    Brogan XenForo Moderator Staff Member

    Yes.

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

    Bram Well-Known Member

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

Share This Page