IT

티스토리 글목록 사이에 애드센스 인피드 광고 자동 삽입하는 법

이전 부터 글목록 사이 사이에 광고를 넣고 싶었지만, 바쁘다는 핑계로 손을 대지 않고 있었습니다. 사실 글목록의 페이지 뷰 수가 그렇게 많이 나오는 것도 아니어서 큰 신경은 안쓰고 있었습니다. 요즘 잠시 한가한 틈을 타, 블로그 스킨을 조금씩 손을 보고 있는데 그 참에 애드센스 광고도 넣어 보기 위해 칼을 빼 들었습니다. 본 블로그에 테스트를 완료 후, 만족스러워 블로그 메인 화면 또는 카테고리, 검색 시 나타나는 글목록(리스트) 화면에 최근 애드센스에서 공개한 인피드 광고를 삽입하는 법을 소개하도록 합니다.


 

블로그 메인 페이지에서 인피드 광고 예제를 확인 하면 아래 이미지와 같습니다. 아래 처럼 인피드 광고를 삽입하는 법을 소개 할거예요. 아래 링크에서 글목록을 확인가능합니다. 어떤 모습으로 반영이 되는지 확인 해 보셔도 좋을 것 같습니다.

https://blog.hangyeong.com/

 


 

필자는 티스토리 제공 스킨인 #1을 수정한 버전을 이용하고 있습니다. 제가 이용하는 스킨을 기준으로 설명드리겠습니다. 다른 스킨을 이용하는 분들은 방법에는 큰 차이 없기 때문에 원리만 깨우치시면 금방 따라 하실 수 있습니다.

 

티스토리 글목록 사이사이 애드센스 중간 광고를 자동 반복되게 삽입하는 방법 – feat. javascript

http://bigenergy.tistory.com/448

[빅에너지™의 노하우, 정보]

먼저, 포스팅을 하기 앞서 빅에너지™님의 소스 공개에 감사의 말씀을 전합니다. 덕분에 힘들이지 않고 쉽게 글목록에 광고 삽입 작업을 할 수 있었습니다.

 

 

이제 본론 입니다. 먼저 구글 애드센스 웹페이지에서 인피드 광고 소스를 발급 받으세요. 인피드 광고란? 사이트의 글 목록과 자연스럽게 어울리는 광고 형태로 글목록 내용과 이질감이 들지 않도록 광고를 할 수 있는 광고 형태를 말합니다. 다른 광고 코드 발급 받는 법과 크게 다르지 않고 이미 많은 다른 블로거들이 포스팅을 많이 해 놓았기 때문에 소스 발급에 관한 상세한 설명은 생략하도록 하겠습니다.


 

 

소스를 발급 받았으면 아래 내용을 참고해 스킨의 html 파일에서 소스를 삽입해 주면 됩니다.

<head>var i=0;</head>

 

<s_article_rep>
			<div id="mArticle" class="article_skin">
				<s_index_article_rep>
    
            i++; // 최상단 head 태그 부분에 이미 자바스크립트 변수로 var i = 0; 이라고 선언과 초기화를 해놨음.
            if(i == 4 || i == 7) //4번째 글 앞에 광고 표시, 7번째 글 앞 광고표시
            {
                                    //구글 애드센스 광고 스크립트는 원래 한줄로 붙여서 써야하고, 편의상 줄바꿈 한것입니다.
                document.write('<div class="list_content">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
                </script>
                <ins class="adsbygoogle" 
                style="display:block" 
                data-ad-format="fluid" 
                data-ad-layout-key="-XXXXXXXXXXXy" 
                data-ad-client="ca-pub-302953XXXXXXXXXX" 
                data-ad-slot="53XXXXXXXXX"></ins>
                <script>(adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                </div>');
            };
         <div class="list_content">

본문텍스트반응

 

 

위와 같이 소스 삽입이 완료가 되면, 글목록의 네번째와 일곱번째 글목록 앞에 애드센스 인피드 광고가 나타납니다. 반응형이기 때문에 모바일에서도 정상적으로 반영이 됩니다. 매번 인피드 광고가 나타나는 것이 아니라 다양한 광고 형태가 번갈아 가며 보여지니 혹시라도 인피드 광고가 바로 나타나지 않더라도 걱정하지 않아도 됩니다.

 

티스토리 댓글 사이에 자동 삽입되는 애드센스 광고 넣는 법

구글 애드센스, 새 광고 단위: 일치하는 콘텐츠

갑자기 블로그의 방문자가 줄어든다? 그 해결 방법은?

티스토리 본문 상단 Adsense 반응형 광고 플러그인 margin 여백 없애기

티스토리 애드센스 ads.txt 파일 문제 해결, 개인도메인 사용 – google blogger

다음 저품질 블로그 탈출기

Related Posts

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

A4용지에 프린트해 사용하는 무료 탁상달력 웹사이트 a4calendar

A4용지에 프린트해 사용하는 무료 탁상달력 웹사이트 a4calendar

요즘은 달력 구하기가 힘들다. 은행에서 항상 나눠주던 달력이 이제는 그 제작부수를 줄여 선착순 또는 이벤트로 지급하는 방식으로 바뀌면서 달력 구하기가 하늘의 별따기가 되버렸다. 벽걸이 형 달력도 그럴진데, 탁상에…

[CSS] 버튼 디자인 및 생성 사이트 Best Button Generator

[CSS] 버튼 디자인 및 생성 사이트 Best Button Generator https://www.bestcssbuttongenerator.com/ Best CSS Button Generator는 웹사이트 버튼의 CSS 스타일을 쉽고 빠르게 생성할 수 있는 무료 온라인 도구이다 초보자부터 경험…

This Post Has One Comment

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다