Y&S 두 여자의 말랑말랑 생활공감

블로그 운영하면서 가장 많이 받은 질문 중 하나가 애드센스 광고에 대한거였다.
역시 사람들은 돈 버는 거에 가장 관심이 많은가보다 ^^:;

일단 티스토리블로그에 광고를 넣는 방법으로는 관리자페이지 html/css에 애드센스 광고코드를 삽입하여

웹페이지 전체에 한꺼번에 넣는 방법과
글을 쓸때마다 내용 html에 광고코드를 일일이 넣어 모바일과 PC 함께 보여지게 하는 방법이 있다.

우선 글 전체페이지에 넣는 방법을 잠시 보자면,

관리페이지 html/css에서 Ctrl+F를 눌러 article_rep_desc를 적어 넣는다.
이게 본문의 글을 써 넣는 내용부분이라 할 수 있는데
를 기준으로

위쪽에 광고코드를 넣으면 본문상단에,
아래쪽에 광고코드를 넣으면 본문하단에 광고가 출력되는 것이다.
물론 광고코드를 여러개 이어붙여도 상관없다.

아래 그림과 같이 광고코드를 넣었다면 물론 본문 상단에 광고가 보여진다.

하지만 이런식으로 넣은 광고는 아쉽게도 모바일엔 나오지 않는다.
모바일을 통한 블로그 유입량이 절반을 넘어서는 지금

만일 모바일에 광고를 넣지 않으면 상당한 잠재고객을 잃게 되는것이다.

때문에 모바일과 PC에 같이 광고가 나오게 하기 위해서

포스팅을 할때마다 html에 따로 광고코드를 넣어줘야하는데
모바일광고 넣는 방법은 아래글에서 확인할 수 있다.

모바일광고 다는 방법 보기

이런저런 많은 시행착오를 겪고 몇 달간 실험해 본 결과
우리는 본문 상단 300x250짜리 두개의 광고가 수익면에서 가장 안정적이라고 생각했기 때문에 ]

(이는 물론 블로그마다 다르겠지만) 
현재 우리 블로그에서는 본문상단 우측광고는 관리자페이지 html/css에 넣어 전체 페이지에 나오게 했고
상단 좌측광고는 글을 쓸때마다 html에 넣어 모바일과 PC에 보여지게 만들었다.

그런데 이렇게 그냥 넣으면 간격이 잘 안맞고 두개의 광고가 나란히 위치하지 않기 때문에

그런꼴을 못보는 난, 약간의 스타일과 태그를 넣어 간격을 조정했다.

예를들어,

관리자페이지에 넣은 본문 상단 우측광고에는 위쪽에 아래와 같이 넣었고

글을 쓸때는 html에 아래와 같이 넣었다.

이는 우리 블로그의 본문 가로폭 사이즈에 맞춰 300x250사이즈 광고 두개를 기준으로 조정한 것으로

광고가 들어갈 가로폭이 좁다면 당연히 300x250 사이즈 광고하나가 밑으로 밀릴것이고,

폭이 넓다면 [ margin:43px 8px 0 4px ]코드에서 픽셀값을 조정하면 된다.
43px은 위의 간격, 8px은 오른쪽 간격, 0은 아래 간격, 4px은 왼쪽 간격을 지정해주는 것으로
아마 좌,우 정도만 적당히 숫자를 조정하면 될 것이다.

자, 그럼 여기서 사람들이 헷갈려하는 문제.
바로 구글 애드센스 광고개수에 관한거다.

구글 애드센스에서는 한 페이지에 보여지는 광고를 3개까지로 규정하고 있다.
만일 그 이상 넘어가면 광고가 먹통이 되어 아예 화면에 출력되지 않는 것이다.

그럼 모바일 광고와 PC광고는 어떻게 개수가 적용될까?

이게 헷갈리는게 사람들이 PC광고와 모바일광고를 따로 분리해서 생각하기 때문인데

그냥 광고가 어디 나오느냐의 차이지 같은거라 생각하면 된다.

작년인가(?) 구글 애드센스에서는 콘텐츠광고와 모바일광고가 하나로 통합되었기 때문이다.

예를 들어 관리자페이지에 광고두개를 넣고 글쓸때 광고하나를 넣었다면

한페이지에 총 세개의 광고가 들어간것이며, 그 중 한개는 본문에 직접 넣었기때문에 모바일에서도 보여진다.

또는 관리자페이지에 광고를 한개도 넣지않고 글을 작성하면서 세개를 다 넣었다면

역시 PC에서 한페이지에 총 세개의 광고가 보여지며, 모바일에서도 세개가 전부 보여진다.
이러면 최대 6개의 광고효과까지 누릴 수 있는 것이다.

하지만 포스팅 중 내용 중간중간에 광고를 넣으면서 악의적으로 오클릭을 유도한다면 (링크나 이미지 근처)

이는 구글정책에 위배되어 광고가 정지당할 소지가 있으므로 신중을 기해야 한다.

결론은 PC에서 총 세개의 광고만 넣는다면 구글정책에 위배되지 않는 선에서 어느곳에 넣든 상관없다는 얘기.
그리고 그 중 모바일 광고는 본문에 넣은 광고만 보여진다는 것.

마지막으로 위에서 모바일에 광고넣는 방법을 읽었다면

광고를 PC에서는 보여지지 않고 모바일에서만 보여지게 숨김처리하는 법을 알 수 있다.

이 때, 간혹 사람들이 PC에서 숨김처리했으니 다른 광고하나 더 넣을 수 있는지에 대해 물어보는데
숨김처리는 말그대로 살짝 눈가림일 뿐이다.
구글 애드센스에서는 데이터를 이미 처리해서 광고가 출력되었기때문에

모바일에서 광고가 보여지는 것이고 PC에서 보이지 않더라도 한개의 광고로 똑같이 인식된다.

한마디로 그런 꼼수는 통하지 않는다는 것 ㅋ

숨김처리는 그냥 미관상 필요할때 사용하는 것뿐^^

 

 

       

모바일 유입경로가 pc로 유입되는 수를 넘어섰기 때문에 구글 애드센스 모바일 광고를 넣을려고 언니와 함께 몇 일을 연구했다;;

아무리 찾아봐도 그냥 간단하게 광고를 html 내용에 넣으면 된다고 하는데 이렇게 저렇게 아무리 해봐도 광고가 안나왔기 때문이다.

일단 첫번째 헤맸던 부분!!!

아래 모바일 콘텐츠에서 광고를 만들어서 넣는게 아니라 그냥 콘텐츠에서 광고를 만들면 된다.

이게 얼마전에 통합되면서 바뀌었다고 한다.

어쩐지 모바일 콘텐츠에서 광고를 만들어서 소스를 넣으면 텍스트만 그대로 나오더라니...그럴거면 모바일 콘텐츠 카테고리를 없애던가 했어야지 ㅠㅠ

새 광고를 만들때 아무 사이즈나 만들어서 모바일에 넣어도 되지만 320x50짜리 모바일 배너가 따로 있다.

이걸로 넣어야 사이즈도 적당하고 미관을 해치지않는 선에서 예쁘게 나온다.(좀더 큰걸로 하려면 300x250짜리도 괜찮지만 나머지는 핸드폰사이즈가 전부 안맞아서 광고가 짤린다.) 

나머지도 적당히 정해서 하단 저장및코드생성 버튼을 누르면 이런 소스코드를 볼수있는데

이 광고코드를 복사해서 글을 적을 때 우측상단 html을 체크하고 적당한 곳에 넣어주면 된다.

여기서 두번째로 헤맸던것은 생성한지 얼마안된 광고코드는 이렇게 넣어도 광고들어가야될 부분에 웹페이지를 표시할 수 없습니다.라고 나온다. 이때 혹시나 핸드폰에서는 나오나해서 모바일 광고를 확인해봤더니 400 bad 어쩌구 나온다.

안되나보다하고 계속 html여기저기 넣고 해보지만 어느순간 아예 광고부분이 공백만 있고 안보인다. (물론 나중에 이 공백부분에 광고가 나오긴 하지만...)

그리고 포기하길 여러번...근데 이 공백이 사실 핸드폰에서는 보여진다는 사실을 이제야 알았다 ㅠㅠ

다른글들 아무리 찾아봐도 다 pc에서 보여진다고 하길래 당연히 넣자마자 웹에도 보이는줄 알고 뻘짓한거다.

(새로만들면 광고적용이 대략 10분정도 걸리는듯하고 PC에 광고가 보여지는건 그보다 한참후다.)

아래처럼 그냥 pc에서는 아무것도 안보이더라도 핸드폰으로 확인해보니 광고가 나오는것이다. 

팁으로 광고만들때 320x50짜리 모바일배너를 선택했다면 핸드폰으로 확인했을때 우측으로 약간 쏠려서 보여지는데 html 코드삽입시 아래처럼 광고소스 위아래로 코드를 추가해주면 정상적으로 중앙에 예쁘게 보여질 것이다.

팁 두번째...

모바일에서 광고를 중앙으로 배치시키는데 위의 방법만 있는건 아니다.

위는 왼쪽으로 12픽셀만큼 옮기라는 어찌보면 살짝 꼼수에 가까운 방법이고 좀더 복잡한 명령으로 모바일에서 중앙에 위치시키면서 웹에서는 보이지 않게하는 방법이 있다. 웹에서 모바일 광고가 보이지 않게 하는 방법이 유용한게 만일 내용 상단에 광고를 위치시킬때 웹 전체페이지에 넣은 광고랑 겹치지 않게 할 수 있다.

만일 320x50사이즈의 광고를 사용한다면

<div style="position: relative; margin-top: 10px; margin-bottom: 10px; height: 50px" class=disno>
<div style="position: absolute; margin-lift: -160px; left: 50%">
광고코드 삽입(320x50사이즈)
</div>
</div>

이렇게 넣어주면 되는데 뒤에붙은 class=disno를 뺀다면 첫번째 방법처럼 그냥 가운데 정렬시키는 코드이다.

게다가 웹에서 안보이게 하려면 위의 코드를 내용쓰는 html에 삽입하고 아래와 같은 스타일을 따로 추가해줘야된다. (이건 처음 한번만 해주면 됨)

내용이 긁어지지 않는 관계로  하단에 파일을 첨부할테니 필요하신분은 받아서 써 보시길...

320x50사이즈 광고랑 300x250사이즈 광고에 넣을 수 있는 코드가 각각 적혀있음.

참고로 광고는 내용 중간에 넣거나해서 오클릭을 유도하면 위반사항이므로 신고나 제재를 당할수도 있으니 욕심부리지말고 상단이나 하단에 넣자.

그나저나 100여개 글을 하나하나 언제 다 넣고있는다냐 ㅡㅡ;;

시간날때마다 조금씩 넣어야 할듯...

모바일광고소스코드.txt

=====================================================

2013.06.07 추가!!!

광고를 숨기는건 애드센스 정책위반 이라네요 ㅠㅠ

아쉽지만 display:none; 코드는 사용하면 안될 듯...

https://support.google.com/adsense/answer/1354736?hl=ko