Latest Adsense Updates About Sticky Ads 2020



toc

Latest Adsense Updates About Sticky Ads - Actually sticky ads for Adsense ads have been known for a long time when Adsense released the auto ads feature with anchor ads appearing sticking at the top or bottom of blogs on mobile phones. Then followed by amp-sticky-ad for AMP HTML to replace anchor ads that have not yet appeared on amp-auto-ad.

But at that time Adsense still gave a gray sign for sticky ads that were installed manually, because when I tried it there was no notification whatsoever for sticky ads that I installed manually like on the AMP v3 Magic Kompa theme. So even for ads that are stored in the sticky sidebar.

So at that time I came to the conclusion that both sticky ads that stick below, on the left and right of the blog, or on the sticky sidebar are permitted by Adsense with the condition that they do not overlap or overlap with the content.

And it turns out to be true, Adsense just announced the latest update about sticky ads through the Indonesian Adsense webinar which states that Adsense allows sticky ads on the conditions I have mentioned above.

But for AMP HTML, until this post was written, it does not fully support sticky ads. At the moment amp-ad does not yet support ad placement on elements that use sticky or fixed positions. amp-ad only supports sticky ads that are stuck under the blog using the amp-sticky-ad element. Hopefully quickly support so that it can be sticky in the sidebar or on the left and right of the blog.

Later I saw amp-auto-ad trying to display amp-sticky-ad which might be a substitute for anchor ads in non-auto ads, it seems like it's still an experiment. Because it hasn't appeared yet, finally I installed it manually as you can see now.

For those of you who want to try using sticky ads, I've actually given the materials in previous posts. But in this post, I will also update all of the previous posts.

1. Create Sticky Ads on Non AMP Templates

This trick you can follow in the following posts:


But in the tutorial, ads are only displayed on mobile only. For desktop and mobile use, please use the following code.

Please save the following CSS code above the code </head>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel'>
<style>
/*<![CDATA[*/
.sticky-ad {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: visible;
  position: fixed;
  text-align: center;
  bottom: -104px;
  width: 100%;
  max-width:736px;
  margin-left:-368px;
  left:50%;
  z-index: 999;
  max-height: 104px;
  background-image: none;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  padding: 4px 4px 0;
  transition: all .4s ease-in-out;
}
.sticky-ad-close-button {
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  right: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-size: 13px 13px;
  background-position: center;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
.sticky-ad-close-button:before {
  position: absolute;
  content: "";
  top: -20px;
  right: 0;
  left: -20px;
  bottom: 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:active,
:focus {
  outline: 0
}
@media screen and (max-width:800px){.sticky-ad{margin-left:0;left:0}.sticky-ad-close-button{background-position:9px;border-radius:12px 0 0 0;}}
/*]]>*/
</style>
</b:if>

The code above is not displayed on the static page, the error page, and the search results page and on the label page.

Then please save the following code above the code </body>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel'>
<div class="sticky-ad" id="sticky-ad">

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->

</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->

</b:if>

<button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ad');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

The number 300 to adjust the height of the appearance of ads when the page discrolls, please adjust to your liking for example replace it with 100 or other numbers.

The above ads are not displayed on static pages, error pages, and search results pages and on label pages. Please use a horizontal ad unit and select ads for desktop 728x90 and for 320x50 or 320x100 mobile ads.

2. Create Sticky Ads on the AMP HTML Template

This trick you can follow in the following posts:
But in the tutorial, ads are only displayed on mobile only. For desktop and mobile use, please use the following code.

Please save this code above the code </head>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel'>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
</b:if>

The code above is not displayed on the static page, the error page, and the search results page and on the label page. And also make sure your blog is already using js amp-ad.

Then please save this code above the </body> code

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel'>
<amp-sticky-ad layout='nodisplay'>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' type='adsense' width='728'>
</amp-ad>
</b:if>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='50' type='adsense' width='320'>
</amp-ad>
</b:if>

  </amp-sticky-ad>
  </b:if>

Then please create a responsive Adsense display ad unit and note the data-ad-client and data-ad-slot code, then please replace the data-ad-client and data-ad-slot code in the code above in accordance with your ad code.

And use the following CSS to modify the appearance of the amp-sticky-ad on the desktop display as used in this Magic Company.

amp-sticky-ad{max-width:736px;margin-left:-368px;left:50%}
.amp-sticky-ad-close-button{background-position:center;border-radius:12px 12px 0 0;}
@media screen and (max-width:800px){amp-sticky-ad{margin-left:0;left:0}.amp-sticky-ad-close-button{background-position:9px;border-radius:12px 0 0 0;}}

3. Ads Flit Left and Right Blog

This trick you can follow in the following posts:
But for AMP HTML can not use Adsense ads, while for banner ads only.

4. Advertise in the Sidebar

This trick you can follow in the following posts to make the sidebar float or sticky sidebar:
May be useful.