AdSense for Platforms | Google for Developers

此页面由 Cloud Translation API 翻译。

嵌入式连接

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

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

如果将 Embedded Connect 与 Google 管理的用户体验选项搭配使用，还可以处理向用户显示账号和网站状态所涉及的用户体验，引导他们前往 AdSense 中的正确位置解决任何潜在问题。

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

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

由 Google 管理的用户体验。使用 Embedded Connect widget，它负责管理所有用户体验。该微件将帮助用户完成注册流程，并在该微件中向用户显示有关其账号和网站状态的信息。此选项提供了一个回调，其中包含用户首次关联 AdSense 账号时触发的 AdSense 发布商 ID。
自定义用户体验。使用 Embedded Connect adsenseEmbeddedConnect.connect(...) 方法，该方法会在新窗口中触发注册流程。此选项会提供一个包含 AdSense 发布商 ID 和访问令牌的回调函数，您可以使用该令牌通过 AdSense Management API 从 AdSense 账号提取更多信息。如果选择此选项，您需要自行设计用户体验。

实现 Embedded Connect

要使用 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。您可以通过访问 APIs &服务 >凭据。

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

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

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

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

请按照以下步骤操作：

在“凭据”页面中，点击与您要配置的客户端 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 步：实现 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：如果设置，浏览器将并行下载嵌入式连接 JavaScript 来解析网页，并在网页解析完毕后执行该 JavaScript。

src 参数

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

load 是在 API 加载完毕后调用的全局 JavaScript 函数的名称。您可以为此函数选择任何名称。
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 应在何处呈现注册 widget。第二类是设置配置和管理回调的代码。

用于呈现 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 - 查看网站信息

所有权检查是审核的一个重要环节，可通过多种方式进行，包括：

ads.txt 文件中存在子账号发布商 ID
子发布商 ID 存在于用户网站的广告代码中
google-adsense-child-account 元标记位于用户网站上。为获得最佳效果，请确保在用户网站的首页上显示此代码。

最佳方法取决于您的网址结构和其他一些因素。如需了解最适合您平台的方法，请咨询您的客户经理。

4. 系统检测到一些问题

如果用户的账号或网站有需要解决的问题，系统会向用户显示此状态。

嵌入式连接 - 检测到问题

自定义用户体验

如果您想自行管理用户体验，并使用 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 函数），提供实现。例如，通过提供两个按钮：

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