웹 구현

참고: 블록 수에 관계없이 페이지당 하나의 광고 요청만 합니다.

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

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

개요

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

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

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

2단계: 코드 구성하기

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

3단계: 코드 구현

코드 생성기에서 코드를 복사하여 페이지에 붙여넣습니다. 이때 query 매개변수를 업데이트해야 합니다. 광고가 제대로 로드되려면 head 태그에서 생성된 코드가 사이트의 head 태그에 있어야 합니다. 광고 단위 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>

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

<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
  'relatedSearchTargeting': 'query', // Must use 'query' for Related Search on Search pages
  '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>

콘텐츠의 관련 검색어는 페이지의 콘텐츠와 관련된 사용자를 위한 검색어를 제공합니다. 이를 통해 사용자는 검색 광고나 사이트 탐색에 참여하여 관련성 높은 주제를 탐색할 수 있습니다. '검색어'는 사용하지 마세요. 매개변수를 추가할 수 없습니다. 있습니다.

참고: 사이트에 관련 검색어가 표시되려면 Google에서 크롤링해야 합니다. 문맥적으로 관련성 높은 검색어를 입력하세요. 페이지가 아직 크롤링되지 않았거나 에 의해 크롤링 (예: robots.txt에 의해)이 차단되는 경우 애드센스 크롤러 사용자가 Google에 제공하는 추천 관련 검색어는 표시되지 않습니다.

콘텐츠 제품의 관련 검색어는 Google의 콘텐츠 크롤링 시스템을 사용하여 페이지의 색인을 생성합니다. 관련 검색어를 생성할 수 있습니다. 추적 등의 검색어 매개변수가 포함된 콘텐츠 페이지 URL 변수, 사용자 ID, 세션 ID 또는 기타 동적 식별자가 크롤러의 페이지의 핵심 콘텐츠를 평가하는 능력으로 인해 부정확하거나 관련이 없는 관련 검색어가 표시될 수 있음 정의합니다. 'ignoredPageParams'를 사용하세요. 매개변수를 사용하여 이러한 필수적이지 않은 매개변수를 식별하고 적절한 콘텐츠 색인 생성 보장 및 불필요한 크롤링 로드 감소 이를 통해 Google은 페이지가 이미 크롤링된 것으로 인식하고 추천 검색어 (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>

<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' for Related Search on Content pages
  '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;
                                           // required when 'terms' is present.
};

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

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

<p>More page content</p>

</body>
</html>

피해야 할 사항

모든 게시자는 애드센스 맞춤 검색 광고를 구현하기 위한 가이드라인을 준수하고 또한 광고 렌더링을 방해하고 실적이 저조한 경우가 많습니다.

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