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

[Adsense]티스토리 뉴에디터 포스트 본문 광고 오류 해결

by 랭크로 2021. 3. 6.

티스토리에서 신버전과 구버전 에디터를 병행하여 운영할 수 있도록 해주었던 시기가 지나 이제는 신버전 에디터(뉴 에디터)만 사용 가능하도록 시스템이 통합되었습니다. 그래서 구버전 에디터에서 편리하게 사용할 수 있었던 '글상자'와 같은 몇 가지 기능들이 사라져버린 건 아쉬움으로 남네요. 서식적용이나 이전 글 적용 플러그인 등을 사용할 때 발생하는 소소한 오류들 때문에 아직까지도 구버전 에디터가 그립지만 이제는 지금 시스템에 익숙해져야 할 때가 된 것 같아요.

다행히도 이전 포스트를 통해서 글상자를 만드는 방법과 해당 글상자를 신버전 에디터에서 적용할 수 있도록 미리 템플릿을 만들어두었으니 글상자 기능이 필요하신 분은 아래 포스트로 접속하셔서 글상자를 서식으로 만들어서 적용하면 이전 기능과 비슷하게 적용하실 수 있으실 거예요.

[티스토리/글쓰기,꾸미기] - [Tistory]티스토리 에디터 선택, 글상자 변형, 신버전 에디터에서 글상자 사용해보기

 

[Tistory]티스토리 에디터 선택, 글상자 변형, 신버전 에디터에서 글상자 사용해보기

티스토리 신버전 글쓰기(신규 에디터)가 나온지가 벌써 1년이 넘었지만, 저는 아직도 구버전 글쓰기 (구에디터) 화면이 더 익숙합니다. 신버전의 인터페이스가 아직은 개선되야할 부분이 아직은

rankro.tistory.com

다음으로 제가 신버전 에디터를 사용하면서 겪었던 애드센스 광고 오류 부분에 대한 해소방안을 이번 시간에 적용을 해보려고 합니다. 애드센스 광고단위를 서식으로 만들어서 적용하는 방법에 대해서는 포스팅을 해서 안내를 드렸었죠.

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

 

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

티스토리 블로그를 운영하시는 분들 중 많은 분들이 수익창출을 위하여 구글 애드센스를 이용하고 계시죠. 티스토리 블로그의 적재적소에 구글 애드센스 광고를 게재하는 방법으로 광고수입을

rankro.tistory.com

위의 포스트에서는 구버전 에디터를 기준으로 애드센스를 적용하는 방법에 대해서 알려드렸었는데, 이상하게도 신버전 에디터에서는 광고코드가 자꾸만 틀어지는 현상이 발생하더군요. 서식으로 저장한 광고코드는 틀어지면 곤란한 일인데, 자꾸만 코드가 변형이 되서 잠시 어려움을 겪었었거든요. 그럼 이번 시간에는 제가 겪었던 내용을 바탕으로 신버전 에디터에서 애드센스 광고코드 서식으로 어떻게 적용을 하면 되는지에 대해서 알아보도록 하겠습니다. 준비되셨으면 바로 출발해보겠습니다!

구글 애드센스 광고에 대한 기본적인 지식 마스터하기

▼ 먼저 광고코드 및 html에 대한 기본적인 기본적인 정보는 아래의 내용들을 확인해주시면 되겠습니다. 먼저 간단하게 알아보고 오시면 도움이 되실거예요. (예습, 또는 복습!)

구글 애드센스 광고코드 가져오기

◆ 위의 링크를 보시고 오셨다면 이미 광고코드가 몇 개 만들어져 있을거예요. 여기서는 이미 광고코드를 형성했다는 가정하에 진행을 해보도록 하겠습니다. (복습한다는 기분으로 다시 진행해주시면 될 것 같아요.)

 먼저, 구글 애드센스 관리자페이지의 광고 > 개요 > 광고단위기준탭 순으로 선택하여 들어가주세요.

 기존에 만들어져 있는 광고코드에서 우측 아이콘들을 주목해주세요. 저는 '디스플레이 광고' 코드를 가져와 보겠습니다.

 '<>'  아이콘을 선택하여 '코드 가져오기'를 실행합니다.

 광고코드가 확인이 되면 좌측하단의 '코드복사' 버튼을 클릭합니다.

티스토리에서 '서식'으로 광고코드 저장하기 (오류 해결 전)

 지금 설명드리는 내용은 '서식'으로 광고코드를 저장하는 방법입니다. 하지만, 이 방법만으로는 글쓰기 완료 이후, 오류가 발생하게 되는데 이 부분은 아래에서 다시 설명을 해 드릴게요.

 티스토리 관리자페이지 > 서식관리 탭을 클립합니다.

 우측 상단의 '서식 쓰기' 버튼을 클릭해주세요.

 그럼 아래와 같은 글쓰기 화면과 동일한 에디터가 나타나게 됩니다.

 적당한 제목을 쓰고, 기본모드 버튼을 눌러서 나오는 메뉴에서 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모드에서도 포스트 수정후에 정상적으로 광고코드가 나타나는 것을 알 수 있습니다. 유후~~


마치며...

이제 티스토리 뉴에디터(신버전 에디터)에 어느 정도 적응이 되는 것 같습니다. 처음에는 너무 불편해서 구버전 에디터만 사용했었는데, 역시 사람은 적응의 동물이 맞나봅니다. 지금 시스템에 적응을 해나가고 있으니까요. ㅎㅎ. (물론 아직도 구버전 에디터가 더 편리하다고 생각하고 있으며, 현재 뉴에디터의 불편한 점이 크게 개선되었다고 느껴지지는 않습니다. ;;)

뉴에디터에서 생각지도 못했던 광고코드 오류가 발생해서 한참을 헤맸습니다. 대체 왜 틀어지는 걸까~~를 참 여러 번 생각했던 것 같아요. 그래도 해결점을 찾을 수 있어서 다행입니다. 해결이 안되었다면 지금도 불편함과 오류에서 오는 스트레스를 안고 포스트를 쓰고 있었을 거예요. ^^; 아무튼 누군가에게 이 포스트의 내용이 도움이 되었으면 좋겠네요. 오늘은 이만 여기서 줄입니다. 다음 시간에 다시 만나요. ^^