고정 헤더 영역
상세 컨텐츠
본문
반응형
이번 글에서는 예전에도 한번 작성했던 기억이 있는데 애드센스 반응형 광고 코드를 해상도에 따라 크기를 다르게 보이고 싶을 때 반응형 광고 코드를 수정하는 방법을 올려 드릴까 합니다.
예전에 반응형 광고 코드를 자동으로 변환해주는 블로그 페이지기 있었는데 그 분이 운영을 안 하는지 어떤지 잘 모르겠지만 해당 페이지가 열리지 않더군요.
저의 블로그로 해당 글을 찾아 들어오시는 분들이 자주 보여서 반응형 광고 코드 수정 방법과 티스토리의 이번에 개편된 블로그 관리자 페이지의 애드센스 반응형 플러그인을 이용해 등록하는 방법과 애드센스 반응형 광고 코드 해상도에 따라 다르게 보이게 수정하는 방법에 대하 알아 봅시다.
■ 애드센스 반응형 광고 코드 티스토리 변경된 플러그인 설정 이용 등록 방법
먼저 이번에 어제 였죠. 티스토리가 오래간만에 큰 마음 먹고 티스토리 개편을 시작 했는데요. 아직도 개편중이지만 먼저 관리자 페이지의 모습이 좀 변경되어 처음 접하신분들은 햇갈려 하실 수도 있겠더군요,
개인적으로는 저는 전 보다 편하게 받아 드려졌어요. 그래서 바뀐 티스토리 관리자 페이지의 애드센스 반응형 플러그인을 이용해 애드센스를 등록하는 방법에 대해 간단히 먼저 말씀 드리고 아래에 코드를 안내해 드리도록 할게요.
▼ 먼저 티스토리 블로그 관리자 페이지 입니다. 큰 범주와 기능은 크게 바뀐 부분은 몇몇 부분 빼고는 아직 잘 모르겠습니다. 그럼 오늘 반응형 광고코드 등록을 위해 "플러그인"을 찾으셔야 되는데 예전보다 좀 아래 쪽에 위치해 있더군요. 플러그인을 선택해 줍니다.
▼ 플러그인 설정 부분의 모습이 예전과 좀 많이 다른데요. 전 이게 편하더군요 이미지와 설명도 잘 되어 있는거 같구요. 그 중에 오늘 저희가 필요한 건 "구글 애드센스 반응형 플러그인" 이 되겠습니다.
반응형 플러그인 상,하단, 등록하시면 데스크탑 모바일 태블릿 등에서 모두 광고가 노출이 되게 됩니다. 따로 모바일 PC 플러그인을 등록을 안하셔도 되세요. "애드센스 반응형 플러그인"을 선태해 줍니다.
하나 궁금한건 사용중인 플러그인들이 부터 첫 화면에 보여지는거 같아요, 만약 자신이 현재 애드센스 반응형 플러그인을 사용하지 않고 있다면 좀 내리시다면 있을거에요.
▼ 반응형 애드센스 플러그인 선택하면 창이 하나 뜨는데요. 바로 광고 코드를 삽입 할 수 있는 창 입니다. 광고 코드 삽입 부분 위에 보시면 상단만 광고를 노출 시킬지 하단만 광고를 노출 할지 아니면 상, 하단 동시 노출을 할지 선택하실 수 있습니다.
본인의 마음에 맞는 영역을 선택하신 후 삽입하시면 되세요. 광고 형태를 선택 한 후 광고 코드 삽입 부분에 글 아래에 올려 드린 반응형 애드센스 코드를 수정하여 붙여 넣기 하신 후 꼭 "변경사항 적용"을 눌러 적용 시켜 주셔 되세요. 잊지 마세요.
■ 애드센스 반응형 광고 코드 해상도에 따라 다르게 보이게 수정하는 방법
그냥 반응형 플러그인에 광고 단위만 넣을 경우 데스크탑에선 728X90으로 모바일에서는 300X100 인가로 아주 작게 보여져 요즘 같이 모니터 해상도가 좋아진 시점에서 효과가 많이 떨어지더군요.
그래서 데스크탑과 모바일에서 애드센스 정책에 위반 되지 않는 선에서 반응형 광고 단위를 CSS 미디어 쿼리를 이용해 수정하는 방법을 많이 사용하게 됩니다.
우선 아래의 코드를 보게되면 반응형 광고 단위를 해상도에 따라 크기를 정하는 부분 인데요. 대부분 스마트폰의 해상도가 세로로 볼 경우 400px 이하 이기 때문에 본문 상단 애드센스 정책에 의한 최고 사이즈인 300*250 사이즈를 보여지게 하시면 될 거 같구요.
대부분의 데스크탑 모드에서 보여지는 800px 사이즈를 728*90을 많이 사용하는데 전 개인적인로 728*182 사이즈를 좋아해 사이즈를 아래의 두 가지로 지정해 두었습니다. 두 가지 사이즈 모두 자신의 블로그에 맞는 원하는 사이즈로 변경하시면 됩니다. 단, 애드센스 정책 사항을 준수 하셔서 변경 하셔야 하는거 잊지 마세요.
.main1 { width:300px; height: 250px; }
@media(min-width: 400px) { .main1 { width: 300px; height: 250px; } }
@media(min-width: 800px) { .main1 { width: 728px; height: 182px; } }
위와 같이 지정하시면 화면 폭 400~799픽셀에서는 300X250 광고 사이즈로 보여지게 되며, 800픽셀 이상일 때는 728X182 사이즈로 애드센스의 광고가 보여지게 되는 것입니다.
그리고 만약 상 하단 모두 해상도에 따른 변형 된 코드를 넣으실 경우 ".main1" 이라고 되어 있는 부분을 두 개가 다르게 수정하시는게 좋습니다. 예를 들어 상단은 ".main1", 하단은 ".main2" 이렇게 말이에요.
그리고 게시자 ID 부분과 "ca-pub-123456789", 광고 코드 부분은 꼭 자신의 것으로 변경 하셔야 제대로 수익이 발생하겠죠.
<div align="center"><style>
.main1 { width:300px; height: 250px; }
@media(min-width: 400px) { .main1 { width: 300px; height: 250px; } }
@media(min-width: 800px) { .main1 { width: 728px; height: 182px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle main1"
style="display:inline-block"
data-language="ko"
data-ad-client="ca-pub-자신의애드센스 게시자ID"
data-ad-slot="자신의광고코드"
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
마우스 우클릭 안되셔서 첨부파일로 텍스트 파일을 올려 둘게요. 다운로드 후 파일 안의 게시자ID와 자신의 애드센스 광고 코드 수정 그리고 광고 사이즈 수정 후 사용하시면 되세요.
반응형광고코드픽셀에따른크기변환.txt
▼ 아래는 모바일 화면에서 300X250 광고 단위로 노출되는걸 확인 할 수 있습니다. 애드센스 정책상으로도 전혀 문제가 안되니 잘 활용해서 자신의 블로그 스킨에 맞는 광고 단위를 찾으시길 바랍니다. 다만 모바일 애드센스 정책상 가장 큰 사이즈는 300X250 사이즈인 걸로 알고 있습니다.
오늘은 이렇게 간단하게 데스크탑과 모바일의 해상도에 따라 자신이 원하는 광고 단위로 변형되어 노출하는 방법에 대해서 알아 보았습니다. 애드센스 반응형 광고 코드 해상도에 따라 다르게 보이게 수정하는 방법 어떻게 도움이 되셨는지 모르겠네요.
반응형
댓글 영역