본문 바로가기
티스토리/구글 애드센스

[Adsense]티스토리 포스트 본문 우측 상단에 애드센스 광고 넣기

by 랭크로 2020. 4. 18.

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

1. 에드센스에서 광고단위를 생성한다.  (종류 : 디스플레이 / 반응형)

2. 광고코드에 나와 있는 data-ad-client 와 data-ad-slot 뒤에 나와있는 숫자를 잘 기억해둔다.

3. 이 포스트에서 제공하는 텍스트 파일을 다운로드 받아 열어준다. (제목 : 본문 우측 상단에 광고배치하기)

4. 텍스트 파일에 문자+숫자 및 숫자를 넣어준다. (광고코드 중 data-ad-client 뒤의 문자+숫자(ca-pub-숫자)를 "@@@@@@@@" 부분에, data-ad-slot 뒤의 숫자를 "%%%%%%%%"에 넣어주면 됩니다.)

5. 티스토리 관리자페이지로 가서 html 편집기를 연다.

6. 

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. (

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.

7. 적용결과를 확인한다. 끝.

티스토리 포스트 분문 우측 상단에 광고를 게재해보자.

◆ 그럼 티스토리에서 모바일기기, 태블릿PC, 데스크톱PC 모두의 경우에 포스트의 본문 우측 상단 광고를 게재하는 방법에 대하여 알아보도록 하겠습니다. 차례차례 따라해보세요.

[Step1] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6]

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

' 을 찾아주세요.

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

이 여러 개가 조회된다면 각각

언젠가 제가 구글 애드센스 광고 수익을 얻을 수 있는 위치에 대하여 포스팅 한 적이 있었습니다.

[Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)

포스트를 마무리를 하면서 본문 우측상단에 광고를 배치시키는 방법에 대하여 글을 써보겠다고 말씀도 드렸었죠. 그리고 새까맣게 잊고 있었습니다.

그런데 얼마 전 한 블로거로부터 데스크톱에서 뿐만 아니라 모바일에서도 본문의 우측 상단위치에 광고를 게재하고 싶은데 그 방법이 궁금하다고 문의를 받았습니다.

제가 하기로 했던 스스로의 약속도 있었고, 여기에 요청까지 있다보니 포스팅을 하지 않을 수가 없었습니다. 티스토리 플러그인이나 스킨 자체적으로 제공해주는 기능을 사용하면 포스트의 우측 상단에 광고를 게재할 수 있습니다. 그런데 보통은 데스크톱에서는 구현이 잘 되지만, 모바일에서는 본문 우측 상단이 아닌 본문 수평 상단 형태로 게재가 되는 경우가 많습니다.

그래서 이번 시간에는 데스크톱 뿐만 아니라 태블릿과 모바일의 경우까지 티스토리 포스트 본문의 우측 상단에 애드센스 광고를 다는 방법에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발합니다.

본문 우측에 게재되는 광고 예시 살펴보기

▼ 현재 제가 데스크톱에서  사용하고 있는 형태는 아래와 같습니다. 포스트 글의 상단 우측에 위치해있죠.

▼ 그리고 아래는 모바일 화면에서 보이는 우측 상단의 광고 형태입니다. 다행히도 형태가 깨지지 않고 잘 표현되어 있군요.

애드센스 광고를 기기별 다른 크기로 본문 우측에 게재해도 괜찮을까?

▼ 잘 아시겠지만, 애드센스에서는 광고게재에 대한 가이드라인을 설정해놓고 있습니다. 본인도 모르는 사이에 애드센스의 광고게재에 제재를 받을 수 있는 상황이 발생할 수 있죠. 예를 들면, 콘텐츠와 광고가 겹치게 보이도록 하여 광고 클릭을 유도하는 광고형태는 허용되지 않는 광고형태입니다. 애드센스에서 혀용되지 않는 광고 게재에 대한 형태를 아래와 같이 구분하고 있습니다.

▼ 그리고 화면폭에 맞추어 광고의 크기를 변경하는 부분에 대해서는 허용되는 사항이라고 명시를 해주고 있습니다.

▼ 위에서 설명하고 있는 예시는 예시가 바로 아래의 광고코드 구현 예시입니다. 아래의 코딩은 기기의 형태(모바일, 태블릿, 데스크톱)에 따라서 광고의 크기를 가변하는 내용입니다.

▲ 그리고 이번에 진행하는 본문 우측상단 광고는 이 광고코드를 바탕으로 만들어 지게되니 광고게재가 적합한지에 대해서는 걱정을 하지 않으셔도될 것 같습니다.

포스트 본문 우측상단에 광고 게재하는 방법 요약

◆ 세부적인 내용을 설명드리기에 앞서서 티스토리 본문 우측위치에 광고를 게재하는 방법에 대하여 간략하게 설명을 먼저 드릴게요.

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] 애드센스 광고단위 생성

▼ 먼저 애드센스의 광고단위를 생성해봅시다. 애드센스 관리자페이지의 '광고' 탭 하위의 '개요' 버튼을 눌러주세요.

◆ 혹시라도 광고단위와 디스플레이 광고가 뭔지 모르시는 분들은 아래 내용들을 먼저 살펴보고 와주세요.

[Adsense]구글 애드센스 광고단위의 종류와 특징

[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기

▼ 광고단위 기준탭을 클릭한 후 신규광고단위 만들기 '디스플레이 광고'를 선택합니다.

▼ 광고단위의 이름을 입력한 후 광고형태를 '사각형'으로 선택해주세요.

▼ 광고크기는 '반응형'과 '고정형'이 있습니다. 이 중에서 초기값으로 설정된 '반응형' 탭을 선택합니다.

▼ 그리고 우측하단의 '만들기' 버튼을 눌러서 디스플레이 광고(반응형,사각형)을 생성합니다.

[Step2] 광고코드 기억하기

▼ 광고코드가 생성되었다면 광고코드에서 'data-ad-client' 및 'data-ad-slot' 뒤에 적혀있는 문자 및 숫자를 기억해주세요. 주의할 점은 data-ad-client 뒤의 큰 따옴표 안에 있는 문자와 숫자가 모두 필요하다는 점입니다. (ca-pub-xxxxxxxxxxxx 형태가 모두 복사되어야 함)

[Step3] 텍스트 파일 열기

▼ 그럼 제 블로그에는 우클릭 방지 플러그인이 설정되어 있어서 포스트에 직접 코딩내용을 입력하지는 못하기 때문에 아래에 별도 텍스트 파일을 만들어두었습니다. 아래 파일을 열어주세요.

본문 우측 상단에 광고배치하기.txt
다운로드

[Step4] 텍스트 파일에 문자+숫자 및 숫자 넣어주기

▼ 텍스트를 열면 아래와 같은 형태로 되어 있을 것입니다. 여기서 위에서 확인했던 애드센스 광고의 '@@@@@@@@' 및 '%%%%%%%%' 부분을 입력해주세요. 위에서도 설명드렸지만, '@@@@@@@@' 부분에는 '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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Step5] 티스토리 관리자페이지에서 html 편집기 열기

▼ 티스토리 관리자페이지로 들어가서 html 편집기를 열어주세요.

▼ 화면 우측 상단에 있는 'html 편집' 버튼을 눌러주세요. 참고로 저는 JB SKIN 167 스킨을 사용중입니다.

[Step6] 위에 수정된 텍스트파일 붙여넣기

▼ html 편집화면에서 '' 을 찾아주세요.

▼ 바로 윗칸에 좀 전에 수정했던 텍스트파일을 붙여넣기 해주세요. 만약 이 여러 개가 조회된다면 각각 윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기

 

윗 부분에 붙여넣기를 해서 적용시켜봅니다. JB SKIN 167의 경우에는 두 개가 조회가 되는데 두 번째에 위치시켜야 정상적으로 광고가 게재됩니다.

▼ 붙여넣기를 적용한 결과입니다.

▼ 정상적으로 완료되었다면 상단의 '적용' 버튼을 눌러서 마무리 합니다.

 

[Step7] 적용된 결과 확인하기

▼ 티스토리 포스트의 우측 상단에 애드센스가 정상적용되었는지 확인해볼까요? 먼저 데스크톱입니다. 정상적으로 반영이 되었군요.

▼ 다음으로 모바일기기에서의 화면입니다. 아래의 경우도 정상이군요. 이상없이 완료되었습니다.


마치며...

티스토리 본문 우측 상단에 게재한 광고가 다른 위치의 광고에 비하여 수익이 높은 편입니다. 이전에는 본문 상단에 두 개의 광고를 배치시켰던 적이 있었는데, 저의 경우에는 그것보다 본문의 우측상단에 광고를 배치시키는 것이 광고효과가 더 있는 것으로 분석되었습니다. (수익이 더 높았다는 의미입니다.) 물론 블로그의 종류나 형태에 따라서 차이가 있을 수 있으므로 이 글을 보고계신 여러분들도 광고의 배치를 조금씩 달리하여 수익을 비교, 분석해보셨으면 좋겠습니다. 열심히 쓴 글에 대한 보상도 받으셔야 할테니까요.

요즘 한 번씩 포스팅을 요청하시거나 문의하시는 글들이 올라오고 있습니다. 모든 분들께 다 만족시켜드리지는 못하겠지만, 최대한 요청사항을 반영해보도록 하겠습니다. 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Analytics]구글애널리틱스 실시간 보고서에서 확인할 수 있는 것들

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기

[Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기