AdSense for Platforms | Google for Developers

本頁面由 Cloud Translation API 翻譯而成。

內嵌連結

內嵌連結可減少使用者嘗試將 AdSense 連結到您的平台時，轉換過程的流暢度。

Embedded Connect 是小型的 JavaScript 程式庫，可找出最適合某位使用者的起點，並引導他們完成自訂的 AdSense 註冊流程，協助他們完成所有放送廣告的必要步驟。這個專區會處理各種狀況，包括判斷使用者是否有 AdSense 帳戶、是否已簽署 AdSense 條款及細則、是否已將平台網站新增至 AdSense 帳戶，以及網站的狀態是否為「就緒」。

您也可透過內嵌連結 (Google 代管的使用者體驗選項)，處理向使用者顯示帳戶和網站狀態的使用者體驗，引導他們前往 AdSense 中的正確位置解決所有潛在問題。

為協助開發人員體驗，程式庫也會向您的平台發出回呼 (當中包含使用者的 AdSense 發布商 ID)，以便正確設定廣告放送。

內嵌連結提供兩種使用者體驗選項：

Google 代管的使用者體驗。使用 Embedded Connect 小工具來管理所有使用者體驗。這項小工具可協助使用者完成註冊流程，並在小工具中顯示使用者帳戶和網站狀態的相關資訊。這個選項會提供回呼，使用者首次連結 AdSense 帳戶時觸發的 AdSense 發布商 ID。
自訂使用者體驗。使用 Embedded Connect adsenseEmbeddedConnect.connect(...) 方法，在新視窗中觸發註冊流程。這個選項會提供包含 AdSense 發布商 ID 和存取權杖的回呼，可用來透過 AdSense Management API 從 AdSense 帳戶擷取額外資訊。如要使用這個選項，您必須自行設計使用者體驗。

實作嵌入式連線

如要使用內嵌連結，請按照下列步驟操作：

在 Google Cloud 中建立專案 (或使用現有專案)
建立 OAuth 用戶端 ID
設定要與 Embedded Connect 搭配使用的 OAuth 用戶端 ID
(選用) 自訂 OAuth 同意畫面
將 Embedded Connect JavaScript 程式庫新增至網頁
實作嵌入式連線程式碼

步驟 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
應用程式類型為「Web application」(網頁應用程式)
為用戶端 ID 命名，然後按一下「建立」。

步驟 3：設定要與 Embedded Connect 搭配使用的 OAuth 用戶端 ID

決定要用於 Embedded Connect 整合功能的 OAuth 用戶端 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：實作嵌入式連線 JavaScript 程式庫

此程式庫包含用來啟動內嵌連結的各種方法，並提供擷取及忘記使用者的發布商 ID 所需的回呼。請將此做法導入網頁標頭。

Google 管理的使用者體驗：

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

自訂使用者體驗：

<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 的網址。網址可能包含多個查詢參數，詳見下文。
async：要求瀏覽器以非同步方式下載並執行指令碼。執行後，指令碼會呼叫使用 load 參數指定的函式。
defer：設定之後，瀏覽器會同時下載 Embedded Connect JavaScript 來剖析網頁，並在網頁剖析完成後執行。

src 參數

src 屬性包含啟動 Embedded Connect 所需的幾個查詢參數。請參閱每個參數的用法。

load 是 API 完全載入時要呼叫的全域 JavaScript 函式名稱。您可以為這個函式選擇任何名稱。
hl 會指定所有本地化作業使用的語言，包括註冊彈出式視窗中的文字。這是選擇性的查詢參數，如果沒有，或 AdSense 不支援該語言，小工具會預設為英文 (美國)。請參閱 AdSense 支援的語言。hl 參數值必須遵循 BCP 47，以英國英文使用者為例，字串會是 en-GB。
headless=true 表示 Embedded Connect 會與自訂使用者體驗選項搭配使用，而非由 Google 管理的使用者體驗。

您已經選擇 Google 管理的使用者體驗和自訂使用者體驗，請繼續閱讀以下各種方法的程式碼範例。

步驟 6：實作嵌入式連線程式碼

如上所述，有兩種使用者體驗選項可供使用：

請選擇最符合自家平台需求的實作方式。

Google 代管的使用者體驗

請按照下列步驟讓 Google 顯示小工具，進而觸發註冊流程，並向使用者顯示帳戶和網站狀態的相關資訊。

「Embedded Connect」預設狀態

Embedded Connect 程式碼包含兩項元件。第一個是空白的 <div>，用於指定 Embedded Connect 顯示註冊小工具的位置。第二項則是設定設定，並管理回呼的程式碼。

內嵌連結小工具轉譯的 HTML 元素

將此 HTML 放在要顯示 Embed Connect 小工具的網頁上：

<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 小工具的主要狀態有四種：

(預設) 連結至 AdSense
連結至 AdSense
正在查看網站資訊
偵測到問題

1. (預設) 連結至 AdSense

這是預設狀態，當 Embedded Connect 程式碼中的 publisherId 欄位不存在時，使用者就會看到。這會啟動連線流程 (彈出式視窗)，且使用者順利完成流程後，就會觸發 onConnect 回呼。

「Embedded Connect」預設狀態

2. 連結至 AdSense

使用者啟動連線流程 (會顯示彈出式視窗) 時，就會看到這個狀態。關閉彈出式視窗或完成流程後，這個狀態會變更為另一個狀態。

內嵌連結 - 連結至 AdSense

3. 正在查看網站資訊

將新網站提交給 AdSense 後，我們就會展開審查程序。廣告目前無法放送。

Embedded Connect - 查看網站資訊

評論的重要組成部分是擁有權檢查，可以透過多種方式通過，包括：

ads.txt 檔案中包含您的上層發布商 ID
ads.txt 檔案包含子帳戶發布商 ID
使用者網站含有 google-adsense-child-account 中繼標記

最佳做法取決於網址結構和其他因素。請向客戶經理洽詢最適合自家平台的做法。

4. 偵測到問題

如果使用者的帳戶或網站有任何需要解決的問題，系統會向使用者顯示這個狀態。

Embedded Connect - 偵測到問題

自訂使用者體驗

如果您想自行管理使用者體驗，並使用 API 呼叫來手動觸發註冊方式，請按照下列步驟操作。

內嵌連結 JavaScript 程式庫

如要使用自訂使用者體驗選項，必須在 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 參數的 JavaScript 函式進行驗證) 後，請提供與 AdSense 連結及中斷連線的實作方式。例如，提供兩個按鈕：

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