[티스토리] 카카오 계정 연동, 본문 상단에 애드센스 2개 적용 (feat. CCZ-CROSS)

해당 포스트에서는 티스토리 카카오 계정 연동 이후 본문 상단에 애드센스 2개 적용하는 방법을 소개합니다.

1. INTRO

최근 티스토리 계정을 카카오 계정과 연동하고 난 후, 기존에 사용하던 구글 애드센스 플러그인이 없어졌습니다.

대신 관리자홈에서 [수익] > [애드센스 관리]를 통해 위치만 설정하면 자동으로 광고가 적용되도록 제공하고 있는데 기존에 사용하던 '본문 상단 애드센스 2개 배치''일치하는 콘텐츠'원하는 형태의 광고가 아닌 반응형 광고만 적용되고 있습니다.

개인적으로 '상단 2개', '하단 일치 콘텐츠' 배치가 최적이라고 생각하여 기존 배치로 재적용하는 방법을 알아보았고
이번 포스트에서는 제가 사용하고 있는 CCZ-CROSS 스킨에서 HTML 수정하여 '본문 상단 애드센스 2개 배치'하는 방법을 소개합니다.

2. 사전 참고사항

아래 설명은 기존에 애드센스 상단 2개 배치를 사용하였고 기존 애드센스 코드를 보유하고 계신다는 가정을 두고 진행됩니다.
만약 '애드센스 상단 2개 배치 코드'가 없으시다면 아래 링크를 먼저 보시기 바랍니다.

3. 애드센스 적용하기

카카오 계정 연동 이후에는 플러그인을 통한 구글 애드센스 적용이 제공되지 않습니다. 따라서, HTML에 직접 코드를 반영해야 하며 아래에서 그 방법을 설명드리겠습니다.

1) HTML 편집기 이동

먼저, HTML 편집을 위해 아래 위치로 이동하셔야 합니다.

  • 위치 : [블로그관리 홈] > [꾸미기] > [스킨 편집] > [html 편집]

▲ 티스토리 블로그관리홈 html 편집화면

2) 코드 적용하기

애드센스 코드를 적용을 위해 위치를 검색해야 합니다. html 편집창을 클릭하시고 Ctrl+F를 눌러 article_rep_desc를 입력해 주세요.

검색된 위치를 기준으로 위쪽이 저희가 준비한 '애드센스 상단 2개 배치' 코드를 적용할 곳입니다. 가지고 계신 코드를 복사하여 아래 사진 위치에 붙여넣기 하시고 위에 적용 버튼을 누르시면 적용이 완료됩니다.

▲ 애드센스 코드 적용 위치

4. 마무리

미리 애드센스 코드를 가지고 계셨던 분들은 크게 어렵지 않으셨을거라 생각합니다. 적용 후 아래와 같이 정상적으로 2개의 광고가 출력되는 것을 확인하였고 다음엔 하단 일치하는 광고를 수동으로 HTML에 적용하는 방법 을 소개드리겠습니다.

▲ 상단 2개 애드센스 출력 확인

5. 관련링크

[1] 애드센스 상단 광고 2개 티스토리 플러그인 없이 HTML로 적용하는 방법
[2] 하단 일치하는 광고를 수동으로 HTML에 적용하는 방법