구글 애드센스 HTML 스크립트 코드 구조 (client 및 slot 값의 개념 이해)

많은 티스토리 사용자가 있고, 티스토리에는 애드센스 광고를 게시할 수 있습니다. 티스토리를 열심히 가꾸어 구글 애드센스 신청을 하게 되고, 콘텐츠의 품질과 방문자 유입에 따라서 승인 유무가 달라집니다. 결국에는 승인을 받게 되고 그때부터 본격적인 애드센스 광고를 게시할 수 있습니다.

개인적으로 기본기를 엄청 중요하게 생각합니다. 뭐든 기본을 알아야 응용 할 수 있습니다. 따라서 기본기를 모른다면 그 응용 방법 또한 모르게 됩니다. 또한 기본 개념을 알아야 다른 방식의 설명을 이해할 확률이 높아집니다. 그러므로 기본기를 충분히 다지는게 중요합니다. 본문에서는 애드센스의 HTML 코드 구현 방식의 아주 기본적인 부분을 설명하려고 합니다. 그 중에서도 애드센스 스크립트(Script) 코드와 클라이언트(Client) 값, 마지막으로 슬롯(Slot) 값에 대해 알아봅시다.

애드센스 승인 스크립트

스크립트 코드로 이루어진 이것은 애드센스 승인 뿐만 아니라 승인 이후 자동 광고 노출에 대해서 제어할 수 있는 코드 입니다. 티스토리 HTML 스킨의 <head> 안쪽에 삽입만 해두면 됩니다.

코드는 이렇게 구성되어 있습니다. 보시면 노란색으로 표시된 부분이 바로 client 값 입니다. 보통 이것을 매개변수라고 이야기 하는데, 본문의 내용은 애드센스에 국한된 설명이니까 부르기 편하고 이해하기가 쉽도록 매개변수 이름을 따서 클라이언트 값 혹은 코드라고 할 것 입니다. 풀네임은 data-ad-client 입니다.

애드센스 광고 스크립트

이제 애드센스 광고 스크립트 코드를 살펴보도록 합시다. 참고로 친효스킨에는 대략 7개의 애드센스 광고를 기본 배치할 수 있습니다. 스킨의 최상단 그리고 최하단 이렇게 두개, 본문의 상단 2개와 하단 1개 이렇게 총 세개, 마지막으로 사이드바 1개를 배치할 수 있습니다. 총 6개 맞죠? 그렇습니다. 여기에 마지막 광고 형태인 인피드 광고를 메인화면에 삽입할 수 있습니다. 이렇게 모두 7개의 애드센스를 배치 가능합니다. 따라서 애드센스 광고 스크립트 코드는 최초 승인 이후 총 7개를 만들어 배치하면 되는 것 입니다. 이렇게해서 생성한 애드센스 코드가 아래에 있습니다.

<ins class="adsbygoogle"

style="display:block"

data-ad-format="fluid"

data-ad-layout-key="-g5+6+3-fk+vw"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="9876543210"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="1234567890"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="2345678901"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="3456789012"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="4567890123"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="5678901234"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567890123456"

data-ad-slot="6789012345"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

각 애드센스의 코드는 주석으로 코멘트를 달아놨습니다. 어떤 위치에 사용될 애드센스인지 구별이 되시나요? 주석은 회색으로 처리된 부분의 코드를 말합니다. 여기에서 딱 하나 설명이 부족했던 부분이 있는데 인피드 광고는 기존 애드센스의 디스플레이 광고 형태와 하나 다른점이 있습니다. 바로 레이아웃키라고 하는 매개변수가 사용되었다는 것 입니다. 지금 인피드 광고 코드 중 주황색으로 표시된 부분 입니다. data-ad-layout-key 부분 입니다. 찾으셨나요?

인피드광고는 사이트마다, 티스토리마다 저마다 다른 스킨을 사용하기 때문에 보여지는 형태 또한 다양해야 합니다. 즉 사용하고자 하는 티스토리의 스킨 스타일에 맞춰서 적용되어야 합니다. 이를 인피드 광고 생성시에 사용자가 자신의 스킨에 맞게 변경을 해야 하는데 그 환경 설정 값이 바로 레이아웃키에 저장 됩니다. 그 저장코드값이 바로 주황색으로 표시된 부분인 것 입니다. 즉 친효스킨의 인피드 광고 레이아웃키 값은 -g5+6+3-fk+vw 이라는 것을 알 수 있습니다.

클라이언트 (data-ad-client) 값

위의 애드센스 스크립트 코드들을 살펴보시면 노란색으로 표시된 부분이 바로 클라이언트 값이라는건 앞서 설명드렸습니다. 그런데 7개의 애드센스 코드를 살펴보니 공통점이 보입니다. 뭐가 보이시나요? 그렇습니다. 클라이언트값이 모두 똑같습니다. 바로 이것입니다. 애드센스 광고 코드를 100개, 1000개, 만개를 만들어도 이 클라이언트값은 불변합니다. 변하지 않는다는 소리입니다. data-ad-client 이 값은 자신의 애드센스 ID값이라고 생각하시면 됩니다. 회원가입 할 때 아이디를 한 번 정하면 못 바꾸죠? 탈퇴 후 재가입 하지 않는 한 말입니다. 마찬가지 입니다. 구글 애드센스도 승인이 되는 순간 여러분들의 클라이언트값이 정해지는 것 입니다. 이 점을 꼭 기억해 주세요.

차후에 애드센스에 문의를 넣을 때도 필요한게 바로 이 클라이언트 값 입니다. 또한 친효스킨 2.0에서도 클라이언트 값을 입력하는 칸이 있는데, 그곳에 자신의 클라이언트값을 한 번만 입력해 두시면 되는 것 입니다. 왜 한 번만 입력하는지 방금 설명 드렸으니까 이해하시겠죠? 클라이언트값은 ca-pub-숫자 형태로 이루어져 있으며 뒤의 숫자만 애드센스 사용자마다 다릅니다.

슬롯 (data-ad-slot) 값

이번에는 파란색으로 표시된 부분을 살펴봅시다. 보니까 각 애드센스 코드마다 숫자가 다릅니다. 즉 슬롯값은 해당 애드센스 광고의 고유 번호라고 생각하면 됩니다. 슬롯값은 애드센스 광고를 새롭게 만들 때 마다 랜덤으로 할당받게 됩니다. 절대로 중복이 될 수 없으며 이것은 타인과도 절대 겹치지 않습니다. 그렇기 때문에 정확한 통계 파악이 가능합니다.

예를 들어서 위의 예시에서는 상단1과 상단2의 슬롯값이 각각 3456789012 그리고 4567890123 입니다. 그렇죠? 이 두개의 애드센스 코드를 본문 상단의 PC 해상도에서 두 개가 모두 노출 되도록 설정했다고 가정합시다. 이런 경우 차후에 통계를 살펴볼 때 PC해상도에서 본문 상단의 애드센스 클릭율이 어떤 부분이 더 좋은지를 쉽게 파악할 수 있는 것 입니다. 상단1과 상단2의 광고 둘 다 따로 따로 살펴볼 수 있으니까요. 이 말은 슬롯값이 둘 다 다르기 때문에 따로 집계가 된다는 이야기입니다.

참고로 해당 애드센스의 통계를 살펴보는 방법은 애드센스 로그인 후 광고 목록의 오른쪽에 있는 보고서 아이콘을 누르면 됩니다. 광고 > 개요 > 광고단위 기준으로 들어가시면 됩니다.

만약 PC해상도에서 상단 광고 2개에 대하여 같은 슬롯값을 사용했다면 어떻게 될까요? 즉 본문 상단 광고 애드센스 코드를 하나만 만든 겁니다. 따라서 슬롯번호도 하나입니다. 이 하나의 애드센스 코드를 본문 상단에 두 번 넣은 상황 입니다. 이렇게 한다고해서 애드센스 정책 위반이 되거나 두 개의 애드센스가 늘 같은 광고가 나오거나 하지는 않습니다. 솔직히 아무 문제 없습니다. 단지 통계를 정확하게 볼 수 없을 뿐 입니다. 즉 같은 슬롯값의 애드센스가 본문 상단에 두 개가 들어간 상태이니 왼쪽이 더 클릭율이 좋은지? 아니면 오른쪽이 더 좋은지를 알 수 없습니다. 상단 두개의 애드센스는 결국 하나의 슬롯값이고 왼쪽을 클릭하나 오른쪽을 클릭하나 슬롯값이 같으므로 왼쪽을 클릭해도 오른쪽 광고의 카운트도 같이 집계가 되는거죠. 같은 슬롯번호니까요.

예시에서 총 7개의 일반 디스플레이 광고를 만든 이유는 바로 통계 때문 입니다. 각 위치별로 정확한 집계를 위해 각각 애드센스 코드를 따로 만든겁니다. 그래야 어떤 위치의 애드센스가 더 클릭율이 좋고 더 수익이 좋은지를 금새 파악할 수 있기 때문입니다. 막말로 예시대로 하지 않고 그냥 애드센스 코드 두 개만 만들어 써도 됩니다. 인피드 광고 코드 하나와 일반 디스플레이 광고 코드 하나만 만들면 될 겁니다. 그래서 디스플레이 애드센스를 최상단 및 최하단, 본문 상단 두 개, 하단 한 개, 사이드바에 이렇게 총 6번 삽입해서 써도 됩니다. 그래도 애드센스 광고 노출에 전혀 지장이 없습니다. 정책 위반도 아닙니다. 솔직히 애드센스 광고 생성 개수가 적기 때문에 관리는 편할겁니다. 단지 정확한 통계를 파악할 수 없다는 단점만 존재합니다. 이제 이해하셨나요?

마무리

애드센스 광고 코드에서의 클라이언트값과 슬롯값을 대략적으로 설명드렸습니다. 애드센스 광고 코드에 대해서 잘 모르셨다면 이번 기회를 통해 좀 더 정확한 개념 및 원리를 이해하는 시간이 되었으면 좋겠습니다. 아울러 친효스킨 2.0 사용에 있어서도 이 클라이언트와 슬롯값을 정확히 알고 있어야 응용할 수 있기 때문에 알아두시면 좋습니다. 끝.