안녕하세요.
카카오 먹통 사태 이후로 다시금 이것저것 블로그를 손보면서 나름대로 블로그 개편을 진행해봤습니다.
이번 포스팅에 적을 내용은 아래의 두 가지입니다.
- 티스토리 스킨 교체
- 멀티플렉스 광고 삽입
우선 티스토리 스킨은 스타큐브 오디세이에서 순정 오디세이 스킨으로 변경했습니다.
처음에 스타큐브 오디세이 스킨을 사용했던 이유는 광고 삽입 기능이 마음에 들어서였습니다.
HTML 편집없이 스킨 관리 메뉴에서 직접 광고를 적용할 수 있는 부분이 편할 것 같아서였는데요.
그동안 큰 이슈없이 나름대로 잘 사용해온 것 같습니다.
다만 22년 3월부터 이름이 바뀐 멀티플렉스 광고(구 일치하는 콘텐츠 광고)를 이번에 적용하다보니 사이즈 이슈인지 8개가 아닌 3개만 출력되는 현상이 있었습니다.
이걸 일일이 css 추적해서 픽스를 하자니 또 귀찮아질 것 같단 생각도 있고, 어쩌다보니 광고 레이아웃도 조금 난잡해진 기분도 들었고요.
결국 편하게 가자는 생각에 순정 스킨으로 바꿨습니다.
이번에 스킨 관련해서 정보를 찾다보니 그동안 모르고 있던 이슈도 알게 되었습니다.
아래 이미지처럼 검색결과 밑에 있어야할 페이지 이동 버튼이 그동안 제 페이지에선 안나오고 있었습니다.
검색 결과에서 누락되는 현상은 순정 오디세이의 과거 버전에 있던 오류였는데 스타큐브 오디세이도 결국 과거의 버전을 베이스로 제작된 것이다보니 같은 현상이 발생하고 있었던 겁니다.
조금 더 찾아보니 특정 CSS 구문만 삭제해도 되긴한다는데 어차피 스킨을 바꾸기로 한 거 스킨을 교체하면서 자연스럽게 해결이 되긴 했습니다.
순정 오디세이 스킨으로 변경 후 애드센스 광고를 추가하였습니다.
다만 기존까진 수동으로 했던 걸, 이번엔 수익메뉴의 애드센스 연동 기능으로 적용해봤습니다.
연동하고나니 수익 메뉴에 애드센스 관리 메뉴도 추가되고, 광고 설정 방법도 간단하게 진행되서 위와 같이 광고를 설정해뒀습니다.
다만 본문 중간 광고는 글쓰기 에디터에서 개별 설정하거나 HTML 편집 영역에 별도의 구문을 추가해둬야한다고하는데 이부분을 손을 댈지는 고민 중이긴 합니다.
어쨌든 가장 적용하고 싶었던 멀티플렉스 광고는 어쩔 수 없이 HTML 편집을 거쳐야했기에 우선은 기본 제공되는 광고에 멀티플렉스까지만 세팅해뒀습니다.
아래부터는 멀티플렉스 광고를 적용하는 과정입니다.
우선 애드센스에 로그인하여 광고 - 광고 단위 기준에서 멀티플렉스 광고를 선택한 후 만듭니다.
제 경우엔 10월 초에 만들어둔게 있어서 바로 코드 가져오기 버튼을 눌러줬습니다.
일단 HTML 영역에 넣어둘 광고 코드는 확보했으니 이제 오디세이 스킨 편집 - HTML 편집으로 가서 ##_article_rep_desc_##를 찾아줍니다.
2022.10.27 기준 현재 아무것도 추가하지 않은 상태에서는 216행에 위치해 있습니다.
여기서 div가 끝나기 직전, 217행의 </div> 앞에 해당 코드를 넣어주면 됩니다.
잠깐! 혹시나 HTML이 서툴다면 사전에 미리 스킨보관 또는 전체 HTML 코드를 복사하여 백업해두시기 바랍니다.
혹시나 모를 오류 발생시 즉시 되돌릴 수 있게 백업해두는 습관을 들여두면 좋습니다.
위 이미지를 보시면 217행 ~ 227행까지 앞서 애드센스 홈페이지에서 복사한 광고 코드가 삽입된 것을 알 수 있습니다.
참고로 217행의 녹색 글씨는 제가 주석으로 달아둔 내용입니다. 추후에 또 언제 HTML을 편집할지 모르니 이런건 표시해두는게 좋습니다.
위 이미지는 멀티플렉스 광고가 삽입되기 전의 모습이고, 바로 아래 이미지가 멀티플렉스 광고 삽입 후의 모습입니다.
저는 이미 광고 단위가 만들어져 있어 즉시 광고가 출력되었는데 광고 단위를 만든 직후에는 일정 시간 광고 출력이 되지 않을 수 있으니 참고바랍니다.
스킨도 바꿨고, 원하던 광고도 정상적으로 출력되는 것을 확인했으니 아마 당분간은 크게 뭔가를 건드리진 않을 것 같습니다.
읽어주셔서 감사합니다.
'Web 이야기 > 티스토리&HTML&CSS' 카테고리의 다른 글
| 티스토리 블로그 작성 시간 숨기기 (3) | 2022.11.02 |
|---|---|
| 네이버, 구글 웹마스터 도구 메타 태그 재확인 방법 (0) | 2022.10.31 |
| 카카오 먹통 사태로 본 티스토리 블로그가 받은 영향 (0) | 2022.10.20 |
| 애드센스 승인 기준, 조건 등에 대한 생각 (3) | 2019.03.07 |
| 티스토리 Poster 스킨 꾸미기 3 (썸네일 이미지 테두리 넣기) (0) | 2019.02.24 |