목록
기타 반응형 구글 애드센스를 제대로 반응형으로 만드는 TIP
16-01-15 18:33 6,813회 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만 넣어주면 그에 맞춰 적용할수 있습니다.


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



가입일 2015-01-11
접속일 2017-07-19
서명
태그
돼지코구뇽으로 활동중입니다 감사합니다.
카카오톡으로 보내기

등록된 댓글이 없습니다.

목록

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