AdSense for Platforms | Google for Developers

此页面由 Cloud Translation API 翻译。

嵌入式连接

当用户尝试将 AdSense 与您的平台相关联时，嵌入式 Connect 可为他们提供更顺畅的体验并改进转化漏斗。

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

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

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

嵌入式 Connect 提供了两个有关用户体验的选项：

由 Google 管理的用户体验。使用可管理所有用户体验的嵌入式 Connect 微件。该微件将帮助用户完成注册流程，并在该微件内向用户显示有关其账号和网站状态的信息。此选项会提供一个回调，其中包含用户首次关联 AdSense 帐号时触发的 AdSense 发布商 ID。
自定义用户体验。使用嵌入式连接 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（例如 https://dev.example.com 和 http://localhost:5000）。您还应额外为生产环境添加一个 URI（例如 https://example.com）

（可选）第 4 步：自定义 OAuth 权限请求页面

在 OAuth 同意屏幕上使用您的客户端 ID 可以访问其 AdSense 数据。这是 Embedded Connect 工作原理的重要组成部分。您可以自定义此屏幕，在其中添加您平台的名称、徽标等。请访问 OAuth 同意屏幕页面，配置您的自定义设置。点击页面顶部的“编辑应用”，然后按照向导的指示操作。

第 5 步：实现嵌入式 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：如果设置此参数，浏览器将并行下载嵌入式 Connect JavaScript 以解析网页，并在网页解析完成后执行。

src 参数

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

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

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

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

如上所述，用户体验有两种可选方案：

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

由 Google 管理的用户体验

请按照以下步骤让 Google 呈现 widget，该 widget 会触发注册流程，并向用户显示有关其帐号和网站状态的相关信息。

嵌入式 Connect 默认状态

嵌入式 Connect 代码有两个组成部分。第一个是空 <div>，用于指定嵌入式连接应在何处呈现注册 widget。第二个是设置配置并管理回调的代码。

呈现嵌入式 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 微件有四种主要状态：

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

1. （默认）关联到 AdSense

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

嵌入式 Connect 默认状态

2. 关联 AdSense

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

Embedded Connect - 关联到 AdSense

3. 审核网站信息

向 AdSense 提交新网站后，系统会进入审核流程。在此期间无法投放广告。

Embedded Connect - 查看网站信息

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

您的父级发布商 ID 显示在 ads.txt 文件中
子帐号发布商 ID 包含在 ads.txt 文件中
用户网站上有 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。

连接代码

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