본문 바로가기
블로그&애드센스

티스토리 애드 센스 자체 광고보다 내 광고를 위로 올리는 방법 - 수익 원복

by meddy 2023. 8. 29.

티스토리의 애드 센스 자체 광고보다 내 애드 센스 광고를 위로 올리려면 h1 태그 바로 아래에 내 광고를 자동으로 달면 됩니다. 따라하셔서 잃어버린 수익 다시 찾아오시기 바랍니다. 

티스토리 애드 센스 자체 광고보다 내 광고를 위로 올리는 방법 썸네일

티스토리 애드 센스 광고보다 내 광고 위로 올리기

먼저 결론부터 설명드리면 스킨편집에 들어가서 html 편집에서 h1 태그를 찾아서 그 바로 아래에 넣어 두시면 됩니다.

지금 이 글 젤 위에 달려있는 것이 제 광고입니다.

참고로 구글 애드 센스 광고만 하시는 분들은 티스토리의 "수익"은 사용하지 마시기 바랍니다. 광고도 빠르게 나타나지 않고 지금 하는 작업에 영향을 줄 수 있습니다. 

그럼, 지금부터 내 애드 센스 광고를 위로 올려보도록 하겠습니다.

먼저 티스토리 관리자 페이지로 갑니다. 여기서 왼쪽 하단 부근에 스킨편집을 누릅니다. 

티스토리 관리자 페이지의 스킨편집

그러면 아래와 같은 화면이 나오는데 여기서 "html 편집"을 누릅니다. 

티스토리 스킨편집 화면에서 "html 편집" 찾는 법

이제 다음과 같이 내 티스토리 블로그의 html이 나타납니다. 여기에서 ctrl-f (컨트롤 F)를 눌러서 "<h1"을 검색합니다. 이렇게 검색을 하면 스킨마다 조금씩 다르게 나타나는데 Poster(포스터) 스킨의 경우 7개가 나타납니다. 

 

이제 어떤 h1 태그가 내 본문 나오기 바로 전의 h1 태그인지 찾아야 합니다. 

포스터 스킨의 경우 6번째 h1 태그가 내 본문 위에 나타나는 h1 태그입니다. 

이제 이 h1 태그 아래에 넣으면 됩니다. 이 html을 좀 더 설명 드리면

티스토리 본문 대체자

의 경우 티스토리에서 내 게시글의 제목을 대체하는 내용입니다. 물론 h1 태그를 찾지 말고 이걸 검색하셔서 하셔도 됩니다만, 이 값도 여러개 있고 혹시라도 티스토리 측에서 변경을 할 수 있기 때문에 h1 태그로 검색하였습니다. 

다음으로

티스토리 본문 대체자

이 내가 작성한 글의 html이 들어가는 위치입니다. 그렇기 때문에 이 사이에 내 구글 애드 센스 광고 코드를 넣으면 티스토리에서 본문 최상단에 넣은 광고 코드보다 위에 나타납니다. 

이런 ##이 붙은 것들을 치환자라고 하는데, 이것들도 여러개가 나타나기 때문에 위와 같이 잘 찾으셔야 합니다. 

 

많이 사용하시는 북클럽의 경우 동일하게 아래와 같이 h1 태그를 찾으실 수 있습니다. 

저의 경우 다음과 같이 넣었습니다. 

 

구글 애드 센스 광고 사이즈 조절하는 방법

구글 애드 센스 광고를 넣었는데, 보기에 좀 안 이쁘다라고 생각하시는 분들은 다음과 같이 사이즈를 조절해서 이쁘게 만들 수 있습니다. 티스토리 측에서 자동으로 송출하는 광고는 사이즈를 조절해서 이쁘게 만든 것입니다. 

우리도 티스토리에서 한 것처럼 아래와 같이 수정해서 조금 이쁘게 만들수 있습니다. 

아래 설명은 구글 애드 센스 광고 크기 조절 설명을 구글에서 가져온 것입니다. 

  1. 애드센스 계정에서 디스플레이 광고 단위를 만들고 '광고 크기' 섹션에서 반응형을 선택한 채로 둡니다. 반응형 광고 코드에서 다음 정보를 따로 기록해 둡니다.
    • 내 게시자 ID, 예: ca-pub-1234567890123456
    • 내 광고 단위의 ID(data-ad-slot), 예: 1234567890
  2. 샘플 코드에서 다음과 같이 수정합니다.
    • 모든 example_responsive_1 인스턴스를 고유한 이름(예: Home_Page, front_page_123)으로 바꿉니다.
      참고:
      • 고유한 이름은 영문자(A~Z), 숫자, 밑줄만으로 구성되어야 하며, 영문자로 시작해야 합니다.
      • 이 샘플 코드를 수정할 때마다 각기 다른 고유한 이름을 사용해야 합니다.
    • 모든 ca-pub-1234567890123456을 내 게시자 ID로 바꿉니다.
    • 8XXXXX1을 내 광고 단위의 ID로 바꿉니다.
 
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src=" https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456 " crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

위의 코드를 복사하신 후 광고 코드인 data-ad-client를 내 pub 아이디로 변경하시고 data-ad-slot의 slot 번호를 내가 생성한 디스플레이 광고로 바꾸시면 광고 코드의 사이즈가 줄어듭니다. 

크기 조절은 <style>의 width와 height를 수정하여 하실 수 있습니다. 

 

애드 센스 광고 수정 후 적용 확인하기

이렇게 광고를 다 넣으셨으면 내 티스토리 게시글 페이지로 가셔서 확인을 해보시면 됩니다. 

아무 페이지나 가셔서 크롬에서 F12를 누르면 우측에 디버깅 창이 나타납니다. 

디버깅창 Elements 누르기

띄우시고 상단에 Elements 탭을 누르면 코드가 나타납니다.

ctrl-f를 누르면 하단에 검색 창이 나타나는데 <h1 태그를 찾으셔도 되고 아니면 내 pub 코드를 찾아도 됩니다. 

중간 쯤 이미지에 보이는 부분에서 <h1을 찾으시면 h1 태그가 나옵니다. 실제 생성된 페이지에서 h1 태그는 1개 혹은 2개만 나타납니다. 

그 아래에 있는 pub 코드가 내 것인지 확인하시면 됩니다. 

 

naver band kakaoTalk kakaostory shareLink facebook twitter