[TIP] 구글 애드센스 광고를 모바일에 달아보자 ①

스마트폰의 활성화로 모바일에서의 인터넷 사용량이 급격하게 늘었습니다.
저의 블그로를 찾아주시는 분들 또한, 모바일에서 접속하는 경우가 많아지는데요,

최근 검색을 통해, 모바일용 화면에서도 구글 애드센스를 달 수 있다는 포스팅을 보고 깜놀!
왜 이제야 이 사실을 알았는지!!

바로, '애드센스 모바일 설치' 등으로 검색하여 저의 블로그에도 적용해보았습니다.
이 작업을 하기 위해서는 먼저, 구글 애드센스에 가입이 되어 있어야만 합니다:)

 

1. 구글 애드센스 로그인
새로운 광고를 만들기 위해 처음에는 맨 좌측 하단 메뉴 중 '모바일 콘텐츠'는 광고가 제대로 노출되지 않을 수 있다고 합니다. 그리하여, 기존에 광고 단위를 만드실 때 처럼, 아래 순서로 만들어 주세요.

① 내 광고
② 콘텐츠 > 광고 단위
③ 새 광고 단위

 

2. 새 광고 단위 만들기
① 이름 : 다른 광고들과 구별하기 쉽도록 임의로 선택
② 광고 크기 : '모바일 배너' 선택
③ 광고유형 : 텍스트, 이미지, 텍스트 및 이미지   <- 3 中  1가지 택

 

3-1. 광고 스타일 > 광고 스타일 선택
① 광고 스타일 선택 : 광고 기본형
② 광고 미리보기 : ① 에서 선택한 유형 미리보기
③ 저장, 저장 및 코드생성 : 저장 및 코드생성을 클릭, 코드를 복사합니다

 

3-2. 광고 스타일 > 맞춤 설정 사용 선택
① 맞춤 설정 사용 : 직접 광고 디자인 색상 및 글꼴 설정
② 광고 미리보기 : ① 에서 선택한 유형 미리보기
③ 각각 항목에 맞는 색상 선택
④ 저장

 

4. 광고 코드 생성 > 복사

 

5. 광고 코드 붙여넣기
해당 광고 코드는 따로 HTML / CSS 에 붙여 넣지 못하기 때문에 글을 쓸 때 마다 본문에 포함시켜야 한다고 합니다.
그렇기 때문에 글쓰기 기능 중 '서식'에 해당 코드를 붙여 넣고 쉽게 불러와 본문에 포함을 시킨다고 하는데요, 저는 서식 기능을 사용해도 광고가 제대로 노출되지 않더라구요.

어떤게 잘못되었는지, 서식에 붙여넣은 코드가 내용의 일부가 삭제가 되거나, 자동으로 조금 변경되고 있다는 느낌이 들어서 (설정이 잘못된걸까요,,,,) 서식에 저장은 하되, 그냥 해당 코드 복사해서 붙여넣는 작업을 했습니다.
그게 차라리 속 시원하더라구요^^

하지만, 쉽게 '서식' 기능을 사용하기 위한 분들을 위해

① 티스토리 > 글쓰기
② 제목 : 광고 구별을 위해 제목 작성
③ 제목 칸 우측의 서식 클릭
④ 바로 아래쪽, 맨 우측의 HTML 체크

 

⑤ 생성 한 코드를 본문에 붙여넣기
⑥ 붙여넣기 한 소스는 아래와 같습니다.

<SCRIPT type=text/javascript><!--
google_ad_client = "ca-pub-0000000000000000";
/* Mobile_2 */
google_ad_slot = "0000000000";
google_ad_width = 320;
google_ad_height = 50;
//-->
</SCRIPT>
<SCRIPT type=text/javascript src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</SCRIPT>

 

⑦ 추가적으로 코드 상단, 하단에 소스를 추가 해 줍니다.
-> 애드센스에서 제공한 코드만 입력 했을 경우, 한쪽으로 광고가 쏠린 채 노출될 수 있으니 깔끔하게 중앙에 노출될 수 있는 HTML 소스를 추가해줍니다.

<DIV style="POSITION: relative; MARGIN-TOP: 10px; MARGIN-BOTTOM: 10px; HEIGHT: 50px" class=disno>
<DIV style="POSITION: absolute; MARGIN-LEFT: -160px; LEFT: 50%">
구글 광고코드
</DIV></DIV>

 

⑧ 저장 <- 서식 완료

 

여기서 잠깐)
위 코드를 각 본문에 삽입하게 되면, PC와 모바일 모두 광고가 노출이 됩니다.
하지만, 애드센스 광고 정책 상 3개 이상의 광고를 노출하면 안된다는 규정이 있습니다. (이제야 알았다는,,,,)
그렇기 때문에 현재의 과정 후 광고가 1개 더 추가가 되어 노출이 된다면 규제를 받을 수 있기 때문에 무작정 설치만 해서는 안되겠습니다.
(다행히, 현재 PC에서 보여주고 있는 광고들은 모바일에는 노출 되지 않기 때문에 모바일에서는 새로 추가하는 광고만 보실 수 있습니다)

이에, PC에는 노출이 되지 않고, 모바일에만 노출될 수 있는 광고로 설정해 보도록 하겠습니다.
파란색으로 표시된 [class=disno] 이 부분이 그 해결책입니다.

⑨ HTML / CSS > style.css
[class=disno] 소스를 제대로 인식시켜 주기 위해서 HTML / CSS > style.css 부분에 한 출을 추가시켜 줍니다.

.disno{display:none;}

PC에 노출되지 않도록 설정.txt

 

⑩ 저장

 다음편에 계속됩니다:)