목록
기타 반응형 구글 애드센스를 제대로 반응형으로 만드는 TIP
16-01-15 18:33 6,276회 0건

반응형웹 구축에 따라

구글 애드센스에 반응형 코드를 사용하는분들이 많은데 모바일에서 최적화되지 않는 즉 광고단위영역이 자동맞춤광고가 되지 않을때가 있습니다.

981196373_1452848982.2475.png


해당 테마는 구글+ 반응형테마입니다.

상단우측에 구글광고를 게제했을때 PC에 맞춰 잘 출력이 됩니다.

하지만 태블릿에서는 아래로 떨어지네요

모바일에선 좌측이 짤리기까지 합니다.


이부분은 css와 고유코드를 통해 변경해보도록 하겠습니다.


css코드 삽입 (그누스트랩경우 /css/default.css 적당한 위치 혹은 맨아래 삽입 (해당 예제코드는 728x90 긴광고에 관한 최적화 반응형광고 css입니다.


.example_responsive_1 { width: 320px; height: 100px; }

/*@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } } PC에서는 태블릿크기 광고나오도록*/

@media(min-width: 500px) { .example_responsive_1 { width: 728px; height: 90px; } }

/*@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } } 태블릿에서 PC광고크기가 나오도록*/

@media(min-width: 800px) { .example_responsive_1 { width: 468px; height: 60px; } }


*저경우 해당 테마에서 태블릿에선 아래로 떨어지니 아예 긴광고를 태블릿에서 보여지도록하였습니다. 참고하시기 바랍니다.*


그후 자신의 반응형광고코드를 조금 수정합니다.

기존코드변경코드

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-69021882059******"

data-ad-slot="7468137***"

data-ad-format="auto"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle example_responsive_1"

style="display:inline-block"

data-ad-client="ca-pub-69021882059******"

data-ad-slot="7468137***"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

위에 코드와 같이 data-ad-format="auto"는 삭제됩니다. 광고포맷을 자동으로

위측에 추가된부분은 css삽입후 class추가해주고 display을 inline으로 수정하였습니다.


981196373_1452850316.9423.png


이와같이 광고크기에 따라 적용하며


긴광고 넓은광고 직사각형광고 등등 css을 직접 만들어서 class만 넣어주면 그에 맞춰 적용할수 있습니다.


반응형 광고 코드 수정 방법 이었습니다.


카카오톡으로 보내기

등록된 댓글이 없습니다.

목록

팁엔테크 목록
64 개 1 페이지
번호 컨텐츠
64 빌더팁 빌더 설치후 'http error 500' 에러 뜨는분들 참조 댓글[4] 05-01   553
63 빌더팁 게시판에 여분필드로 달력사용하는방법 02-14   1678
62 프로그램 주소복사 적용 12-07   2613
61 기타 사이트 속도 최적화 GZIP 시키기 12-01   3014
60 빌더팁 bootstrap maxlength 설정 11-06   3511
59 디자인 따라오는 메뉴 (상단고정) 댓글[2] HOT 08-31   5145
58 디자인 반응형 이미지맵 구현하기 HOT 08-29   5528
57 디자인 폰트아이콘 종합사이트 HOT 08-25   5102
56 부트스트랩 부트스트랩 캐러셀(carousel) 슬라이드 -> 페이드 방식으로… HOT 08-23   5259
55 부트스트랩 부트스트랩 카우셀 여러가지 효과 (페이드 TV 화면전환효과) 08-23   3989
54 부트스트랩 부트스트랩 모달창 창크기 조절 07-16   4623
53 기타 애드블록(AdBlock)에 대항하는 방법 07-11   4032
52 기타 모바일에서 동영상 재생되도록 06-24   3631
51 부트스트랩 부트스트랩 캐러셀 스크립트 옵션 06-22   3140
50 기타 풀페이지 06-18   3683