プラットフォーム向け AdSense

このページは Cloud Translation API によって翻訳されました。

組み込み型接続

埋め込み接続を使用すると、ユーザーが AdSense をお客様のプラットフォームに接続しようとするときの手間が軽減され、コンバージョンプロセスが改善されます。

埋め込みコネクトは小さな JavaScript ライブラリで、対象ユーザーの最適な開始点を決定し、カスタマイズされた AdSense 登録フローをユーザーに案内します。これにより、ユーザーは広告を配信するために必要なすべての手順を行えるようになります。ユーザーが AdSense アカウントを持っているかどうか、ユーザーが AdSense 利用規約に署名しているかどうか、プラットフォームサイトを AdSense アカウントに追加しているかどうか、サイトのステータスが [準備完了] かどうかといったシナリオに対処できます。

Google が管理する UX オプションを備えた埋め込みコネクトは、アカウントとサイトのステータスのユーザーへの表示に関連する UX に対応でき、潜在的な問題を解決するために AdSense の適切な場所にユーザーが誘導されます。

デベロッパーエクスペリエンスを高めるため、このライブラリはユーザーの AdSense パブリッシャー ID を含むコールバックもプラットフォームに対して発行します。この ID は、広告配信を正しく設定するために必要です。

Embedded Connect には、ユーザーエクスペリエンスの見え方について、次の 2 つのオプションがあります。

Google が管理する UX。すべての UX を管理する Embedded Connect ウィジェットを使用する。このウィジェットは、ユーザーが登録フローを行うのに役立ち、ウィジェット内にアカウントとサイトのステータスに関するユーザー情報を表示します。このオプションでは、ユーザーが AdSense アカウントに最初に接続したときにトリガーされる AdSense パブリッシャー ID をコールバックが提供されます。
カスタム UX:Embedded Connect adsenseEmbeddedConnect.connect(...) メソッドを使用します。このメソッドは、新しいウィンドウで登録フローをトリガーします。このオプションでは、AdSense パブリッシャー ID とアクセストークンを含むコールバックが提供されます。アクセストークンを使用すると、AdSense Management API で AdSense アカウントから追加情報を取得できます。このオプションでは、UX を自分で設計する必要があります。

Embedded Connect の実装

Embedded Connect を使用する手順は次のとおりです。

Google Cloud でプロジェクトを作成する（または既存のプロジェクトを使用する）
OAuth クライアント ID を作成する
Embedded Connect で使用する OAuth クライアント ID を構成する
（省略可）OAuth 同意画面をカスタマイズする
ページに Embedded Connect JavaScript ライブラリを追加する
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 の鉛筆アイコンをクリックします。
[承認済みの JavaScript 生成元] セクションで、クライアント ID を使用してリクエストを発行することが許可されている URI を追加します。通常、開発用サーバーとローカル環境の URI が追加されます（例: https://dev.example.com、http://localhost:5000）。本番環境の URI（https://example.com など）も追加する必要があります

（省略可）ステップ 4: OAuth 同意画面をカスタマイズする

OAuth 同意画面では、クライアント ID に AdSense データへのアクセスを許可します。これは、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>

渡される JavaScript 関数名の実装を提供する load パラメータに追加します。この関数は、変数が adsenseEmbeddedConnect API を使用できるようになりました。

スクリプトタグの属性

上記の例では、script タグに複数の属性が設定されています。以下で、各属性について説明します。

src: Embedded Connect API の読み込み元の URL。URL には、以下で説明するいくつかのクエリパラメータが含まれることがあります。
async: スクリプトを非同期でダウンロードして実行するようブラウザに指示します。スクリプトの実行時に、load パラメータで指定された関数が呼び出されます。
defer: 設定すると、ブラウザはページの解析と並行して Embedded Connect JavaScript をダウンロードし、ページの解析が完了した後に実行します。

src パラメータ

src 属性には、Embedded Connect を開始するために必要なクエリパラメータがいくつか含まれています。各パラメータの使用方法については、以下をご覧ください。

load は、API が完全に読み込まれたときに呼び出されるグローバル JavaScript 関数の名前です。この関数には任意の名前を選択できます。
hl には、登録ポップアップのテキストなどを含め、すべてのローカライズで使用する言語を指定します。これは省略可能なクエリパラメータで、存在しない場合、または言語が AdSense でサポートされていない場合、ウィジェットはデフォルトで英語（米国）になります。AdSense でサポートされている言語をご確認ください。hl パラメータ値は BCP 47 に準拠している必要があります。たとえば、英国英語のユーザーの場合、文字列は en-GB になります。
headless=true は、Google 管理の UX ではなく、カスタム UX オプションで使用される Embedded Connect を示します。

で確認できます。

注: Embedded Connect JavaScript ライブラリは、読み込まれる URI が Google によって許可リストに登録されている場合にのみ、200 ステータスで応答します。それ以外の場合、リクエストは拒否され、403 コードが返されます。たとえば、console.example.com の Embedded Connect JavaScript ライブラリを使用する場合、ライブラリを読み込むには、Google がその URI を許可リストに登録する必要があります。ご利用のプラットフォームでこの問題を解決するには、アカウントマネージャーにお問い合わせください。同様に、HTTP プロトコルの URL（HTTPS を使用してください）から Embedded Connect を呼び出そうとすると、403 が返されます。

「Google 管理の UX」と「カスタム UX」のどちらかを選択したら、各アプローチのコードサンプルをご覧ください。

ステップ 6: Embedded Connect コードを実装する

前述のとおり、ユーザーエクスペリエンスとして次の 2 つのオプションがあります。

プラットフォームのニーズに最適な実装オプションを選択してください。

Google が管理する UX

次の手順に沿って Google にウィジェットをレンダリングさせます。これにより、登録フローがトリガーされ、アカウントとサイトの状態に関する関連情報がユーザーに表示されます。

Embedded Connect のデフォルト状態

Embedded Connect コードには 2 つのコンポーネントがあります。1 つ目は空の <div> で、Embedded Connect が登録ウィジェットをレンダリングする場所を指定します。2 つ目はコードで、構成の設定とコールバックの管理を行います。

Embedded Connect ウィジェットがレンダリングする HTML 要素

Embedded Connect ウィジェットを表示するページに次の HTML を配置します。

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

Embedded Connect のコード

次に、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
        },
    });
};

スクリーンショット

Embedded Connect ウィジェットには、主に次の 4 つの状態があります。

（デフォルト）AdSense に接続する
AdSense に接続する
サイト情報を確認しています
問題が検出されました

1. （デフォルト）AdSense に接続する

これはデフォルトの状態で、Embedded Connect コードの publisherId フィールドが存在しない場合にユーザーに表示されます。接続フロー（ポップアップ）が開始され、ユーザーがフローが正常に完了すると onConnect コールバックがトリガーされます。

Embedded Connect のデフォルト状態

2. AdSense に接続する

この状態は、ユーザーが接続フローを開始したときに表示されます（ポップアップが表示されます）。ポップアップが閉じられるか、フローが完了すると、この状態は他のいずれかの状態になります。

埋め込みコネクト - AdSense への接続

3. サイト情報を確認しています

新しいサイトが AdSense に送信されると、審査プロセスが開始されます。この期間中は広告を配信できません。

Embedded Connect - サイト情報の確認

審査の重要な要素の 1 つが所有権の確認です。これは次のようなさまざまな方法で提出できます。

子アカウントのパブリッシャー ID が ads.txt ファイルに含まれている
子アカウントのパブリッシャー ID がユーザーのサイトの広告タグに含まれている
ユーザーのサイトに google-adsense-child-account メタタグがある。最良の結果を得るには、ユーザーのサイトのホームページにこのオブジェクトが存在することを確認してください。

最適なアプローチは、URL 構造やその他の要因によって異なります。ご利用のプラットフォームに最適な設定については、アカウントマネージャーにお問い合わせください。

4. 問題が検出されました

ユーザーのアカウントやサイトに解決すべき問題がある場合は、このステータスがユーザーに表示されます。

Embedded Connect - 問題が検出されました

カスタム UX

UX をご自身で管理し、API 呼び出しを使用して登録方法を手動でトリガーする場合は、次の手順に従ってください。

Embedded connect JavaScript ライブラリ

カスタム 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 を使用する準備が整ったら（ JavaScript 関数を load パラメータに渡）して、実装を提供 AdSense との接続と接続解除の方法を確認しますたとえば、2 つの Pod をボタン:

<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.
}