广告 JS SDK 接入指南

本文档介绍如何通过 JS SDK 接入广告功能，包括广告节点设置、广告渲染及手动控制渲染的实现。

接入流程

1. 引入 SDK

在页面中引入 P 云提供的 JS SDK：

<script src="https://assets.4pyun.com/js/4pyun-sdk-1.0.0.min.js"></script>

2. 设置广告节点

在页面中添加广告节点容器：

<div id="image-banner"></div>

3. 渲染广告

通过 pyun.advertingPull 方法渲染广告，以下是完整的代码示例：

pyun.advertingPull({
    el: 'image-banner', // 必填，广告节点的 ID
    app_id: '由 P 云分配的接入应用 ID', // 必填
    openid: '合作方用户 ID，用于精准投放追踪用户', // 选填
    space_id: '由 P 云分配的广告位 ID', // 必填
    displayed: 1, // 必填，是否展示广告
    provider_code: '流量主编号', // 必填，项目流量主编号，兼容 P 云或客户内部项目编号
    external: 1, // 必填，外部流量主标志：0 表示否，1 表示是（仅当 provider_code 非 P 云提供时设置为 1）
    personas: { // 选填，为精准投放传入业务参数
        plate: '粤BAAAAAA', // 车牌信息，至少包含前两位
    },
    success: (data) => {
        // 广告加载成功回调
        console.log('广告加载成功:', data);
    },
    failure: (cause) => {
        // 广告加载失败回调
        console.warn('广告加载失败:', cause);
    },
});

4. 手动控制广告渲染

SDK 默认会直接渲染广告节点。如果需要手动控制渲染（例如通过弹窗形式展示广告），可以按照以下方式实现：

HTML 结构

<div id="banner-wrapper" style="display:none">
    <div id="image-banner"></div>
</div>

JS 实现

pyun.advertingPull({
    el: 'image-banner', // 必填，广告节点的 ID
    app_id: '由 P 云分配的接入应用 ID', // 必填
    openid: '合作方用户 ID，用于精准投放追踪用户', // 选填
    space_id: '由 P 云分配的广告位 ID', // 必填
    displayed: 1, // 必填，是否展示广告
    provider_code: '流量主编号', // 必填，项目流量主编号，兼容 P 云或客户内部项目编号
    external: 1, // 必填，外部流量主标志：0 表示否，1 表示是（仅当 provider_code 非 P 云提供时设置为 1）
    personas: { // 选填，为精准投放传入业务参数
        plate: '粤BAAAAAA', // 车牌信息，至少包含前两位
    },
    success: (data) => {
        // 广告加载成功回调
        console.log('广告加载成功:', data);
        // 显示弹窗
        document.getElementById('banner-wrapper').style.display = 'block';
    },
    failure: (cause) => {
        // 广告加载失败回调
        console.warn('广告加载失败:', cause);
    },
});

测试参数

以下是测试时可使用的参数示例：

app_id = 'op00961963581daa7';

注意事项

1. 必填参数：
   • el、app_id、space_id、displayed、provider_code 和 external 为必填参数，确保正确传递。
   • personas 为选填参数，用于精准投放。
2. 回调处理：
   • 在 success 回调中处理广告加载成功的逻辑，例如显示广告或弹窗。
   • 在 failure 回调中处理广告加载失败的逻辑，例如记录日志或提示用户。
3. 用户体验：
   • 建议在广告加载过程中添加加载提示或进度条，提升用户体验。

以上是广告 JS SDK 的完整接入流程。如有疑问，请联系技术支持。