애드센스의 경우 반응형 광고가 존재해서 반응형 코드를 넣어주면 PC 화면이건 모바일 화면이건 사이트에 맞게 광고가 출력됩니다.
카카오애드핏의 경우 사이즈가 고정 광고라서 모바일용 따로 웹용 따로 지정해주어야 합니다. 이때 반응형 스킨일 경우 두 가지 다 출력이 될 수도 있고 원하는 대로 모양대로 출력이 잘 되지 않을 때가 있습니다.
플러그인을 통해서 넣으면 되긴 하지만 위치가 제한적이죠.
HTML을 편집해서 넣을 때 카카오애드핏도 반응형으로 만들어 넣을 수 있습니다.
<script>
if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
document.write( '<ins ~ 광고코드 ~ async><\/script>' );
}
if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
document.write( '<ins ~ 광고코드 ~ async><\/script>' );
}
</script>
<p><a href="http://document.write(" target="_blank" rel="noopener">document.write(</a></p>위 코드 첫 번째 if에서 min-width : 1204px 부분은 가로 픽셀 최소 1024px 이상일 때 출력하라!
두 번째 if에서 max-width : 768px 부분은 가로 픽셀 최대 768px까지 출력하라!입니다.
즉, 위쪽에 광고 코드는 pc용 화면에 적합한 사이즈를 넣고 하단에는 모바일용 코드를 넣으면 화면 사이즈에 따라서 광고가 들어가게 됩니다.
이것을 조금 응용하면 상단 메뉴 혹은 사이드바 메뉴를 별도로 만들 수도 있을 것 같습니다.
앞서 포스팅한 "티스토리, 광고를 효과적으로 배치하자!"의 내용에서 플로팅 모듈과 지금의 if 문구를 적절히 섞으면 가능할 것 같습니다. 이 블로그의 경우 사이드바가 존재하기 때문에 굳이 만들 필요는 없겠지만 사이드바가 없는 스킨을 사용 중인데 그 스킨에 만족하지만 메뉴만 필요하다면 조금 연구해서 메뉴를 만들 수 있겠네요.
저는 이 코드를 이용하여 좌측에 세로로 긴 형태의 카카오애드핏 광고를 작은 화면에서는 출력이 되지 않고 창 사이즈가 넓어질 때 출력이 되게 수정하여 사용 중입니다.