Responsive AdSense - Adverts R Us
Read more about this resource...
-
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
Read more about this resource...
An example using if and else.
Read the rest of this update entry...
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>Another example using different ad slots for responsive and non-responsive styles
Read the rest of this update entry...
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
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
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>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>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.