플랫폼용 애드센스 | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

삽입된 연결

Embedded Connect는 사용자가 애드센스를 플랫폼에 연결하려고 할 때 불편함을 줄이고 전환 유입경로를 개선합니다.

Embedded Connect는 특정 사용자에게 가장 적합한 시작점을 파악하고 광고를 게재하는 데 필요한 모든 단계를 진행하는 데 도움이 되는 맞춤설정된 애드센스 가입 절차를 안내하는 소규모 자바스크립트 라이브러리입니다. 사용자에게 애드센스 계정이 있는지, 애드센스 이용약관에 서명했는지, 플랫폼 사이트를 애드센스 계정에 추가했는지, 사이트의 상태가 '준비됨'인지 확인하는 등의 시나리오를 처리합니다.

Google 관리 UX 옵션이 포함된 Embedded Connect는 사용자에게 계정 및 사이트 상태를 표시하는 것과 관련된 UX도 처리할 수 있으며, 잠재적인 문제를 해결할 수 있도록 사용자가 애드센스의 올바른 위치로 안내합니다.

또한 개발자 환경을 지원하기 위해 라이브러리는 광고 게재를 올바르게 설정하는 데 필요한 사용자의 애드센스 게시자 ID가 포함된 플랫폼에 콜백을 전송합니다.

Embedded Connect는 사용자 환경에 대한 두 가지 옵션을 제공합니다.

Google 관리 UX. 모든 UX를 관리하는 Embedded Connect 위젯을 사용합니다. 이 위젯은 사용자의 가입 절차를 돕고 위젯 내에 계정 및 사이트 상태에 대한 사용자 정보를 표시합니다. 이 옵션은 사용자가 애드센스 계정을 처음 연결할 때 실행된 애드센스 게시자 ID가 포함된 콜백을 제공합니다.
맞춤 UX. Embedded Connect adsenseEmbeddedConnect.connect(...) 메서드를 사용하여 새 창에서 가입 흐름을 트리거합니다. 이 옵션은 애드센스 관리 API를 통해 애드센스 계정에서 추가 정보를 가져오는 데 사용할 수 있는 액세스 토큰과 애드센스 게시자 ID가 포함된 콜백을 제공합니다. 이 옵션을 사용하려면 UX를 직접 디자인해야 합니다.

삽입된 연결 구현

Embedded Connect를 사용하려면 다음 단계를 따르세요.

Google Cloud에서 프로젝트 만들기 (또는 기존 프로젝트 사용)
OAuth 클라이언트 ID 만들기
Embedded Connect에 사용할 OAuth 클라이언트 ID 구성
(선택사항) OAuth 동의 화면 맞춤설정
페이지에 삽입된 연결 자바스크립트 라이브러리 추가
Embedded Connect 코드 구현

1단계: 새 Google Cloud 프로젝트 만들기 (또는 기존 프로젝트 사용)

기존 Google Cloud 프로젝트가 있으면 자유롭게 사용하세요. 그렇지 않은 경우 아래 안내에 따라 새 프로젝트를 설정하세요.

https://cloud.google.com/resource-manager/docs/creating-managing-projects

2단계: OAuth 클라이언트 ID 만들기

Google Cloud 프로젝트에는 사용할 수 있는 기본 OAuth 클라이언트 ID가 있습니다. API 및 서비스 > 사용자 인증 정보에서 확인할 수 있습니다.

전용 OAuth 클라이언트 ID를 만들려면 다음 단계를 따르세요.

API 및 서비스 > 사용자 인증 정보로 이동합니다.
페이지 상단에서 '+ 사용자 인증 정보 만들기'를 클릭한 다음 OAuth 클라이언트 ID를 선택합니다.
애플리케이션 유형은 '웹 애플리케이션'입니다.
클라이언트 ID에 이름을 지정하고 '만들기' 클릭

3단계: Embedded Connect에 사용할 OAuth 클라이언트 ID 구성하기

Embedded Connect 통합에 사용할 OAuth 클라이언트 ID를 결정하고 나면 이를 구성해야 합니다.

다음 단계를 따르세요.

사용자 인증 정보 페이지에서 구성할 클라이언트 ID의 연필 아이콘을 클릭합니다.
승인된 자바스크립트 원본 섹션에서 클라이언트 ID를 사용하여 요청을 실행할 수 있는 URI를 추가합니다. 일반적으로 개발 서버 및 로컬 환경의 URI (예: https://dev.example.com 및 http://localhost:5000)가 추가됩니다. 또한 프로덕션 환경의 URI (예: https://example.com)를 추가해야 합니다.

(선택사항) 4단계: OAuth 동의 화면 맞춤설정하기

OAuth 동의 화면에서는 사용자가 클라이언트 ID에 애드센스 데이터 액세스 권한을 부여합니다. 이는 Embedded Connect 작동 방식의 필수적인 부분입니다. 플랫폼 이름, 로고 등을 포함하도록 이 화면을 맞춤설정할 수 있습니다. 맞춤설정을 구성하려면 OAuth 동의 화면 페이지를 방문하세요. 페이지 상단의 '앱 수정'을 클릭하고 마법사의 안내를 따릅니다.

5단계: Embedded Connect JavaScript 라이브러리 구현

이 라이브러리에는 삽입된 연결을 시작하는 데 사용되는 다양한 메서드가 포함되어 있으며 사용자의 게시자 ID를 검색하고 삭제하는 데 필요한 콜백을 제공합니다. 페이지 헤드를 향해 구현하세요.

Google 관리 UX의 경우:

<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}" async defer></script>

맞춤 UX의 경우:

<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>

load 매개변수에 전달된 JavaScript 함수 이름을 위한 구현을 제공해야 합니다. 이 함수는 adsenseEmbeddedConnect API를 사용할 준비가 되면 호출됩니다.

스크립트 태그 속성

위의 예에서는 스크립트 태그에 여러 속성이 설정되어 있습니다. 다음은 각 속성에 대한 설명입니다.

src: Embedded Connect API가 로드되는 URL입니다. URL에는 아래에 설명된 여러 쿼리 매개변수가 포함될 수 있습니다.
async: 브라우저에 스크립트를 비동기식으로 다운로드하고 실행하도록 요청합니다. 스크립트가 실행되면 load 매개변수를 사용하여 지정된 함수를 호출합니다.
defer: 설정되면 브라우저에서 페이지 파싱과 동시에 삽입된 연결 자바스크립트를 다운로드하고 페이지의 파싱이 완료된 후 이를 실행합니다.

src 매개변수

src 속성에는 Embedded Connect를 시작하는 데 필요한 여러 쿼리 매개변수가 포함되어 있습니다. 각 매개변수의 사용법은 아래를 참고하세요.

load은 API가 완전히 로드되면 호출될 전역 JavaScript 함수의 이름입니다. 이 함수의 이름을 선택할 수 있습니다.
hl는 가입 팝업 텍스트 등 모든 현지화에 사용할 언어를 지정합니다. 선택사항인 쿼리 매개변수이며, 이 매개변수가 없거나 언어가 애드센스에서 지원되지 않는 경우 위젯은 기본적으로 영어(미국)로 설정됩니다. 애드센스에서 지원되는 언어를 참조하세요. hl 매개변수 값은 BCP 47을 따라야 합니다. 예를 들어 영국 영어 사용자의 경우 문자열은 en-GB입니다.
headless=true는 삽입된 연결이 Google에서 관리하는 UX 대신 커스텀 UX 옵션과 함께 사용된다는 것을 나타냅니다.

이제 Google에서 관리하는 UX와 맞춤 UX 중에서 선택했으므로 아래에서 각 방법의 코드 예시를 살펴보세요.

6단계: Embedded Connect 코드 구현

위에서 설명한 것처럼 사용자 환경의 모양에는 두 가지 옵션이 있습니다.

플랫폼의 요구사항에 가장 잘 맞는 구현 옵션을 선택합니다.

Google 관리 UX

다음 단계를 따라 Google에서 위젯을 렌더링하여 가입 절차를 트리거하고 사용자에게 계정 및 사이트 상태에 대한 관련 정보를 표시하도록 하세요.

삽입된 연결 기본 상태

Embedded Connect 코드에는 두 가지 구성요소가 있습니다. 첫 번째는 Embedded Connect가 가입 위젯을 렌더링할 위치를 지정하는 빈 <div>입니다. 두 번째는 구성을 설정하고 콜백을 관리하는 코드입니다.

Embedded Connect 위젯이 렌더링되는 HTML 요소

삽입된 연결 위젯을 렌더링할 페이지에 이 HTML을 배치합니다.

<div id="adsenseEmbeddedConnect"></div>

삽입된 연결 코드

그런 다음 Embedded Connect 라이브러리 아래, div 요소 위에 구성 코드를 배치합니다.

function initEmbeddedConnect() {
    adsenseEmbeddedConnect.init({
        // <div> to show the Embedded Connect widget in
        'divId': 'adsenseEmbeddedConnect',

        // OAuth client ID from step 2
        'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',

        // Access token from the Google Identity APIs, see
        // https://developers.google.com/identity/oauth2/web/guides/use-token-model
        // Use the following scope when requesting the access token:
        // https://www.googleapis.com/auth/adsense.readonly
        'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',

        // Login hint, an optional parameter which suppresses the account
        // chooser and either pre-fills the email box on the sign-in form,
        // or selects the proper session (if the user is using multiple
        // sign-in)
        'loginHint': 'user@example.com',

        // Child site (which is added to AdSense as part of the Embedded Connect flow)
        // Consult with your account manager to ensure this value is set correctly for your platform
        'siteUrl': 'site.example.com',

        // Optional parameter, the publisher ID of the user.
        // When set, the Embedded Connect widget will display the state of the user's AdSense account.
        // When unset, the Embedded Connect widget will show the default state which triggers the connection flow.
        'publisherId': "pub-0000000000000000",

        'onConnect': function(pid) {
          // Your custom code to send the publisher ID (pid) to your server for it to be saved.
          // The onConnect function is called when the user has completed all the onboarding steps
        },
        'onDisconnect': function() {
          // Your custom code to forget the publisher ID.
          // This onDisconnect function is called when the user has clicked the "Disconnect" button in the Embedded Connect widget
        },
    });
};

스크린샷

삽입된 연결 위젯에는 4가지 기본 상태가 있습니다.

(기본값) 애드센스에 연결
애드센스에 연결하기
사이트 정보 검토
문제가 감지되었습니다.

1. (기본값) 애드센스에 연결

이는 Embedded Connect 코드에 publisherId 필드가 없는 경우 사용자에게 표시되는 기본 상태입니다. 연결 흐름 (팝업)이 시작되고 사용자가 흐름을 성공적으로 완료하면 onConnect 콜백을 트리거합니다.

삽입된 연결 기본 상태

2. 애드센스에 연결하기

이 상태는 사용자가 연결 흐름을 시작할 때 표시되며 팝업이 표시됩니다. 팝업을 닫거나 흐름이 완료되면 이 상태는 다른 상태 중 하나로 변경됩니다.

Embedded Connect - 애드센스에 연결하기

3. 사이트 정보 검토

새 사이트가 애드센스에 제출되면 검토 프로세스가 진행됩니다. 이 기간에는 광고를 게재할 수 없습니다.

삽입된 연결 - 사이트 정보 검토

검토의 중요한 구성요소는 소유권 확인으로, 소유권 확인은 다음과 같은 여러 방법으로 전달될 수 있습니다.

하위 계정 게시자 ID가 ads.txt 파일에 있는지 여부
하위 계정 게시자 ID가 사용자 사이트의 광고 태그에 있는 경우
사용자 사이트에 google-adsense-child-account 메타 태그가 있는 경우 최상의 결과를 얻으려면 사용자 사이트의 홈페이지에 있어야 합니다.

가장 좋은 방법은 URL 구조와 기타 몇 가지 요소에 따라 달라집니다. 사용 중인 플랫폼에 가장 적합한 방법은 계정 관리자에게 문의하세요.

4. 문제가 감지되었습니다.

사용자의 계정이나 사이트에 해결해야 할 문제가 있는 경우 이 상태가 사용자에게 표시됩니다.

삽입된 연결 - 문제 감지됨

맞춤 UX

UX를 직접 관리하고 API 호출을 사용하여 가입 방법을 수동으로 트리거하려면 다음 단계를 따르세요.

삽입된 연결 자바스크립트 라이브러리

맞춤 UX 옵션을 사용하려면 src 속성에서 headless=true 매개변수를 설정해야 합니다. 예를 들면 다음과 같습니다.

<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>

연결 및 연결 해제 버튼 제공

adsenseEmbeddedConnect API를 사용할 준비가 되면 (load 매개변수로 전달된 자바스크립트 함수를 통해 확인됨) 애드센스 연결 및 연결 해제를 위한 구현을 제공합니다. 예를 들어 버튼 두 개를 제공하는 방법은 다음과 같습니다.

<button onclick="connectAdSense()">Connect to AdSense</button>
<button onclick="disconnectAdSense()">Disconnect account</button>

사용자로부터 저장된 게시자 ID가 있는지 여부에 따라 어떤 버튼을 표시할지 선택할 수 있습니다.

연결 코드

function connectAdSense(){
    adsenseEmbeddedConnect.connect({
        // OAuth client ID
        'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',

        // Access token from the Google Identity APIs, see
        // https://developers.google.com/identity/oauth2/web/guides/use-token-model
        // Use the following scope when requesting the access token:
        // https://www.googleapis.com/auth/adsense.readonly
        'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',

        // Child site (which is added to AdSense as part of the Embedded Connect flow)
        // Consult with your account manager to ensure this value is set correctly for your platform
        'siteUrl': 'site.example.com',

        'onConnect': function(response) {
            // Your custom code to send the publisher ID (response[publisherId]) to your server for it to be saved.
            // The onConnect function is called when the user has completed all the onboarding steps
            // Note that you'll additionally receive an OAuth2 access token (response[token]) which can be used with the AdSense Management API to perform other operations
        },
        'onCancel': function() {
            // This callback is called if the user closes the popup window without completing the sign-up flow
        }
    });
}

연결 해제 코드

function disconnectAdSense(){
    // Your custom code to forget the publisherId from your server.
}