在网站上添加 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>

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

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")

初始化奇异网站 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();

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

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

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

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

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

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);

选项列表：

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

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

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