이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6.
언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
이 포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.
그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.
제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.
그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.
본문 우측에 게재되는 광고 예시 살펴보기
▼ 현재 제가 데스크톱에서 사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.
▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.
애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?
▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.
▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.
▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.
▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.
포스트 본문 우측상단에 광고 게재하는 방법 요약
◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.
1. 에드센스에서 광고단위를 생성한다. (종류 : 디스플레이 / 반응형)
2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.
3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)
4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)
5. 티스토리 관리자페이지로 가서 html 편집기를 연다.
6. 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ( 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.
7. 적용결과를 확인한다. 끝.
티스토리 포스트 분문 우측 상단에 광고를 게재해보자.
◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.
[Step1] 애드센스 광고단위 생성
▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.
◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.
▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.
▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.
[Step2] 광고코드 기억하기
▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)
[Step3] 텍스트 파일 열기
▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.
▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 'ca-pub-xxxxxxxxxxxx' 모두가 포함되어야 합니다.
◆ 위의 내용을 잠시만 들여다 보고 가볼까요?
▲ 최 상단의 <div style="float: right; margin: 5px 0px 0px 10px;"> 및 최 하단의 </div>는 광고의 위치를 정의합니다. 광고를 오른쪽에 위치시키며 광고에 여백을 줍니다. 광고의 여백은 margin으로 정의되는데, 순서대로 위, 오른쪽, 아래쪽, 왼쪽의 여백을 주는 것입니다. 따라서 위의 코딩은 위 5px, 오른쪽 0px 아래쪽 0px, 왼쪽 10px의 여백을 주는 것입니다.
▲ 두 번째 단락은 'Style'을 정의합니다. right_up은 제가 만든 고유의 이름입니다. 이 부분은 영문과 숫자, 언더바(밑줄)로 구성되어야 합니다. 'Style' 영역내에서는 right_up 왼쪽에 점(.)이 반드시 포함되어야 합니다. 위의 코딩에서 크기는 다음과 같이 정의됩니다. 화면폭이 500픽셀 이하의 기기에서는 폭과 높이가 각각 200px, 200px로 구성되고, 화면폭이 500~799픽셀이라면 폭과 높이가 각각 250px, 250px로, 화면폭이 800픽셀 이상이라면 폭과 높이가 각각 336px, 280px로 지정됩니다.
▲ 세 번째 단락은 '광고컨텐츠'를 의미합니다. data-ad-client는 구글애드센스의 본인 ID(광고 게시자의 ID)를 의미하고, data-ad-slot는 광고ID(광고단위의 ID)를 의미합니다. 분석은 여기까지입니다. ^^
◆ html에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.
마치며...
티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.
요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
