카카오 애드핏 kakao AdFit 심사 보류 원인 해결 방법, html 수정

애드핏이 광고 승인이 애드센스보다 쉽다고 하여 당연히 될 줄 알고 시도했다. 그런데 '승인 보류'가 떴다.

이유를 정말 모르겠다. 구글 찾아봐도 딱히 해결방법이 안보였다. 그래서 직접 html을 조작해서 광고가 나오는 영역을 확보해 봤다. 누군가에게 도움이 될까 싶어서 작성해 본다.

 

 

kakao-adfit-심사보류

 

카카오 애드핏 심사 보류

나의 보류 메시지는 이거였다.

"광고 영역에 AdFit 광고가 아닌 'kakao AdFit' 문구가 확인되어 보류되었습니다. 발급받은 스크립트 코드 또는 플러그인 확인 후 재심사를 요청하여 주시기 바랍니다."

 

 

티스토리블로그설정 > kakaoAdFit-광고연동

 

 

처음에는 뭔 소리인가 했다. 처음엔 플러그인에 들어가 카카오 애드핏 플러그인이 있는지 찾아보고, 발급받은 스크립트 같은 게 없는데 뭘 어쩌라는 건지. 광고영역에 kakao AdFit 문구가 보여서 안된다니? 심사 완료되면 이 부분에 광고가 보이는 게 아니었나? 너무 불친절한 설명에 결국 구글링을 했다.

찾아보니 이 부분에 kakao AdFit이 아니고, 광고 이미지가 보여야 했다. 나는 직접 html 페이지를 수정해서 고쳐보기로 했다.

 

 

 

 

개발자 도구 사용해서 html 수정해 보기

 

우선 내 티스토리 페이지에서 어느 부분이 어떻게 잘렸고, 어떻게 고쳐야 할지 살펴봐야 한다.

내 티스토리의 광고가 노출하는 페이지에 가서 F12를 눌러 개발자도구를 켜자.

 

일단 우리의 광고는 웹페이지와 모바일 웹 (스마트폰)에서 둘 다 노출해야 하기 때문에 둘 다 광고가 노출하도록 페이지를 수정해야 한다.

 

---

모바일 웹 페이지 수정해 보기

일단 모바일 웹 페이지부터 수정할 것이다.

 

모바일 애뮬레이터 사용

위 버튼을 눌러서 모바일 애뮬레이터를 켜자. 그러면 광고 영역에 무슨 그림이 나온다. 그런데 그림이 조금 잘린 것 같다. 이 그림이 완전히 나오게 웹페이지를 수정해주어야 한다.

 

html selector

 

바로 옆에 있는 화살표버튼을 누른 다음, 마우스로 광고 영역을 클릭해 본다.

 

광고 영역 이미지

 

그러면 이렇게 파란 영역이 잡히고, 이 요소가 html에서 어디에 위치하는지 알려준다. 그림이 파란색 영역보다 작다는 건 광고의 오른쪽이 웹페이지의 어떤 요소 때문에 가려졌다는 뜻이다. 이 부분이 나오도록 바꿔주어야 한다.

 

광고의 가로 영역이 가려졌으므로 웹 페이지 양쪽에 있는 padding 값을 찾아서 변경해주어야 한다.

자, 다시 아까 화살표 버튼을 눌러서 웹페이지 양쪽 끝 중 한 곳을 눌러보자.

 

padding값-변경

 

그럼 이렇게 초록색 영역이 영역이 잡힌다. 좌측 화면의 초록색은 우측 하단의 그림에서 초록색 영역을 뜻한다.

article에 있는 padding 값을 바꿔주면 좌우가 넓어질 것 같다.

 

padding : 30px 30px 85px 는 값이 상 30px, 좌우 30px , 하 85px 라는 의미이다. 나는 중간에 있는 좌우 값을 40px에서 30px로 바꿔주었다. (광고 그림이 완전히 나올 때까지 점점 값을 작게 바꿔준다.)

 

html/css 코드에 마우스를 가져다 대기만 해도 페이지의 어느 부분 인지 보여준다. 어렵다면 아래의 gif를 보고 한번 따라 해 보자. 

padding값-변경

 

 

이제 모바일에는 광고 그림이 완전히 나왔다.

 

 

 

---

PC 웹 페이지 수정해 보기

다음에는 모바일페이지 말고, 원래 PC 웹페이지에도 광고가 나오도록 해야 한다.

 

모바일 애뮬레이터

아까 눌렀던 모바일 애뮬레이터 버튼을 다시 눌러서 웹 페이지가 나오도록 한다. 페이지는 새로고침 해주어야 웹 페이지가 화면이 나타난다.

 

 

 

아직도 kakao AdFit 노출하는 블로그

 

 

으악, 웹 페이지에는 아직도 kakao AdFit 글씨가 노출한다. 그럼 다시 신청해 봐야 승인보류가 된다는 것이다.

아까와 같이 개발자도구의 화살표 버튼을 눌러서 광고가 가려질 만한 부분의 코드를 찾아보고, 광고 영역이 충분히 노출할 수 있도록 html요소를 수정해 준다.

 

아까는 웹페이지 양쪽(바깥쪽)의 좌우 padding 값을 수정해 주었으니, 이번에는 광고의 상하 높이를 넓혀보자. 마우스를 코드 위에 가져다 대며 광고의 높이를 바꿀 수 있을 것 같은 요소를 찾는다. 나는 div 태그의 상단 margin 값이 10px나 되어 있어서 의심스러웠다. 그 부분을 1px로 변경해 줄 것이다. 아래 gif처럼 변경할 수 있다.

 

 

 

div margin

---

 

변경사항 티스토리에 적용하기

우리는 지금까지 개발자도구로 변경해 보았다. 그런데 개발자도구에서 변경한 것은 실제 블로그에 반영되지 않는다. 일종의 시뮬레이션 같은 것이다. 그러므로 실제로 티스토리 블로그에 반영해주어야 한다.

 

우리가 변경할 부분은 두 가지이다. 

1. article 영역의 padding 좌우 값을 30px로 바꿔줄 것이다.

2. div 태그의 margin 상단 값을 1px로 바꿔줄 것이다.

 

---

자, 바꿔보자.

티스토리 관리자 > 스킨변경 > html 편집으로 들어가서 CSS 탭을 누른다.

 

Css 탭 클릭

 

 

CSS 코드 부분에 커서를 두고, ctrl+F를 누른다. 그리고 'alticle'을 검색한다. 그럼 아래처럼 해당 부분이 나온다. 여기에서 padding 좌우 값을 30px로 바꾼다.

 

css-검색

 

 

그다음에는 'div'를 검색해서 똑같이 margin값을 1px로 바꿔주고, '적용' 버튼을 눌러서 적용한다.

 

 

css-검색

 

 

짠! 그러면 이제 웹페이지에서도 광고 그림이 나타난다!

 

 

광고 그림이 나오는 블로그

 

 

이제 신나게 다시 연동 재심사 신청을 해보자 🌱