TurboBanner 配置 & 调用
接入步骤:
配置TurboBanner
- Dashboard后台Turbo Banner中新建Banner、配置归因参数跟Banner素材
获取TurboBanner代码片段
- 配置完Banner后在Banner列表获取对应代码片段,并将代码片段添加在页面中
添加代码片段
- 以下二种调用方式(二选一)
- 一、添加已复制的代码片段
- 二、成功加载远端js调用TurboLinkBanner.init方法显示banner(需传入bannerID,代码片段中有bannerID)
//代码片段
<script>
!function (w, d, n, t, a, o, p) {const de = Date.now();w.TurboLinkSdkObject = t,w.TbBanner = w.TbBanner || function (q) {w.TbBanner.q = q || {}},w.TbBanner.arg = w.TbBanner.arg || a,w.TbBanner.plugins = {},o = d.createElement(n),p = d.getElementsByTagName(n)[0],o.async = 1,o.src = "https://sdk2.turbolink.cc/pixels/turbo-banner.min.js?" + (de ? "t=" + de : ""),p.parentNode.insertBefore(o, p)}(window, document, "script", "TbBanner", { bannerID: "you banner ID" });
TbBanner({ "showBanner": true});
</script>
//灵活调用方式
<script>
const script = document.createElement('script');
script.src = "https://sdk2.turbolink.cc/pixels/turbo-banner.min.js";
document.head.appendChild(script);
script.onload = () => {
//显示Banner
TurboLinkBanner.init({
"showBanner": true,
"bannerID": "you banner ID"
})
//设置额外参数
TurboLinkBanner.setLinkParams([
{ key: "extParamsKey", val: "extParamsVal" }
])
//关闭Banner
TurboLinkBanner.handleCloseBanner()
};
</script>
TbBanner & TurboLinkBanner.init方法参数说明
参数 | 说明 | 类型 | 必需 | 默认值 |
---|---|---|---|---|
showBanner | 显示Banner | boolean | 是 | 无 |
bannerID | banner ID 灵活调用方式时必需 | string | 否 | 无 |
fixedBanner | Banner模块固定在顶部 | boolean | 否 | false |
hotDownload | 热点击(点击整块Banner跳转) | boolean | 否 | false |
storageType | 关闭Banner存储类型 1:sessionStorage 2:localStorage | number | 否 | 1 |
lg | 语言标识 查看 | string | 否 | null |
extParams | 额外参数 查看 | Array | 否 | null |
额外参数类型
参数 | 说明 | 类型 | 必需 | 默认值 |
---|---|---|---|---|
key | 参数名 | string | 是 | 无 |
val | 参数值 | string | number | 否 | 无 |