AdSense for Platforms | Google for Developers

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

嵌入式連線

當使用者嘗試將 AdSense 連結至您的平台時，Embedded Connect 可降低操作不便並改善轉換漏斗。

Embedded Connect 是小型的 JavaScript 程式庫，用於決定特定使用者的最佳起點，並引導他們完成自訂的 AdSense 註冊流程，協助他們完成所有必要步驟，順利放送廣告。此協議處理的許多情境包括判斷使用者是否擁有 AdSense 帳戶、是否已簽署 AdSense 條款及細則、是否已將平台網站加入 AdSense 帳戶，以及網站的狀態是否為「就緒」。

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

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

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

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

實作嵌入式連線

如要使用 Embedded Connect，你必須按照下列步驟操作：

在 Google Cloud 中建立專案 (或使用現有專案)
建立 OAuth 用戶端 ID
設定 OAuth 用戶端 ID 以與 Embedded Connect 搭配使用
(選用) 自訂 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：設定 OAuth 用戶端 ID，以便與 Embedded Connect 搭配使用

決定好要用於「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 程式庫

此程式庫包含用來啟動 Embedded 連線的各種方法，並提供您擷取和忘記使用者發布商 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」這個 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 轉譯小工具，藉此觸發註冊流程，並向使用者顯示帳戶和網站狀態的相關資訊。

「Embedded Connect」預設狀態

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

「Embedded Connect」小工具轉譯的 HTML 元素

將這個 HTML 放在要呈現「Embedded 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

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

Embedded Connect - 連結至 AdSense

3. 查看網站資訊

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

Embedded Connect - 查看網站資訊

審查中的一個重要環節是擁有權檢查，可透過多種方式通過，包括：

子帳戶發布商 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，選擇要顯示的按鈕。

Connect 代碼

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