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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. [##_article_rep_desc_##] 바로 위에 좀 전에 수정된 텍스트 파일을 복사하여 붙여넣는다. ([##_article_rep_desc_##] 파일이 여러 개가 조회가 될 경우 될 때까지 적용) 그리고 저장.

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

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

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

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

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

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

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

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

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

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

[Step2] 광고코드 기억하기

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

[Step3] 텍스트 파일 열기

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

[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에 대한 기본사항이 궁금하시다면 아래의 포스트를 참고해주세요. (찾기 기능과 중복된 자료를 하나씩 조회하는 기능도 필요하실테니 확인하시면 좋아요.)

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

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

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

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

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

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

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

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

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

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

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


마치며...

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

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

댓글(37)

  • 2020.04.19 18:19 신고

    본문 우측 상단에 광고를 게시하는 방법 궁금했는데,, 다음에 한 번 시도해보고 한달 정도 유지해서 결과물을 비교해보아야겠습니다. 아주 고급정보 감사합니다^^

    • 2020.04.19 18:49 신고

      안녕하세요, 책린이님! 적용한 후 좋은 결과가 있으셨으면 좋겠습니다. 저두 감사드립니다. 꾸벅~~^^

  • 2020.04.20 13:04 신고

    님은 천재시네요 대박~!!!
    완전 고급 정보입니다. ㅎㅎㅎ

    • 2020.04.20 19:23 신고

      감사합니다, Domas hand님!!^^ 포스트가 도움이 되기기를 바랍니다.

  • 2020.04.20 13:52 신고

    감사합니다!! 정말 많은 정보를 배워갑니다 ^^

    • 2020.04.20 19:24 신고

      안녕하세요, 꿈꾸는루키님. 방문 감사드리고 좋은 말씀에 힘을냅니다. 오늘 하루 고생 많으셨습니다. ^^

  • 2020.04.23 22:54 신고

    감사합니다 ㅎㅎ 좋은글 잘보고갑니당

  • 2020.04.24 10:44 신고

    저도 지금 이 글을 보고 따라하고 있는데 플러그인에서 적용시켜봤는데요. PC에서는 잘 나오는데 모바일에서 확인해보니 글의 형태가 님 처럼 자연스럽게 안나오고 쭉 길게 나옵니다. 원래대로 라면 글이 광고를 감싸는 방식이 되야 되는데 아래처럼 나오네요.ㅠㅠ

    이런형식 [광고]
    으로 계속
    나오는데
    어떻게
    해야될까요?

    • 2020.04.24 11:09 신고

      CreationJC님. 아마도 그 부분은 플러그인을 사용하셔서 발생한 문제일 거예요. 번거롭더라도 html편집기에 들어가셔서 ##_article_rep_desc_## 바로 윗부분에 코딩을 적용해주셔야 PC뿐만 아니라 모바일, 태블릿에서도 정상적으로 반영이됩니다. 참고하시고 좋은 하루 보내세요. ^^

  • 2020.04.24 11:30 신고

    저는 article, rep, desc가 검색되지 않네요.ㅠㅠ 어쩔 수 없죠 뭐 ㅋㅋㅋ 암튼 감사합니다!!!

    • 2020.04.24 22:22 신고

      아, 이런 슬픈일이 생기다니요... 흑. 티스토리에서는 ##article_rep_desc## 치환자가 본문의 처음과 끝을 의미하는 것으로 알고 있어요. ##article_rep_desc## 위에 광고를 삽입하면 본문 윗 부분에, ##article_rep_desc## 아래에 광고 삽입하면 본문의 아랫 부분에 광고가 생기는 형태거든요. 그래서 이 포스트에 나와 있는 내용도 치환자 윗부분에 넣어서 본문의 위에 광고가 위치하게 되는 것이거든요.
      그럼 티스토리에서도 위의 치환자 말고도 다른 코딩으로 되어있는 스킨이 있다는 거네요. 저도 좀 더 알아봐야겠습니다. 열심히 시도해보셨을텐데, 도움을 드리지 못해 죄송합니다. ㅠㅜ

  • 2020.04.24 22:33 신고

    아 ㅋㅋㅋㅋㅋㅋㅋㅋ 찾았어요 ㅋㅋㅋㅋ근데 이전 글들 때문에 적용은 못하겠어요!!!
    감사해요!!

    • 2020.04.24 22:48 신고

      아, 찾으셨다니 다행입니다. 제가 잘 못 알고 있는줄 알았거든요. ㅎㅎ 우측상단이 아니더라도 지금 적용하고 있으신 광고게재방법이 더 효율적일 수도 있을테니 그대로 사용해보세요~~ ^^

  • 2020.05.26 01:22 신고

    정성스럽게 작성하신 글 유익하게 잘 읽었습니다 :)

    직접 HTML 쪽은 수정하지 않고 메인하단, 본문상단 토글을 ON 해서 삽입 시켰는데 가이드와 다르게 메인 리스트 사이사이에 자동삽입이 되고, 의도하지 않은 위치에 광고가 추가로 삽입되는 현상은 왜 발생하는지 의견 좀 들을 수 있을까요? (구글 애드센스는 디스플레이형 이고, 티스토리 플러그인은 전부 비활성화 상태입니다.)

    • 2020.05.26 07:14 신고

      안녕하세요, Whitepaek님! Html을 수정하지 않으시면 모바일기기에서는 본문우측 상단이 아닌 본문 상단에 광고가 게재됩니다. 플러그인이 아닌 토글을 이용한 방법이라면 저와 유사한 스킨 사용중 또는 스킨에서 제공하는 광고 삽입 기능을 이용하시는 것으로 생각이 되는데요. Html 수정을 통하여 포스트에서 설명드린 위치에 코딩을 넣으시면 기기 종류에 상관없이 본문의 우측 상단에 광고가 게재 될거예요.
      의도치 않은 위치에 광고가 추가 삽입된 것은 아마도 자동광고 때문일거예요. 저의 다른 포스트에서 자동광고에 대해 설명드린 적이 있는데요 포스트번호 174, 175를 참고하시면 도움이 되실거예요. 원하지 않는 위치에 광고가 게재되는 것을 원천적으로 막으려면 자동광고 기능을 사용하지 않으시면 되구요. 참고하시고, 좋은 하루 보내세요~^^

    • 2020.05.26 10:01 신고

      답변 감사합니다.
      추천해주신 포스트를 읽고, 구글 애드센스에서 자동광고를 해제하고 싶어서 접속 하였더니 광고 메뉴 하위에 '기타제품' 밖에 안보이네요. 혹시 제가 찾지 못하는 부분이 있을까요?

    • 2020.05.26 12:09 신고

      현재 애드센스의 인터페이스가 약간 변경되었네요. 지금 기준으로 자동광고는 애드센스 관리자페이지 - 광고 - 개요 부분에 있습니다. 혹시 개요가 확인이 안되시는 건가요?

    • 2020.05.26 12:32 신고

      "광고 - 개요" 확인했습니다. 하지만 자동광고 설정하는 영역이 어딘지는 잘 모르겠네요^^;

      사이트 관리로 접속해도 자동광고 설정은 따로 찾아볼 수 없고 "Google에서 사이트의 가장 적합한 위치에 자동으로 광고를 게재합니다." 문구만 확인이 가능하네요.

      혹시 이제는 자동 광고 설정을 관리자가 직접 할 수 없는건지, 아니면 제가 못찾는건지..ㅠ

    • 2020.05.26 13:41 신고

      네, 지금까지는 잘 찾아 들어가신거예요. 거기서 중간쯤 보시면 애드센스 광고가 게재중인 티스토리 블로그 주소가 보이실 거구 거기서 오른쪽에 보시면 연필처럼 생긴 아이콘이 있습니다. 그걸 클릭하면 자동광고 설정이 가능한 토글버튼이 있습니다. 자동광고 설정은 이 토글버튼으로 하시면되고, 나머지는 설명드렸던 포스트 참고해서 진행하시면 됩니다. 고민이 꼭 해결되셨으면 좋겠네요. ^^

    • 2020.05.26 13:59 신고

      답변 감사합니다^^

      사파리 브라우저에서는 자동광고에 관한 토글이 정상적으로 보이지 않았던 문제였네요..
      크롬 브라우저는 정상적으로 잘 보이네요..ㅎㅎ

    • 2020.05.26 14:51 신고

      해결되셔서 다행입니다!! ^^

  • 2020.06.23 14:12 신고

    안녕하세요 글이 너무 좋아서 저도 따라해보려고 시도했는데요. 스킨 편집의 해당 내용이 찾아봐도 검색이 되질 않네요.. ㅠㅠ 대체 검색해볼 것이 없을까요?

    • 2020.06.23 18:18 신고

      안녕하세요, 세모섬님! 혹시
      atricle_rep_desc
      으로 검색을 해보신 건가요? 그렇다면 article_rep_desc 으로 검색을 다시 부탁드립니다. 제 포스트에서 단어 중 몇 글자에 오타가 있었던 것 같아요. 흑... 다시 한 번 확인 부탁드리겠습니다. 좋은 하루 보내세요. (참고로 지금은 포스트 오타를 수정을 해두었습니다.)

  • 2020.06.23 21:04 신고

    에드센스 승인을 받고 광고를 올리는 법을 알아 보려고 서치를 했는데, 랭크로님이 1등으로 떠 있어서 들어왔습니다.^^
    너무 설명을 잘 해 놓으셔서 도움이 많이 될거 같아요. 사실, 승인 메일을 방금전에 받고, 버튼을 클릭해서 시작하기가 겁이나요. 이런걸 잘 못하거든요.

    제글에 썸네일이 글 상단에 항상 배치되어 있는데, 만일 상단 우측 광고를 넣게 되면 괜찮을지 궁금합니다. 랭크로님은 글로 시작이 되서 자연스럽게 광고랑 맞는데, 저는 그 자리에 썸네일이 있거든요.
    괜찮을까요?

    • 2020.06.23 23:43 신고

      the grace님! 반갑습니다. 먼저 애드센스 승인을 축하드립니다. (박수~짝짝!) 저도 처음에 애드센스 승인이 미끄러지면 어떻게하나~~ 하고 고민했던 적이 있었거든요.
      음~ 썸네일이 글 상단에 배치되어 있는 건 저의 경우와 비슷한 것 같아요. 저도 글의 윗부분에 썸네일(포스트의 제목을 넣은 이미지)을 넣거든요. 하지만, 썸네일을 넣기 전에 글(Text)을 먼저 배치시켜요. 포스트에 내용을 담기에 앞서서 서문(Prologue)에 해당하는 내용으로 독자에게 설명을 드리는 동시에 본문 우측 상단의 광고와 겹치지 않도록 하는 역할도 하고 있거든요.
      포스트번호 255번에 설명을 드렸지만, 저는 포스트의 두 번째 문단에도 광고를 넣습니다. 그래서 서문이 꽤 긴편이죠. (이 부분은 말씀드린 포스트를 읽어보시면 좀 이해가 되실 것 같아요.)
      the grace님 블로그를 둘러보고 왔는데 머릿말을 어느정도 써두신 후에 썸네일을 배치시키는 것 같아요. 그 정도면 우측상단 광고와 겹쳐지지는 않을것 같습니다. 걱정 안하셔도 될 것 같아요. ^^
      오늘 하루도 고생 많으셨습니다. 내일은 더 좋은 하루 되셨음 좋겠어요.

    • 2020.06.23 23:48 신고

      진심으로 감사드립니다. 제가 랭크로님거를 보고 살짝 수정을 했습니다. 앞으로 더 공부를 해야해서 랭크로님 블로를 잘 이용해 볼까 합니다. 감사드립니다.^^

  • 2020.06.24 10:42 신고

    랭크로님, 오늘 자세히 보면서 따라 해봤는데요, 저는 광고가 글을 덮었어요. 그리고 오른쪽으로 안가고 가운데에서요. 혹시, '모바일' 설정에서 사용하지 않습니다..로 전환해야 하나요? 또는 사이즈가 제 글과 맞지 않기 때문일까요?
    랭크로 님의 코드를 복사해서 사용했어요.^^

    • 2020.06.24 10:58 신고

      음~ 일단 모바일설정은 저도 '사용하지 않습니다.'로 적용되어 있습니다. 제가 사용하는 스킨이 반응형이기 때문에 모바일 설정은 제외하는 걸로 해두었어요.
      글구 광고가 가운데에 있거나 글을 덮는다는 건 해당 코딩이 적당한 위치가 아닐 확률이 높을 것 같아요.
      article_rep_desc으로 검색하셨을 때 검색결과가 한 개 이상인 경우에는 html에편집에서 gtrl+g로 이동해가면서 적용해보세요. 해당 단축키 사용법은 포스트번호 162번에 있어요.
      저도 이 코딩을 적용할 때 여러번의 시행착오를 겪었고, 한 단계만 실수하더라도 광고적용이 안되었었던 기억이 있어서 포스트에 자세하게 적어놓은 거거든요. 꼭 해결하시길 바랍니다. ^^

    • 2020.06.24 11:05 신고

      감사합니다. 많은 도움이 됩니다. 랭크로님에 대해서 처음 제가 블로그 시작할때 어떤 분이 알려 주셨어요. 정말 많은 도움을 주시네요.^^

  • 2020.06.27 10:21

    비밀댓글입니다

    • 2020.06.27 14:44

      비밀댓글입니다

  • 2020.06.27 22:28

    비밀댓글입니다

    • 2020.06.28 17:51

      비밀댓글입니다

  • 2020.06.29 11:14

    비밀댓글입니다

  • 2020.07.06 17:13

    비밀댓글입니다

    • 2020.07.06 21:25

      비밀댓글입니다

Designed by JB FACTORY