[애드센스] 1.구글 디스플레이 광고 코드 한 줄씩 분석

디스플레이 광고

블로그 초보자들은 기존에 블로그 운영노하우를 보며 방법을 따라 합니다.
정말 감사한 일입니다. 그런데 전 감사하면서도 답답했습니다.

"이게 왜 이렇게 되는 거지?"

따라 하다가 오류 뜨면 답이 없습니다.
그러면 지우고 다른 방법을 찾아 적용하고.
또 오류 나면 다른 방법...

진짜. 화병 나기 딱 좋더라고요.
그래서 그냥 광고를 하나씩, 한 줄씩 분석하려고요.^^;;

애드센스 개별(디스플레이) 광고 코드 분석

<script
	async 
	src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?
	client=ca-pub-숫자숫자숫자"
	crossorigin="anonymous">
</script>
<!-- 광고 이름 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-숫자숫자숫자"
     data-ad-slot="숫자숫자숫자"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

간단하게 소개하자면 구글 애드센스 디스플에이 광고 코드입니다. 스크립트(1번) - html(1번) - 스크립트(2번)로 구성되어 있습니다.

첫 번째 스크립트

<script
	async 
	src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?
	client=ca-pub-숫자숫자숫자"
	crossorigin="anonymous">
</script>

1-1 속성 - `async`
설명 : 스크립트 코드를 비동기적으로 불러옵니다. 이렇게 하면 웹 페이지의 로딩 속도가 느려지는 것을 방지할 수 있습니다. (동기/비동기가 궁금하시다면 아래 링크에서 질문 5번 6번 보시면 됩니다.)

웹 페이지 속도 향상: 기술 SEO 가이드

웹 페이지 속도 향상: 기술 SEO 가이드 초보자를 위한 가이드

1-2 속성 - `src`
속성값 : [https://pagead2.googl....gle.js?">https://pagead2.googl....gle.js?] 에서는 구글 애드센스에서 제공하는 스크립트 파일의 URL을 지정되어 있습니다.

1-3 속성 - `client`
속성값 : ca-pub-숫자숫자숫자 에서는 애드센스 계정 ID를 지정합니다.

1-4 속성 - `crossorigin`
설명 : 속성값은 해당 파일을 다른 도메인에서 불러올 때, CORS (Cross-Origin Resource Sharing) 정책을 적용하기 위해 사용됩니다.
속성값 - `anonymous` 값을 사용하면 익명으로 접근하므로 보안에 더 안전합니다.

두 번째 html

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-숫자숫자숫자"
     data-ad-slot="숫자숫자숫자"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

2-1 속성 - `class`
속성값 : `adsbygoogle`을 지정하여 광고를 삽입하는데 필요한 기능을 로드할 수 있습니다.

2-2 속성 - `style`
설명 : 속성값으로는 광고의 스타일을 지정할 수 있습니다.
속성값 : `display:block`을 사용하여 광고를 블록 요소로 지정합니다.

2-3 속성 - `data-ad-client`
속성값 : 애드센스 계정 ID를 지정하고

2-4 속성 - `data-ad-slot`
속성값 : 광고 슬롯 ID를 지정합니다. 애드센스 계정에서 생성된 광고 유닛의 ID입니다.

2-5 속성 - `data-ad-format`
설명 : 광고의 형식을 지정합니다.
속성값 : `auto` 구글 애드센스가 적절한 광고 형식을 선택하도록 합니다.

2-6 속성 - `data-full-width-responsive`
속성값 : `true`로 설정하여 광고의 크기를 자동으로 조정하는 옵션을 활성화합니다.

세 번째 스크립트

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

3-1 코드설명 `adsbygoogle` 변수를 초기화하고, `push()` 함수를 호출하여 광고를 로드

3-2 객체 `window.adsbygoogle`
설명 : 애드센스 광고 코드를 로드할 때 자동으로 생성되는 객체

3-3 연산자 `||`
설명 : `window.adsbygoogle` 객체가 정의되지 않았을 때를 대비하여 `adsbygoogle` 변수를 초기화합니다. 광고 코드를 로드하기 전에 `window.adsbygoogle` 객체를 미리 확인하고, 없는 경우에도 광고를 로드할 수 있습니다.