티스토리에서 신버전과 구버전 에디터를 병행하여 운영할 수 있도록 해주었던 시기가 지나 이제는 신버전 에디터(뉴 에디터)만 사용 가능하도록 시스템이 통합되었습니다. 그래서 구버전 에디터에서 편리하게 사용할 수 있었던 '글상자'와 같은 몇 가지 기능들이 사라져버린 건 아쉬움으로 남네요. 서식적용이나 이전 글 적용 플러그인 등을 사용할 때 발생하는 소소한 오류들 때문에 아직까지도 구버전 에디터가 그립지만 이제는 지금 시스템에 익숙해져야 할 때가 된 것 같아요.
다행히도 이전 포스트를 통해서 글상자를 만드는 방법과 해당 글상자를 신버전 에디터에서 적용할 수 있도록 미리 템플릿을 만들어두었으니 글상자 기능이 필요하신 분은 아래 포스트로 접속하셔서 글상자를 서식으로 만들어서 적용하면 이전 기능과 비슷하게 적용하실 수 있으실 거예요.
[티스토리/글쓰기,꾸미기] - [Tistory]티스토리 에디터 선택, 글상자 변형, 신버전 에디터에서 글상자 사용해보기
[Tistory]티스토리 에디터 선택, 글상자 변형, 신버전 에디터에서 글상자 사용해보기
티스토리 신버전 글쓰기(신규 에디터)가 나온지가 벌써 1년이 넘었지만, 저는 아직도 구버전 글쓰기 (구에디터) 화면이 더 익숙합니다. 신버전의 인터페이스가 아직은 개선되야할 부분이 아직은
rankro.tistory.com
[티스토리/구글 애드센스] - [Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기
[Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기
티스토리 블로그를 운영하시는 분들 중 많은 분들이 수익창출을 위하여 구글 애드센스를 이용하고 계시죠. 티스토리 블로그의 적재적소에 구글 애드센스 광고를 게재하는 방법으로 광고수입을
rankro.tistory.com
위의 포스트에서는 구버전 에디터를 기준으로 애드센스를 적용하는 방법에 대해서 알려드렸었는데, 이상하게도 신버전 에디터에서는 광고코드가 자꾸만 틀어지는 현상이 발생하더군요. 서식으로 저장한 광고코드는 틀어지면 곤란한 일인데, 자꾸만 코드가 변형이 되서 잠시 어려움을 겪었었거든요. 그럼 이번 시간에는 제가 겪었던 내용을 바탕으로 신버전 에디터에서 애드센스 광고코드 서식으로 어떻게 적용을 하면 되는지에 대해서 알아보도록 하겠습니다. 준비되셨으면 바로 출발해보겠습니다!
구글 애드센스 광고에 대한 기본적인 지식 마스터하기
▼ 먼저 광고코드 및 html에 대한 기본적인 기본적인 정보는 아래의 내용들을 확인해주시면 되겠습니다. 먼저 간단하게 알아보고 오시면 도움이 되실거예요. (예습, 또는 복습!)
[티스토리/구글 애드센스] - [Adsense]구글 애드센스 광고단위의 종류와 특징
[티스토리/글쓰기,꾸미기] - [Tistory]html의 기본구조와 티스토리 html 기본편집
[티스토리/구글 애드센스] - [Adsense]티스토리 포스트 본문에 구글애드센스 디스플레이 광고 설정하기
[티스토리/구글 애드센스] - [Adsense]인피드 광고의 개념과 애드센스에서 인피드 광고 생성하는 방법
[티스토리/구글 애드센스] - [Adsense]티스토리에 인피드 광고 게재하는 방법과 정상반영이 안될 때 조치방법
구글 애드센스 광고코드 가져오기
◆ 위의 링크를 보시고 오셨다면 이미 광고코드가 몇 개 만들어져 있을거예요. 여기서는 이미 광고코드를 형성했다는 가정하에 진행을 해보도록 하겠습니다. (복습한다는 기분으로 다시 진행해주시면 될 것 같아요.)
▼ 먼저, 구글 애드센스 관리자페이지의 광고 > 개요 > 광고단위기준탭 순으로 선택하여 들어가주세요.
▼ 기존에 만들어져 있는 광고코드에서 우측 아이콘들을 주목해주세요. 저는 '디스플레이 광고' 코드를 가져와 보겠습니다.
▼ '<>' 아이콘을 선택하여 '코드 가져오기'를 실행합니다.
▼ 광고코드가 확인이 되면 좌측하단의 '코드복사' 버튼을 클릭합니다.
티스토리에서 '서식'으로 광고코드 저장하기 (오류 해결 전)
◆ 지금 설명드리는 내용은 '서식'으로 광고코드를 저장하는 방법입니다. 하지만, 이 방법만으로는 글쓰기 완료 이후, 오류가 발생하게 되는데 이 부분은 아래에서 다시 설명을 해 드릴게요.
▼ 티스토리 관리자페이지 > 서식관리 탭을 클립합니다.
▼ 우측 상단의 '서식 쓰기' 버튼을 클릭해주세요.
▼ 그럼 아래와 같은 글쓰기 화면과 동일한 에디터가 나타나게 됩니다.
▼ 적당한 제목을 쓰고, 기본모드 버튼을 눌러서 나오는 메뉴에서 HTML 탭을 클릭하여 들어갑니다.
▼ 그리고 이 HTML 모드의 본문에 커서를 위치시킨 후 위에서 저장했던 애드센스 광고코드를 붙여넣어주세요.
▼ 기본모드로 돌아와서 보면 아래와 같은 형태로 되어 있을겁니다.
▼ 그럼 이 상태에서 '완료' 버튼을 눌러주세요.
◆ 티스토리 포스트의 본문을 작성한 후 좀 전에 작성했던 광고코드를 적용해보도록 하겠습니다.
▼ 티스토리 관리자페이지에서 '쓰기' 버튼을 클릭하여 들어갑니다.
▼ 본문에 적당하게 글을 작성한 후 광고를 넣을 위치에 커서를 위치키셔주세요.
▼ 상단의 '...' 버튼 하위메뉴에서 '서식' 버튼을 클릭합니다.
▼ 그리고 좀 전에 만들어둔 광고코드를 선택해줍니다.
▼ 그럼 아래와 같이 광고코드가 적용된 것을 확인 할 수 있습니다. 이 상태에서는 광고코드 박스 사이에 공백이 한 줄 생겨있는 것이 보일 겁니다. (이 부분이 오류로 남게 됨)
▼ 포스트를 완료하기 이전에는 이상없이 광고코드가 확인이 되는 것을 알 수 있습니다. ('data-ad-client' 및 'data-ad-slot'이 정상적으로 표시가 되죠?)
▼ 자, 그럼 이상태에서 '완료' 버튼을 눌러서 포스트를 마무리해 줍니다.
▼ 그리고 작성한 글을 '수정'버튼을 눌러서 다시 들어가 봅시다.
▼ 광고코드를 몇 번 클릭하다보면 광고코드 사이에 공백이 더 크게 생기는 것을 볼 수 있습니다.
▼ 이 상태에서 HTML모드로 들어가보겠습니다.
▼ 그러면, 오잉? 좀 전에 확인이 되었었던 광고 식별코드('data-ad-client' 및 'data-ad-slot')가 사라진 것을 볼 수 있습니다. 이 상태에서는 광고가 정상적으로 표시가 되지 안습니다.
티스토리에서 '서식'을 활용하여 정상적으로 광고코드 저장하기 (오류 해결 방법)
◆ 위에서 발생했던 문제를 인식했으니 이번에는 그 문제를 해결해보도록 하죠.
▼ 위에서 작성했던 광고코드를 적용한 서식으로 들어가보겠습니다. 서식관리 > 새로운 광고(위에서 작성했던 서식)를 순서대로 클릭해주세요.
▼ 기본모드를 HTML모드로 변경해주세요.
▼ 아래 내용이 가장 중요합니다. 시작과 끝을 div 태그로 감싸주세요. 잘 모르시겠으면 첫 번째 <script>태그 앞에 <div>티그를 넣어주시구요, 두 번째 </script> 태그 뒤에 </div>태그를 넣어주시면 됩니다.
▼ html 코드 수정이 완료되었다면 '완료' 버튼을 눌서 해당 서식을 저장합니다.
◆ 이번에는 수정된 광고코드가 적용된 서식을 불러와서 결과를 보도록 하겠습니다.
▼ 광고코드를 넣을 위치에 커서를 위치시킨 후 '...' 아이콘 하위의 '서식' 버튼을 눌러줍시다.
▼ 좀 전에 수정했던 '새로운 광고'라는 서식을 클릭합니다.
▼ 그럼 기본모드에서 바로 광고코드가 보이게 되는데, SCRIPT 광고코드 사이의 여백이 줄어들어있는 것을 확인할 수 있습니다. 오호~~
▼ HTML 모드로 들어가서 보더라도 광고코드가 정상적으로 반영되어 있는 것을 알 수 있습니다.
▼ 이상이 없는 것을 확인했으니 글쓰기를 완료하여 저장해봅시다.
▼ 그리고 좀 전에 작성했던 글을 다시 확인하기 위해서 '수정' 버튼을 눌러서 확인해보겠습니다.
▼ 수정을 위하여 다시 포스트로 들어와도 기본모드에서 광고코드가 정상적으로 보이는 것을 알 수 있습니다.
▼ 마찬가지로 HTML모드에서도 포스트 수정후에 정상적으로 광고코드가 나타나는 것을 알 수 있습니다. 유후~~
마치며...
이제 티스토리 뉴에디터(신버전 에디터)에 어느 정도 적응이 되는 것 같습니다. 처음에는 너무 불편해서 구버전 에디터만 사용했었는데, 역시 사람은 적응의 동물이 맞나봅니다. 지금 시스템에 적응을 해나가고 있으니까요. ㅎㅎ. (물론 아직도 구버전 에디터가 더 편리하다고 생각하고 있으며, 현재 뉴에디터의 불편한 점이 크게 개선되었다고 느껴지지는 않습니다. ;;)
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
[티스토리/구글 애드센스] - [Adsense]티스토리 포스트 본문 우측 상단에 애드센스 광고 넣기
[티스토리/구글 애드센스] - [Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익)
[티스토리/구글 애드센스] - [Adsense]사이드바에 간편게재 (티스토리 플러그인으로 사이드바 광고넣기)
'티스토리 > 구글 애드센스' 카테고리의 다른 글
| [Adsense]구글 애드센스 광고 게재율 변경으로 수익 최적화하기 (18) | 2020.04.20 |
|---|---|
| [Adsense]티스토리 포스트 본문 우측 상단에 애드센스 광고 넣기 (81) | 2020.04.18 |
| [Adsense]구글 애드센스 광고 효율적으로 게재하기 (위치별 애드센스 광고 수익) (44) | 2020.01.27 |
| [Adsense]구글 애드센스 페이지별 수익(수입) 확인하는 방법 (애드센스 기능활용) (17) | 2019.12.05 |
| [Adsense]애드센스 앵커광고의 의미와 특징, 앵커광고 하단(아래)설정(게재)하기 (0) | 2019.10.20 |
