AdSense for Platforms | Google for Developers

此页面由 Cloud Translation API 翻译。

嵌入式 Connect

当用户尝试将 AdSense 与您的平台相关联时，Embedded Connect 可以减少障碍并改善转化漏斗。

Embedded Connect 是一个小型 JavaScript 库，可为特定用户确定最佳的起点，并引导他们完成自定义的 AdSense 注册流程，从而帮助他们完成投放广告所需的全部步骤。它能够处理各种情况，包括确定用户是否拥有 AdSense 帐号、他们是否已签署 AdSense 条款及条件、他们是否已将您的平台网站添加到他们的 AdSense 帐号，以及网站的状态是否为“准备就绪”。

如果嵌入式 Connect 采用 Google 管理的用户体验选项，则还可以处理向用户显示帐号和网站状态所涉及的用户体验，以引导用户访问 AdSense 中的正确位置，以解决任何潜在问题。

为了帮助开发者体验，该库还会向您的平台发出回调，其中包含用户的 AdSense 发布商 ID，而正确设置广告投放需要用到该 ID。

Embedded Connect 提供了两个用户体验选项：

由 Google 管理的用户体验。使用 Embedded Connect widget，该 widget 管理所有用户体验。该微件将帮助用户完成注册流程，并在该微件内向用户显示与其账号和网站状态有关的信息。此选项提供了一个回调，其中包含用户首次关联 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 库添加到页面
实现嵌入式 Connect 代码

第 1 步：创建新的 Google Cloud 项目（或使用现有项目）

如果您已有 Google Cloud 项目，可随时使用该项目。否则，请按照以下指南设置新项目：

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

第 2 步：创建 OAuth 客户端 ID

Google Cloud 项目将拥有一个默认的 OAuth 客户端 ID，供您使用。您可以访问 API 和服务 > 凭据找到此 ID。

如果您想创建专用的 OAuth 客户端 ID，请按以下步骤操作：

依次转到 API 和服务 > 凭据
点击页面顶部的“+ 创建凭据”，然后选择 OAuth 客户端 ID
您的应用类型将为“Web 应用”
为您的客户端 ID 命名，然后点击“创建”

第 3 步：配置 OAuth 客户端 ID，以用于 Embedded Connect

确定要用于 Embedded Connect 集成的 OAuth 客户端 ID 后，您需要对其进行配置。

请按照以下步骤操作：

在“凭据”页面中，点击要配置的客户端 ID 对应的铅笔图标。
在已获授权的 JavaScript 来源部分中，添加可使用您的客户端 ID 发出请求的 URI。正常情况下，系统会添加开发服务器 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 管理的用户体验：

<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：如果设置此参数，浏览器将在解析网页时并行下载嵌入式连接 JavaScript，并在网页解析完成后执行该 JavaScript。

src 参数

src 属性包含启动嵌入式连接所需的几个查询参数。请参阅下文，了解每个参数的用法。

load 是 API 完全加载后将调用的全局 JavaScript 函数的名称。您可以为此函数选择任何名称。
hl 指定用于所有本地化的语言，包括（例如）注册弹出式窗口中的文字。这是一个可选的查询参数；如果未提供此参数，或者 AdSense 不支持该语言，微件将默认采用英语（美国）。请参阅 AdSense 支持的语言。hl 参数值必须遵循 BCP 47，例如，对于英式英语用户，字符串将为 en-GB。
headless=true 表示 Embedded Connect 将与“自定义用户体验”选项（而非 Google 管理的用户体验）搭配使用。

现在，您已经在由 Google 管理的用户体验和自定义用户体验之间进行选择，接下来我们看看下面每种方法的代码示例。

第 6 步：实现嵌入式 Connect 代码

如上所述，用户体验有两个选项：

请选择最符合您平台需求的实现方式。

Google 管理的用户体验

按照以下步骤让 Google 呈现相应的微件，以便触发注册流程，并向用户显示与其账号和网站状态相关的信息。

嵌入式 Connect 默认状态

Embedded Connect 代码由两部分组成。第一个元素是一个空 <div>，用于指定 Embedded Connect 应在何处呈现注册 widget。第二个是设置配置和管理回调的代码。

用于呈现 Embedded Connect widget 的 HTML 元素

将此 HTML 代码放置在您希望呈现 Embedded Connect 微件的网页中：

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

嵌入式 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 widget 有四种主要状态：

（默认）关联到 AdSense
关联 AdSense
查看网站信息
系统检测到一些问题

1. （默认）关联到 AdSense

这是默认状态，当嵌入式 Connect 代码中不存在 publisherId 字段时向用户显示。它会启动连接流程（弹出），并在用户成功完成该流程后触发 onConnect 回调。

嵌入式 Connect 默认状态

2. 关联 AdSense

系统会在用户启动连接流程（并显示弹出式窗口）时向用户显示此状态。关闭弹出式窗口或完成流程后，此状态会更改为其他状态之一。

Embedded Connect - 关联到 AdSense

3. 查看网站信息

向 AdSense 提交新网站后，Google 将进入一个审核流程。在此期间无法投放广告。

Embedded Connect - 查看网站信息

所有权检查是审核的一个关键环节，可以通过多种方式通过，包括：

子帐号发布商 ID 显示在 ads.txt 文件中
子账号发布商 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 代码

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