구글에서 아직 정확히 고정 광고가 허용이 되는 것인지, 아닌지 명확하게 밝혀지진 않았습니다. 해외에서는 이러한 고정 광고가 많이 보이는데 국내에서는 아직 찾아보기가 쉽지 않습니다.
자동 광고로 설정된 앵커 광고, 일명 Sticky AD는 확률적으로 표시됩니다. 이것을 항상 표시되게 하려면 애드센스 디스플레이 광고를 활용하여 페이지에 아래와 같은 코드를 추가할 수 있습니다.
<input class='stickyAdin hidden' id='stickyAdin' type='checkbox'/>
<div class='stickyAd' style='height: auto !important; min-height: 0px !important;'>
<label class='stickyAdclose' for='stickyAdin'>
<svg class='line' viewBox='0 0 24 24'>
<line x1='18' x2='6' y1='6' y2='18'/>
<line x1='6' x2='18' y1='6' y2='18'/>
</svg>
</label>
<div class='stickyAdcontent'>
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx'
data-ad-format='horizontal'
data-ad-slot='xxxxxxxxx'
data-full-width-responsive='false'
style='display: block; text-align: center; height: 100px;'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
위의 코드를 활용하면 하단에 고정되는 형식의 애드센스 광고를 표시합니다. 그리고 여기에 추가적인 CSS로 형태를 잡아줍니다.
.stickyAdin:checked ~ .stickAd {padding:0;min-height:0}
.stickyAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px;box-shadow:0 -6px 18px 0 rgb(9 32 76 / 10%);-webkit-transition: all .1s ease-in;transition: all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#0000;z-index:50}
.stickyAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickyAdclose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:inherit}
.stickyAdin:checked ~ .stickyAd .stickyAdcontent{display:none}
표시된 bottom을 top으로 설정하면 상단 고정 광고를 표시합니다. 이러한 형식의 고정 광고를 찾으시는 분들에게 유용하기를 바랍니다.
※ 위 CSS는 애드센스에서 권장하는 고정 광고 구현을 위한 가이드라인을 준수합니다.