서근 개발노트

티스토리에 팔로잉

FRONT-END/JAVASCRIPT

[JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법

서근

3년 전

QUOTE THE DAY

“ 프로그래머의 문제점은 일이 너무 늦어질 때까지, 뭘하고 있는지 절대 물어볼 수 없다는 점이다. ”

- 시모어 크레이 (Seymour Cray)

목차 

디스플레이 광고 생성
HTML에 스크립트 추가
- 티스토리 본문 위치
디스플레이 광고 생성
HTML에 스크립트 추가
- 티스토리 본문 위치
CSS 스타일 속성
결과 확인
CSS 스타일 속성
결과 확인

애드센스 광고 2개 삽입하는 방법

애드센스 디스플레이 반응형 광고를
2개 삽입하는 스크립트에 대해 알아보고 적용해보도록 하겠습니다.

디스플레이 광고 생성

우선, 당연히 애드센스 승인된 계정이 필요합니다.

애드센스 홈페이지 ➜ 광고 ➜ 광고 단위 기준 ➜ 디스플레이 광고 ➜ 반응형 광고 생성
이것을 두 번 반복해서 자신의 data-ad-slot와 data-ad-client 아이디를 복사 또는 기억해줍니다.

[JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법 - 디스플레이 광고 생성

data-ad-client는 애드센스 고유 넘버이기 때문에 한 번만 사용하면 되지만, data-ad-slot은 광고를 생성할 때마다 새로운 번호가 생성되기 때문에 두 개를 복사해 두셔야 합니다.

HTML에 스크립트 추가

이제 HTML 내부에 원하는 부분을 정하고 아래 스크립트를 추가해줘야 합니다.

아래 코드를 보면, <div id="ad-top-left"> 자식 클래스의 ins 속성에 data-ad-client 및 data-ad-slot의 넘버를 입력해주시면 됩니다. 그리고 그 줄 끝에 style="width:" 부분도 사용자 웹 크기게 맞게 width 크기를 넣어주면 됩니다. 참고로 width 부분은 CSS 스타일에도 적용되어있기 때문에 굳이 안넣어주셔도 무방합니다.

다음으로, ad-top-right 부분을 보겠습니다.

이곳도 마찬가지로 위와 같이 data-ad-client 및 slot 넘버를 넣어주면 됩니다.

그리고 스크립트를 보면, 웹사이트의 전체 width이 710px가 된다면 ad-top-right 속성을 삭제한다는 의미입니다. 이 부분의 width도 사용자에 맞게 정해줍니다.

html

UNFOLDED

 <div class="top-ads">
  <div id="ad-top-left" class="revenue_unit_item adsense">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle top-left" data-ad-client="ca-pub-00000000" data-ad-slot="0000000000" data-ad-format="rectangle" data-full-width-responsive="true" style="width:316px;"></ins>
    <script>
      try {
        (adsbygoogle = window.adsbygoogle || []).push({});
      } catch (e) {}
    </script>
  </div>
  <div id="ad-top-right" class="revenue_unit_item adsense">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle top-right" data-ad-client="ca-pub-00000000" data-ad-slot="0000000000" data-ad-format="rectangle" data-full-width-responsive="true" style="width:316px;"></ins>
    <script>
      if ($(window).width() < 710) {
        $('#ad-top-right').remove();
      } else {
        try {
          (adsbygoogle = window.adsbygoogle || []).push({});
        } catch (e) {}
      }
    </script>
  </div>
</div>

티스토리 본문 위치

만약, 티스토리에 적용하시려면 본문 상단에 추가하면 좋은데, HTML에서 Ctrl + F로 '



                    
        
        

            


애드센스 광고 2개 삽입하는 방법
애드센스 디스플레이 반응형 광고를
2개 삽입하는 스크립트에 대해 알아보고 적용해보도록 하겠습니다.
디스플레이 광고 생성
우선, 당연히 애드센스 승인된 계정이 필요합니다.

애드센스 홈페이지 ➜ 광고 ➜ 광고 단위 기준 ➜ 디스플레이 광고 ➜ 반응형 광고 생성
이것을 두 번 반복해서 자신의 data-ad-slot와 data-ad-client 아이디를 복사 또는 기억해줍니다.



data-ad-client는 애드센스 고유 넘버이기 때문에 한 번만 사용하면 되지만, data-ad-slot은 광고를 생성할 때마다 새로운 번호가 생성되기 때문에 두 개를 복사해 두셔야 합니다.
HTML에 스크립트 추가
이제 HTML 내부에 원하는 부분을 정하고 아래 스크립트를 추가해줘야 합니다.
 
아래 코드를 보면, <div id="ad-top-left"> 자식 클래스의 ins 속성에 data-ad-client 및 data-ad-slot의 넘버를 입력해주시면 됩니다. 그리고 그 줄 끝에 style="width:" 부분도 사용자 웹 크기게 맞게 width 크기를 넣어주면 됩니다. 참고로 width 부분은 CSS 스타일에도 적용되어있기 때문에 굳이 안넣어주셔도 무방합니다.
 
다음으로, ad-top-right 부분을 보겠습니다.
 
이곳도 마찬가지로 위와 같이 data-ad-client 및 slot 넘버를 넣어주면 됩니다.
 
그리고 스크립트를 보면, 웹사이트의 전체 width이 710px가 된다면 ad-top-right 속성을 삭제한다는 의미입니다. 이 부분의 width도 사용자에 맞게 정해줍니다.
html
UNFOLDED
<div class="top-ads">
  <div id="ad-top-left" class="revenue_unit_item adsense">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle top-left" data-ad-client="ca-pub-00000000" data-ad-slot="0000000000" data-ad-format="rectangle" data-full-width-responsive="true" style="width:316px;"></ins>
    <script>
      try {
        (adsbygoogle = window.adsbygoogle || []).push({});
      } catch (e) {}
    </script>
  </div>
  <div id="ad-top-right" class="revenue_unit_item adsense">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle top-right" data-ad-client="ca-pub-00000000" data-ad-slot="0000000000" data-ad-format="rectangle" data-full-width-responsive="true" style="width:316px;"></ins>
    <script>
      if ($(window).width() < 710) {
        $('#ad-top-right').remove();
      } else {
        try {
          (adsbygoogle = window.adsbygoogle || []).push({});
        } catch (e) {}
      }
    </script>
  </div>
</div>
티스토리 본문 위치
만약, 티스토리에 적용하시려면 본문 상단에 추가하면 좋은데, HTML에서 Ctrl + F로 ''를 검색한 뒤에, 해당 태그 위쪽에 코드를 추가해주면 됩니다.
 
참고로 <s_article_rep> ➜ <s_permalink_article_rep>의 하위 치환자입니다.
html
UNFOLDED
<s_article_rep>
   <s_permalink_article_rep>
     
     <div class="entry-content">
           <!--이쪽에 삽입-->
        [#_article_rep_desc_##]
     
     </div>
      
   </s_permalink_article_rep>
</s_article_rep>
CSS 스타일 속성
CSS에 아래 코드를 그대로 복사하여 붙여 넣어주세요.
css
UNFOLDED
.top-ads {
  margin: 20px 0 20px;
  height: auto !important;
  display:flex;
}
 
#ad-top-left,
#ad-top-right {
    margin: auto;
    overflow: hidden;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
}
 
.adsbygoogle.top-left,
.adsbygoogle.top-right {
    display: block;
    width: 316px;
    height: 280px
}
결과 확인


위 코드를 서식으로 저장해놓고 본문 중간중간 넣어주셔도 됩니다.

오늘은 이렇게 애드센스 디스플레이 반응형 광고를 2개 삽입하는 스크립트에 대해 알아보고 적용해보았습니다.
 
읽어주셔서 감사합니다🤟

'를 검색한 뒤에, 해당 태그 위쪽에 코드를 추가해주면 됩니다.

참고로 <s_article_rep> ➜ <s_permalink_article_rep>의 하위 치환자입니다.

html

UNFOLDED

 <s_article_rep>
   <s_permalink_article_rep>
     
     <div class="entry-content">
           <!--이쪽에 삽입-->
        [#_article_rep_desc_##]
     
     </div>
      
   </s_permalink_article_rep>
</s_article_rep>

CSS 스타일 속성

CSS에 아래 코드를 그대로 복사하여 붙여 넣어주세요.

css

UNFOLDED

 .top-ads {
  margin: 20px 0 20px;
  height: auto !important;
  display:flex;
}
 
#ad-top-left,
#ad-top-right {
    margin: auto;
    overflow: hidden;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
}
 
.adsbygoogle.top-left,
.adsbygoogle.top-right {
    display: block;
    width: 316px;
    height: 280px
}

결과 확인

위 코드를 서식으로 저장해놓고 본문 중간중간 넣어주셔도 됩니다.

오늘은 이렇게 애드센스 디스플레이 반응형 광고를 2개 삽입하는 스크립트에 대해 알아보고 적용해보았습니다.

읽어주셔서 감사합니다🤟

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

이 글이 좋으셨다면 구독 & 좋아요

구독과 좋아요를 눌러주시면 저에게 큰 힘이됩니다.

저작자표시 비영리 변경금지 (새창열림)

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

[JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes (0)	2022.09.12
[JS] 로딩이 될때 요소의 텍스트를 변경하는 방법 (1)	2022.09.11
[JS] 페이지 로딩시 스크롤 막는 방법 (2)	2022.09.10
[JS] 함수 Function (2)	2022.09.08
[JS] 내부링크를 현재 창으로 열도록 해주는 방법 (0)	2022.09.07

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

'FRONT-END/JAVASCRIPT' 카테고리의 관련 포스팅

티스토리 댓글

깃허브 댓글

서근 개발노트 Front-end Developer. 새내기 개발자 입니다.

서근

위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법

애드센스 광고 2개 삽입하는 방법

디스플레이 광고 생성

HTML에 스크립트 추가

티스토리 본문 위치

애드센스 광고 2개 삽입하는 방법

디스플레이 광고 생성

HTML에 스크립트 추가

티스토리 본문 위치

CSS 스타일 속성

결과 확인

CSS 스타일 속성

결과 확인

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<div class="top-ads">
	<div id="ad-top-left" class="revenue_unit_item adsense">
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<ins class="adsbygoogle top-left" data-ad-client="ca-pub-00000000" data-ad-slot="0000000000" data-ad-format="rectangle" data-full-width-responsive="true" style="width:316px;"></ins>
	<script>
	try {
	(adsbygoogle = window.adsbygoogle \|\| []).push({});
	} catch (e) {}
	</script>
	</div>
	<div id="ad-top-right" class="revenue_unit_item adsense">
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<ins class="adsbygoogle top-right" data-ad-client="ca-pub-00000000" data-ad-slot="0000000000" data-ad-format="rectangle" data-full-width-responsive="true" style="width:316px;"></ins>
	<script>
	if ($(window).width() < 710) {
	$('#ad-top-right').remove();
	} else {
	try {
	(adsbygoogle = window.adsbygoogle \|\| []).push({});
	} catch (e) {}
	}
	</script>
	</div>
	</div>

	<s_article_rep>
	<s_permalink_article_rep>

	<div class="entry-content">
	<!--이쪽에 삽입-->
	[#_article_rep_desc_##]

	</div>

	</s_permalink_article_rep>
	</s_article_rep>

	.top-ads {
	margin: 20px 0 20px;
	height: auto !important;
	display:flex;
	}

	#ad-top-left,
	#ad-top-right {
	margin: auto;
	overflow: hidden;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #000;
	}

	.adsbygoogle.top-left,
	.adsbygoogle.top-right {
	display: block;
	width: 316px;
	height: 280px
	}

Sep
일	월	화	수	목	금	토
	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1

[JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법

애드센스 광고 2개 삽입하는 방법

디스플레이 광고 생성

HTML에 스크립트 추가

티스토리 본문 위치

애드센스 광고 2개 삽입하는 방법

디스플레이 광고 생성

HTML에 스크립트 추가

티스토리 본문 위치

CSS 스타일 속성

결과 확인

CSS 스타일 속성

결과 확인

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

[JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes

[JS] 로딩이 될때 요소의 텍스트를 변경하는 방법

[JS] 페이지 로딩시 스크롤 막는 방법

[JS] 함수 Function

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

디스플레이 광고 생성

HTML에 스크립트 추가

티스토리 본문 위치

디스플레이 광고 생성

HTML에 스크립트 추가

티스토리 본문 위치

CSS 스타일 속성

결과 확인

CSS 스타일 속성

결과 확인