웹 구현

참고: 차단 수가 얼마나 많아도 페이지당 하나의 광고 요청만 할 수 있습니다.

중요: 코드를 사용하기 전에 이용약관을 읽어 보세요.

이 코드를 사용하려면 애드센스 맞춤 검색 광고를 사용할 수 있는 활성 권한이 있는 애드센스 계정이 있어야 합니다.

개요

사이트에 애드센스 맞춤 검색 광고를 구현하려면 다음 3단계를 따르세요.

1단계: AdSense에서 검색 광고 맞춤 스타일 만들기

로그인한 후 검색용 광고를 펼친 다음 검색 형식을 클릭합니다. 여기에서 새 스타일을 만들거나 기존 스타일을 업데이트할 수 있습니다.

2단계: 코드 구성하기

코드 가져오기 Embed를 클릭합니다. 광고 컨테이너가 검색 페이지의 광고 컨테이너와 일치하도록 구성합니다.

3단계: 코드 구현하기

코드 생성기에서 코드를 복사하여 페이지에 붙여넣습니다. query 매개변수를 업데이트해야 합니다. 헤드 태그에서 생성된 코드를 사이트의 헤드 태그에 배치해야 광고가 올바르게 로드됩니다. 광고 단위 1의 코드에는 페이지의 모든 광고 단위에 대한 설정이 포함됩니다. 추가 광고 단위를 사용하려면 광고가 게재되어야 하는 페이지에 해당 광고 단위 <div>만 배치하면 됩니다.

가장 일반적으로 사용되는 기능은 코드 생성기에 제공되지만 일부 추가 매개변수는 참조 섹션에서 확인할 수 있습니다. 참조 섹션에는 페이지의 모든 광고 단위에 적용되는 모든 페이지 수준 옵션과 개별 광고 단위에 적용되는 모든 단위 수준 옵션이 포함되어 있습니다.

샘플 코드

비동기 광고 로드

생성된 코드는 비동기식입니다. 다음은 실제로 작동하는 비동기 광고 로드의 전체 예시입니다. 이 예시를 새 탭에서 열 수 있습니다. 자신의 클라이언트 ID를 입력해야 합니다.

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<div id="afscontainer1"></div>
<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId' : 'test client ID', // Enter your own client-ID here
  'query' : 'flowers', // User query for this page
  'styleId': '7824176615' // Enter your own style ID here
};

var adblock1 = {
  'container' : 'afscontainer1',
  'width' : 700
};

var adblock2 = {
  'container' : 'afscontainer2',
  'width' : 700
};

_googCsa('ads', pageOptions, adblock1, adblock2);
</script>

<p>Search result 1</p>
<p>Search result 2</p>
<p>Search result 3</p>

<div id="afscontainer2"></div>
</body>
</html>

Google 검색의 관련 검색어는 현재 검색어와 관련된 검색어가 포함된 자연 단위입니다. 이 단위의 링크는 새로운 검색결과 페이지로 연결됩니다.

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<div id="afscontainer1"></div>
<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId': 'test client ID', // Enter your own client-ID here
  'query': 'flowers', // User query for this page
  'styleId': '1234567890', // Enter your own style ID here
  'resultsPageBaseUrl': '//www.example.com/search', // Enter your own base URL here
  'resultsPageQueryParam': 'query' // Enter your own query parameter here
};

var adblock = {
  'container': 'afscontainer1',
  'number': 3,
  'width': 700
};

var rsblock = {
  'container': 'afscontainer2',
  'relatedSearches': 6,
  'width': 500
};

_googCsa('ads', pageOptions, adblock, rsblock);
</script>

<p>Search result 1</p>
<p>Search result 2</p>
<p>Search result 3</p>

<div id="afscontainer2"></div>
</body>
</html>

콘텐츠의 관련 검색어는 사용자에게 페이지의 콘텐츠와 관련된 검색어를 제공합니다. 이를 통해 사용자는 검색 광고 또는 사이트 탐색을 통해 관련 주제를 탐색할 수 있습니다. 예기치 않은 결과가 발생할 수 있으므로 콘텐츠 페이지의 관련 검색어에 'query' 매개변수를 사용하지 마세요.

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<p>Page content</p>

<div id="afscontainer1"></div>

<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId': 'test client ID', // Enter your own client-ID here
  'relatedSearchTargeting': 'content', // Must use 'content'
  'hl': 'en', // The preferred language for related terms (default to 'en' if not specified)
  'styleId': '1234567890', // Enter your style ID
  'resultsPageBaseUrl': '//www.example.com/search', // Enter the base URL of your results page
  'resultsPageQueryParam': 'query', // Specify the query parameter on your results page
  'terms': 'term a,term b', // Optionally provide your own related terms in a comma-delimited list
  'referrerAdCreative': 'example ad title' // Only used when a user clicked an ad to arrive here
};

var rsblock1 = {
  'container': 'afscontainer1',
  'relatedSearches': 6
};

_googCsa('relatedsearch', pageOptions, rsblock1);
</script>

<p>More page content</p>

</body>
</html>

피해야 할 사항

모든 게시자는 애드센스 맞춤 검색 광고 구현을 위한 Google 가이드라인을 준수해야 하며, 광고 렌더링을 방해하거나 예기치 않은 결과 또는 최적의 실적을 달성하지 못할 수 있는 특정 구현 방법은 사용하지 않는 것이 좋습니다.

  • 무한 스크롤을 구현하는 경우를 제외하고 페이지에서 광고를 여러 번 호출하지 마세요.
  • 광고가 렌더링되기 전이나 후에 광고 블록을 숨기지 마세요.
  • 페이지에서 광고 블록을 이동하지 마세요.
  • 페이지에 표시하고자 하는 것보다 더 많은 광고 블록을 요청하지 마세요.
  • 광고 블록의 DOM을 조작해서는 안 됩니다.
  • 자체 지연 로드를 구현해서는 안 됩니다 (대신 Google의 지연 로드 사용).
  • 사이트에 Google의 JS 리소스를 캐시하지 않음
  • 예기치 않은 결과가 발생할 수 있으므로 콘텐츠 페이지의 관련 검색어에 'query' 매개변수를 사용하지 마세요.