如何启用 Singular 个横幅广告（开发人员指南）

关注
Avatar
Dora Kishinevsky
Updated

Singular Banners 是一项企业功能。要了解有关该功能的更多信息，请联系您的客户成功经理。

更新（2023 年 3 月）：添加了一个新步骤，允许Singular接收客户提示（了解更多信息）。

Singular 横幅可显示在您的移动网站上，引导网络用户无缝访问您的应用程序，并显示最相关的应用程序内容。一旦在网站中启用 Singular 横幅，您的组织就可以通过 Singular 横幅用户界面轻松设计、部署和维护横幅。

使用指南 开发人员
前提条件 您的应用程序已集成 Singular Mobile SDK，包括深度链接支持。
相关文章
  • 如何创建奇异横幅（可视化指南）
  • 奇异横幅常见问题

创建步骤

1

在网站上添加 Singular 网站 SDK 脚本

Singular 将 SDK JavaScript 代码托管在 Singular 的 CDN 上。将以下代码添加到您要跟踪的每个页面的 <head> 标签中，这是使用支持横幅广告的 SDK 版本时需要添加的代码。

<head>
<!-- 使用最新版本的 SDK   -->
<script
 src="https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk.js">
</script>
</head>
2

授予奇异访问客户端提示数据的权限

2023 年 2 月至 3 月，基于 Chromium 的网络浏览器对用户代理数据做出了新的限制，因此广告商现在需要获取客户端提示数据，并授予 Singular Web SDK 接收这些数据的权限。更多信息，请参阅横幅广告常见问题解答。

网站需要

  1. 开始询问客户提示（accept-ch header）。
  2. 授予 Singular（作为第三方）权限，以便浏览器在获取横幅请求时向我们发送客户端提示（permissions-policy 标头）。

在页面加载响应中添加以下响应标头：

accept-ch:
sec-ch-ua-model,
sec-ch-ua-platform-version,
sec-ch-ua-full-version-list

permissions-policy:
ch-ua-model=("https://sdk-api-v1.singular.net"),
ch-ua-platform-version=("https://sdk-api-v1.singular.net"),
ch-ua-full-version-list=("https://sdk-api-v1.singular.net")

 
3

初始化奇异网站 SDK 并显示横幅

每次加载页面时都应调用 SDK 初始化代码。这是所有 Singular 横幅和/或网站属性功能的前提条件。

要初始化 SDK，请使用以下代码。

  • 您需要 SDK密钥和SDK Secret，可通过 Singular 平台的 "开发工具">"SDK 密钥"获取。
  • 您还需要输入网站的产品 ID。我们建议使用反向 DNS 符号，例如 "com.example.site"。这将用于在整个 Singular 平台上识别您的网站。
// 创建 Singular 个横幅配置对象并启用网络到应用程序支持。
// 如果您想跟踪是哪个广告网络将用户引向您的网站，则需要使用 "网络到应用"。
var bannersOptions = new BannersOptions().withWebToAppSupport();

// 创建通用 SDK 配置对象并启用 Singular 个横幅广告。
var config = new SingularConfig(sdkKey, sdkSecret,
   productId).withBannersSupport(bannersOptions);

// 初始化 SDK
singularSdk.init(config);

// 显示横幅
singularSdk.showBanner();

注意：
4

在页面路径上重新显示横幅（仅限单页面应用程序）

如果您的应用程序是单页面的，您必须在每个页面路由上隐藏并重新显示横幅。这样可以确保 Singular 为您的网页体验提供合适的横幅。

要隐藏和重新显示横幅，请使用以下代码：

singularSdk.hideBanner();
singularSdk.showBanner();

这是标准集成流程的最后一步。 现在，UA 团队可以登录 Singular，进入 "自动化">"横幅"，开始创建横幅。横幅广告将根据在 "自动化">"横幅广告"中选择的选项显示在网站上。

接下来的步骤是可选的。
5

[高级选项]自定义链接设置

Singular 提供了一种通过代码个性化横幅中链接的方法。

要个性化链接，请

  1. 创建LinkParams对象，并使用下面的一个或多个函数。在调用 singularSdk.showBanner() 之前执行此操作。
  2. 然后在调用 showBanner() 时传递 LinkParams 对象。

示例

// 定义 LinkParams 对象
let bannerParams = new LinkParams();

// 配置链接选项（请参阅下面每个选项的详细信息）
bannerParams.withAndroidRedirect("androidRedirectValue");
bannerParams.withAndroidDL("androidDLParamValue");
bannerParams.withAndroidDDL("androidDDLparamValue");
bannerParams.withIosRedirect("iosRedirectValue");
bannerParams.withIosDL("iosDLValue");
bannerParams.withIosDDL("iosDDLValue");

// 用定义的选项显示横幅
singularSdk.showBanner(bannerParams);

选项列表：

方法 说明
withAndroidRedirect 传递指向 Android 应用程序下载页面（通常是 Play Store 页面）的重定向链接。
withAndroidDL 传递指向 Android 应用程序中某个页面的深度链接。
withAndroidDDL 传递延迟深度链接，即指向用户尚未安装的 Android 应用程序页面的链接。
withIosRedirect 传递指向 iOS 应用程序下载页面（通常是 App Store 页面）的重定向链接。
withIosDL 传递一个指向 iOS 应用程序页面的深度链接。
withIosDDL 传递延迟深度链接，即指向用户尚未安装的 iOS 应用程序页面的链接。
6

[高级选项]使用代码强制隐藏/显示横幅广告

如第 3 步所述，如果你有一个单页面应用程序，你必须在每个页面路径上使用hideBanner() 和showBanner() 方法，以确保传递适当的横幅（见上文第 3 步）。

如果要隐藏本应显示的横幅，或重新显示已隐藏的横幅，也可以在整个代码中使用 hideBanner() 和 showBanner()。

方法 方法描述
singularSdk.hideBanner() 隐藏页面中的可见横幅。
singularSdk.showBanner() 显示预先配置的横幅。
singularSdk.showBanner(params) 显示预先配置的横幅，但使用 linkParams 对象中定义的选项覆盖链接（请参阅第 4 步）。