의외로 간단한 북클럽 스킨 인피드광고삽입 괜히 삽질했다

인피드 광고 삽입 이전 글에 이어 2번째 입니다.

애드센스 광고 에서 피드와 피드사이에 마치 피드인것처럼 쏙 들어가있는 광고 보신적 있으시죠? 그게 인피드 광고인데요~

막상 시키는데로 따라했더니 되더라구요. 북클럽스킨 기준입니다.

 

 

인피드광고의 예시화면

아무튼 이 광고를 넣으려고 시도했다가 제데로된 정보를 얻지 못해서 엄청나게 헤매고 마침내 인피드 광고를 다는데 성공해서요. 간단히 인피드 광고 삽입하는 방법을 공유해 드립니다.

 

 

반응형

 

의외로 간단한 북클럽 스킨 인피드광고삽입

총 세가지만 하면 간단히 할수 있어요.

 

1. 애드센스 홈페이지에 가서 수동으로 광고코드를 만들어 옵니다.

2. 1번째 광고코드를 스킨편집에 들어가 헤드부분에 삽입합니다.

3. 2번째 광고코드를 스킨편집의 </s_index_article_rep> 부분에 삽입해줍니다.

 

---

주의> 스킨편집하시기 전에 불안하신 분들은

스킨변경에 가셔서 지금사용하고있는 스킨 보관하기를 눌러서 저장해 주세요.

수정하는 중간에도 잘못되었을때는 컨트롤제트 로 되돌리기가 가능하니 너무 걱정하지 마세요!

 

 

시작합니다.

애드센스 인피드 광고 북클럽스킨 적용하기

 

애드센스에 들어가서 광고코드를 만들어줍니다.

• 광고단위기준 -> 인피드광고를 선택

---

---

 

광고스타일 만들기에서 

시스템에서 추천하는 스타일 과 광고스타일 직접 만들기가 있습니다.

추천하는 스타일 만들기에서 혹시 페이지 읽기가 안되는 분들은 수동형으로 만들면 되니까 당황하지 않으셔도 되구요.

(저의경우 계속 페이지 읽기가 안되서 엄청 당황했습니다)

아무튼 안되는 분들은 수동으로 만들기를 하시면 됩니다.

 

• 광고스타일만들기에서 직접만들기 -> 측면이미지 만들기 선택

 

 

• 사용할 인피드 광고 단위에 이름넣어주기(나중에 변경 가능하니 알아볼수 있게 넣어주세요)

 

• 수동광고의 옵션을 설정해 볼게요.

-경계선이나 배경색등은 취향에 맞게 선택하셔도 무방하구요.

패딩값은 10-10-10-10 으로 설정해 주세요.

(광고 상자 내부 여백 설정하는 내용입니다)

 

 

-이미지 정렬은 북클럽 사용자 기준으로 오른쪽 정렬

이미지 비율은 1:1

너비120 단위는 px(픽셀)

(혹시 티스토리에서 썸네일 이미지 사이즈를 바꾸셨다면 적절하게 수정해주시기를 권장합니다.

일단은 120으로 ~)

이미지 패딩값(여백) 0-0-0-15 로 설정해 주세요.

 

 

-제목옵션 설정

글자크기 17, 색상 이나 글자 굵기는 원하시는데로 설정

패딩값 10-0-0-0 설정

 

 

-내역옵션

글자크기 13 색상등 원하시는데로 설정

패딩값 20-0-0-0

 

 

-url옵션

글자크기 13 색상등 마음에 드시는 것으로 설정해주시면 됩니다.

 

-버튼옵션

마음에 드는 색상으로 선택하세요.

 

-저장및 코드 생성하기

생성된 코드를 메모장등에 복사 붙여넣기 해서 보관해 주세요.

 

---

---

• 인피드 광고 코드를 헤드와 바디에 넣어주기

여기서 부터 조금 헷갈리실수 있는데요

광고 코드를 가져가셔서 한글로 수정하라고 되어있는 부분에 아까 생성한 코드에서 값을 가져와 붙여넣어 줍니다.

메모장 캡처화면 모습

바로 "이부분에 갖다붙이세요" 라는 부분입니다.

 

드래그 복사가 안되실테니 편하게 복사해서 사용하시라고 태그를 메모장으로 공유해드릴게요.

인피드광고렛미노마드.txt

0.00MB

메모장 내용을 살펴보면

처음 헤드에 넣는 코드는 아래와 같습니다.

 

경로는 스킨편집->html 로 가시면 됩니다.

 

<!-- 헤드 인피드광고 삽입 시작-->
<script>
    var chInfeed = 0;
    var chInfeedAdSenseShow = 0; // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
    var chInfeedAdSenseInsert = 3; // 인피드광고 적용 개수
    var chInfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="이부분에 갖다붙이세요" data-ad-client="ca-pub-이부분에 갖다붙이세요" data-ad-slot="이부분에 갖다붙이세요"></ins>';
</script>
    <!-- 헤드 인피드광고 삽입 끝-->

 

여기서 이부분에 갖다붙이세요 라고 적힌부분에 아까 메모장에 저장해둔 코드에 있는 내용으로 바꿔서 넣어주시면 되는거에요. 그 부분이 나의 광고 코드거든요. 그부분이 잘못되면 광고가 안나와요.

 

 

 

 

2. 두번째넣을코드

마찬가지로 아까 html 수정하신곳에서 찾기 컨트롤+F를 누르시고

</s_index_article_rep> 찾으면 총 2개가 나와요.
2번째로 검색된 코드의 아래에 밑에 코드를 그대로 넣어주세요.

인피드 광고 삽입하고 있는 모습 캡처화면

 <!-- 인덱스 페이지 인피드 광고 삽입 시작 -->
<script>
    if (chInfeedAdSenseShow == 0) {
        chInfeed++;
        if (chInfeed % chInfeedAdSenseInsert == 0) {
            document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
            document.write(chInfeedAdSense);
            (adsbygoogle = window.adsbygoogle || []).push({});
document.write("<hr style='padding: 0; margin: 0; height: 1px; border: 0 none; color: #f5f5f5; background-color: #f5f5f5;'>");
        }
    }
</script>
 <!-- 인덱스 페이지 인피드 광고 삽입 끝 -->

---

---

• 이제 적용하기를 눌러줍니다.

 

인피드광고가 적용된 모습 캡처화면

이렇게 리스트사이에 공백이 보인다면 잘 적용된 거에요!

따라하신다고 고생하셨어요. 티스토리 북클럽스킨에서 인피드 광고 삽입하기 별거 아니죠? :)

 

 

 

 

 

감사합니다.