목차
티스토리 스킨 대부분 애드센스 자동 광고를 하면 모바일에서 앵커 광고(따라다니는 광고)가 상단에 나오게 되는데요.
광고가 실제로 상단에 나오면 본문을 읽을 때에도 상당히 거슬리긴 하는데 상단에 있으면 아무래도 광고에 눈길이 가는 건 사실입니다.
구글링을 해서 애드센스 앵커 광고가 하단에 나오게하는 방법을 찾아 봤지만 거의 모든 글들에서 똑같이 <head> 코드안에 코드를 넣어서 앵커 광고를 하단으로 보내는 방법만 알려주고 있습니다.
실제로 해당 코드 넣어서 설정하면 잘 되지 않으며(설정해도 앵커 광고 하단에 안나옵니다.) 심지어 해당 글을 작성한 작성자 본인 조차 직접 해보지 않고 그냥 어디서 정보를 가져와서 글을 적은 듯한 느낌이였습니다...(내용이 다 똑같다...)
이번 글에서는 CSS 코드를 이용한 어디에서도 자세하게 나와 있지 않은 '구글 애드센스 앵커 광고'를 하단에 설정하는 방법입니다.
1. 구글에서 말하는 하단 앵커 광고 설정 방법
구글에서 공식적으로도 구글 애드센스 광고가 상단에 게재될 때 광고 효과가 더 좋다고 말하고 있습니다.
하지만 이제 구글에서 공식적으로 CPM(광고 노출당 금액)의 비중이 커졌기 때문에 위나 아래나 노출되기만 하면 수익을 얻을 수 있어서 아무래도 가독성을 위해서는 광고를 하단에 놓는게 좋지 않을까 합니다.
구글에서 공식적으로 '앵커 광고'를 하단에 나오게 설정하려면 위와 같은 코드를 <head> 코드 안에다가 붙여넣으라고 얘기합니다.
하지만 위 코드는 제대로 작동하지도 않고 또 다른 블로그를 찾아보면 다른 코드로 적용하라고 하는데 직접해봤지만 잘 적용되는지 의문 입니다.
2. position: fixed; CSS 코드 상단바(헤더) 고정을 통한 앵커 광고 위치 조절하기
처음엔 'position: sticky;'를 통해서 상단바를 상단에 고정 시켜봤지만 상단바가 고정되어 있어도 여전히 앵커 광고가 상단에 있는 것을 확인할 수 있습니다.
위 이미지와 같이 'position: fixed;' 코드를 써서 상단바(헤더)를 상단에 고정해야만 앵커 광고가 하단에 나오게 됩니다.
두개의 코드 모두 상단에 상단바(헤더)를 고정 시키지만 구글 애드센스 시스템에서 'position: fixed;' 코드만 인식하는 것 같습니다.
결론
'position: fixed;' CSS 코드 를 사용하면 확실하게 구글 애드센스 앵커 광고를 하단에 놓을 수 있다.
해당 코드를 적용하는 방법까지 쓰자면 글이 길어져서 다음 글에서 해당 내용을 적용하는 방법을 자세하게 알아 보겠습니다.
댓글