[티스토리] 반응형 애드센스 광고 본문 우측 상단에 넣는 방법 2가지
티스토리 블로그에 구글 애드센스 광고를 게재하면서 많은 분들이 최적의 광고 위치에 대해서 고민하고 있는데요... 검증된 광고 위치가 본문 상단인 것 같습니다. 본문 상단에 2개의 정사각형 광고를 게재하는 것도 인기가 많은 것 같은데, 저는 개인적으로 광고가 본문 오른쪽 위에 위치하는게 좋을 것 같다고 생각하고 있습니다.
본문 상단에 직사각형 광고 1개 또는 정사각형 광고 2개만 덩그러니 있을 경우엔, 왠지 광고는 skip한 채 본문 글을 읽기위해 마우스를 아래로 쭈욱 끌어내릴 것만 같은 생각이 듭니다. 광고가 오른쪽에 있다면, 본문을 읽으면서 자연스레 광고에도 눈길이 가면서 클릭할 확률이 높아질 것만 같습니다.
그래서 본문 오른쪽 상단에 광고를 게재하는 방법 2가지에 대해 알아보겠습니다.
블로그에 광고를 개시한지 얼마되진 않았지만, 데스크탑 화면에서는 본문 오른쪽 상단에 336x280 크기의 광고를, 모바일 환경에선 높이가 자동조절되는 폭이 꽉찬 직사각형 광고가 게재되는 형태를 계속 사용해 왔는데, 모바일 환경에서도 본문 오른쪽 위에 200x200크기이 정사각형 광고가 표시되는 형태가 나름 일관성이 있어보여서, 이번주부터 광고 스크립트를 살짝 변경해봤습니다.
두 경우 모두 데스크탑 환경에서는 동일한 위치에 광고가 게재되며, 모바일 환경에서만 광고 크기 및 위치가 변경됩니다.
애드센스 수익도 정말 미미한 수준인데, 광고 위치만 요리저리 변경해보고 있네요^^.
본문 우측 상단 반응형 광고 모바일 표시 양식
방법1. 모바일 상단 직사각형
방법2. 모바일 우측 상단 200x200
모바일 환경에서의 광고출력 모양에 따라 2가지 설정 방법을 알아보도록 하겠습니다.
실제 광고가 출력되는 화면 모습부터 한번 보실까요?
우선 데스크탑 화면입니다. 2가지 방법 모두 아래 그림과 같이 본문 오른쪽 위에 336x280 크기의 광고가 게재됩니다. 광고 상하좌우 여백은 당연히 조절 가능합니다. 조절방법은 아래 스크립트 설정부분을 참조하세요.
모바일에서의 화면 출력모습은 아래와 같이 2가지 방법에 차이가 있습니다.
첫번째 방식인 한줄 출력의 모습입니다. 본문 상단에 폭이 꽉찬 직사각형 광고가 표시됩니다. 높이는 자동 조절됩니다.
다음은 두번째 방법으로, 모바일에서도 본문 우측 상단에 200x200 크기의 정사각형 광고가 게재된 모습입니다. 데스크탑 화면의 축소판이며, 현재 제가 사용하고 있는 방법입니다.
STEP 1. 애드센스 홈에서 새광고단위로 반응형 광고를 생성하거나, 기존 반응형 광고 코드를 선택합니다. 저는 기존 광고 코드를 그대로 사용했습니다.
아래는 복사한 광고코드입니다. 다른 건 필요없고 빨간 네모 박스안의 " " 안 값만 편집하면 됩니다.
STEP 2-1. 모바일 환경에서 폭이 꽉찬 직사각형 광고를 설정하는 스크립트입니다. 빨간 네모박스 안의 *****부분을 STEP1에서 생성한 개인 광고 코드로 대체하면 됩니다.
2번째 줄의 float: right는 오른쪽 광고배치, margin : 5px 0px 20px 20px는 각각 상-우-하-좌 위치의 여백을 설정합니다.
STEP 2-1. 모바일 환경에서 우측 상단에 200x200 크기의 광고를 설정하는 스크립트입니다. 마찬가지로 빨간 네모박스 안의 *****부분을 개인 광고 코드로 대체하면 됩니다.
위쪽 코드는 데스크탑 화면에서의 광고 출력 양식을 설정하고, 아래 부분은 모바일 환경에서의 광고 출력 양식을 설정하는 부분입니다.
아래 스크립트를 이용하여 원하는 광고 양식을 만드시면 됩니다.
애드센스 우측상단 모바일 Auto.txtSTEP 3. 광고 설정을 위한 스크립트 작성이 완료되면, 티스트리 관리 ▶ 꾸미기 ▶ HTML/CSS 편집을 클릭합니다.
STEP 4. HTML을 선택한 후 Ctrl+F를 눌러서 "article_rep_desc"를 검색합니다. article_rep_desc의 위가 본문 위쪽 광고, 아래가 본문 아래쪽 광고를 설정하는 곳입니다.
STEP 5.
티스토리 블로그에 구글 애드센스 광고를 게재하면서 많은 분들이 최적의 광고 위치에 대해서 고민하고 있는데요... 검증된 광고 위치가 본문 상단인 것 같습니다. 본문 상단에 2개의 정사각형 광고를 게재하는 것도 인기가 많은 것 같은데, 저는 개인적으로 광고가 본문 오른쪽 위에 위치하는게 좋을 것 같다고 생각하고 있습니다.
본문 상단에 직사각형 광고 1개 또는 정사각형 광고 2개만 덩그러니 있을 경우엔, 왠지 광고는 skip한 채 본문 글을 읽기위해 마우스를 아래로 쭈욱 끌어내릴 것만 같은 생각이 듭니다. 광고가 오른쪽에 있다면, 본문을 읽으면서 자연스레 광고에도 눈길이 가면서 클릭할 확률이 높아질 것만 같습니다.
그래서 본문 오른쪽 상단에 광고를 게재하는 방법 2가지에 대해 알아보겠습니다.
블로그에 광고를 개시한지 얼마되진 않았지만, 데스크탑 화면에서는 본문 오른쪽 상단에 336x280 크기의 광고를, 모바일 환경에선 높이가 자동조절되는 폭이 꽉찬 직사각형 광고가 게재되는 형태를 계속 사용해 왔는데, 모바일 환경에서도 본문 오른쪽 위에 200x200크기이 정사각형 광고가 표시되는 형태가 나름 일관성이 있어보여서, 이번주부터 광고 스크립트를 살짝 변경해봤습니다.
두 경우 모두 데스크탑 환경에서는 동일한 위치에 광고가 게재되며, 모바일 환경에서만 광고 크기 및 위치가 변경됩니다.
애드센스 수익도 정말 미미한 수준인데, 광고 위치만 요리저리 변경해보고 있네요^^.
본문 우측 상단 반응형 광고 모바일 표시 양식
방법1. 모바일 상단 직사각형
방법2. 모바일 우측 상단 200x200
모바일 환경에서의 광고출력 모양에 따라 2가지 설정 방법을 알아보도록 하겠습니다.
실제 광고가 출력되는 화면 모습부터 한번 보실까요?
우선 데스크탑 화면입니다. 2가지 방법 모두 아래 그림과 같이 본문 오른쪽 위에 336x280 크기의 광고가 게재됩니다. 광고 상하좌우 여백은 당연히 조절 가능합니다. 조절방법은 아래 스크립트 설정부분을 참조하세요.
모바일에서의 화면 출력모습은 아래와 같이 2가지 방법에 차이가 있습니다.
첫번째 방식인 한줄 출력의 모습입니다. 본문 상단에 폭이 꽉찬 직사각형 광고가 표시됩니다. 높이는 자동 조절됩니다.
다음은 두번째 방법으로, 모바일에서도 본문 우측 상단에 200x200 크기의 정사각형 광고가 게재된 모습입니다. 데스크탑 화면의 축소판이며, 현재 제가 사용하고 있는 방법입니다.
STEP 1. 애드센스 홈에서 새광고단위로 반응형 광고를 생성하거나, 기존 반응형 광고 코드를 선택합니다. 저는 기존 광고 코드를 그대로 사용했습니다.
아래는 복사한 광고코드입니다. 다른 건 필요없고 빨간 네모 박스안의 " " 안 값만 편집하면 됩니다.
STEP 2-1. 모바일 환경에서 폭이 꽉찬 직사각형 광고를 설정하는 스크립트입니다. 빨간 네모박스 안의 *****부분을 STEP1에서 생성한 개인 광고 코드로 대체하면 됩니다.
2번째 줄의 float: right는 오른쪽 광고배치, margin : 5px 0px 20px 20px는 각각 상-우-하-좌 위치의 여백을 설정합니다.
STEP 2-1. 모바일 환경에서 우측 상단에 200x200 크기의 광고를 설정하는 스크립트입니다. 마찬가지로 빨간 네모박스 안의 *****부분을 개인 광고 코드로 대체하면 됩니다.
위쪽 코드는 데스크탑 화면에서의 광고 출력 양식을 설정하고, 아래 부분은 모바일 환경에서의 광고 출력 양식을 설정하는 부분입니다.
아래 스크립트를 이용하여 원하는 광고 양식을 만드시면 됩니다.
STEP 3. 광고 설정을 위한 스크립트 작성이 완료되면, 티스트리 관리 ▶ 꾸미기 ▶ HTML/CSS 편집을 클릭합니다.
STEP 4. HTML을 선택한 후 Ctrl+F를 눌러서 "article_rep_desc"를 검색합니다. article_rep_desc의 위가 본문 위쪽 광고, 아래가 본문 아래쪽 광고를 설정하는 곳입니다.
STEP 5. 위쪽을 편집합니다. 광고 설정을 위한 스크립트 위치는 아래 빨간 네모박스입니다. 해당 부분에 위 STEP 2-1 or STEP 2-2에서 만든 스크립트를 copy & paste하시면 됩니다.
아래는 STEP 2-1의 스크립트를 삽입한 경우입니다.
아래는 STEP 2-2에서 편집한 스크립트를 삽입한 HTML파일입니다.
2가지 방법 중에서 마음에 드시는 걸로 설정하시면 될 것 같습니다.
아래는 STEP 2-1의 스크립트를 삽입한 경우입니다.
아래는 STEP 2-2에서 편집한 스크립트를 삽입한 HTML파일입니다.
2가지 방법 중에서 마음에 드시는 걸로 설정하시면 될 것 같습니다.
'블로그' 카테고리의 다른 글
| [티스토리] 링크 글에 마우스 이동 시 무지개 효과 추가하기 (0) | 2017.01.01 |
|---|---|
| 티스토리 블로그 예약포스팅 방법 (0) | 2016.12.28 |
| 반응형 스킨 FastBoot 카테고리 정렬 이상 현상 해결 (0) | 2016.12.09 |
| 티스토리 빠른 반응형 스킨 FastBoot로 변경하기 (0) | 2016.12.06 |
