AdSense for Platforms | Google for Developers

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

內嵌連線

當使用者嘗試將 AdSense 與您的平台連結時，Embedded Connect 可減少使用者的不便，並提升轉換漏斗。

Embedded Connect 是一種小型 JavaScript 程式庫，可用於判斷特定使用者的最佳起點，並引導他們完成自訂的 AdSense 註冊流程，引導他們完成所有必要步驟，才能放送廣告。這個程序會處理各種情況，包括判斷使用者是否擁有 AdSense 帳戶、是否已簽署 AdSense 條款及細則、是否已將您的平台網站新增至 AdSense 帳戶，以及網站狀態為「就緒」。

Embed Connect 搭配 Google 管理的使用者體驗選項，也能協助處理向使用者顯示帳戶和網站狀態相關的使用者體驗，引導他們前往 AdSense 中的正確位置，解決任何潛在問題。

為了協助開發人員體驗，程式庫也會發出包含使用者的 AdSense 發布商 ID 的回呼，以正確設定廣告放送。

Embedded Connect 提供兩種使用者體驗選項：

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

實作 Embedded Connect

如要使用內嵌 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」
應用程式類型將是「Web application」(網頁應用程式)
為您的用戶端 ID 命名，然後按一下 [建立]。

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

決定好要用於 Embedded Connect 整合的 OAuth 用戶端 ID 後，您必須進行設定。

請按照下列步驟操作：

在「Credentials」(憑證) 頁面中，找出您要設定的用戶端 ID，然後按一下對應的鉛筆圖示
在「已授權的 JavaScript 來源」部分，新增可透過您的用戶端 ID 發出要求的 URI。已新增開發伺服器和本機環境的 URI (例如 https://dev.example.com 和 http://localhost:5000)。此外，請務必新增正式環境的 URI (例如 https://example.com)

(選用) 步驟 4：自訂 OAuth 同意畫面

您可以在 OAuth 同意畫面中，將您的 AdSense 資料存取權授予用戶端 ID。這是 Embedded Connect 運作方式不可或缺的一環。您可以自訂這個畫面，加入平台名稱、標誌等。請前往 OAuth 同意畫面，設定您的自訂項目。按一下「編輯應用程式」並按照精靈的指示進行設定。

步驟 5：實作 Embedded Connect 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>

請務必為傳遞的 JavaScript 函式名稱提供實作放入 load 參數中。系統會在 adsenseEmbeddedConnect API 已可使用。

指令碼代碼屬性

請注意，在上述範例中，指令碼標記上設定了多個屬性。以下是每個屬性的說明。

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

src 參數

src 屬性包含啟動 Embedded Connect 所需的多個查詢參數。請參閱下文，瞭解每個參數的用法。

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

，瞭解如何調查及移除這項存取權。

現在您已選擇由 Google 管理使用者體驗和自訂使用者體驗，請繼續參閱下方每種方法的程式碼範例。

步驟 6：實作 Embedded Connect 程式碼

如上所述，您可以透過兩種方式指定使用者體驗：

選擇最符合平台需求的導入選項。

Google 管理的使用者體驗

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

內嵌 Connect 預設狀態

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

內嵌 Connect 小工具算繪的 HTML 元素

將這個 HTML 放在要顯示「嵌入式 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 回呼。

內嵌 Connect 預設狀態

2. 連結至 AdSense

系統會在使用者啟動連線流程 (且彈出式視窗出現) 時顯示這個狀態。關閉彈出式視窗或完成流程後，這個狀態會變更為其他狀態。

嵌入式連結 - 連結至 AdSense

3. 查看網站資訊

新網站提交至 AdSense 後，就會進入審查程序。這段期間內廣告無法放送。

內嵌 Connect - 查看網站資訊

審查的一大關鍵是擁有權檢查，可以透過多種方式傳遞，包括：

ads.txt 檔案中包含子帳戶發布商 ID
子帳戶發布商 ID 出現在使用者網站的廣告代碼中
使用者的網站上有 google-adsense-child-account 中繼標記。為求最佳成效，請務必放在使用者網站的首頁中。

最佳作法將視您的網址結構和一些其他因素而定。請諮詢您的客戶經理，瞭解最適合您平台的做法。

4. 偵測到問題

如果使用者的帳戶或網站有需要解決的問題，使用者就會看到這個狀態。

Embedded Connect - 偵測到問題

自訂使用者體驗

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

Embedded Connect 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 而定，您可以選擇要顯示的按鈕。

Connect code

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