Brogan updated Responsive AdSense with a new update entry: An example using if and else. Read the rest of this update entry...
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?
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>
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 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...
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.
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.
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.
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.
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 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 ?
