Web/H5 自适应弹窗 SDK

集成 SDK

1. 集成数据采集 SDK

JS 弹窗 SDK 依赖于数据数据采集 SDK,如已集成请跳过

参考 Web JS SDK

如果你的站点只在移动端使用,可以使用 H5 弹窗 SDK ,如果您的站点只在 PC 端使用,可以使用 Web 弹窗 SDK

2. 集成弹窗 JS SDK

JS 文件下载地址:

弹窗 JS SDK:https://assets.giocdn.com/sdk/cdp/marketing/gtouch.latest.js

SDK 集成方式

按照以下要求,在数据采集 SDK 集成代码下方添加弹窗 SDK 集成代码

<script type='text/javascript'>
// 弹窗 SDK 必须与数据采集 SDK 配合才能正常工作
// 请参考帮助文档「开发者文档 > SDK 集成 > JS SDK」完成数据数据采集 SDK 集成
// 弹窗 SDK
gdp('plugin', {
id: 'gio_plugin_gtouch',
src: document.location.protocol + "//assets.giocdn.com/sdk/cdp/marketing/gtouch.latest.js",
dataHost: '您的弹窗请求地址'
})
//custom page code begin here
//custom page code end here
gdp('send');
</script>

示例代码

以下代码中的配置信息都是示例用的,请不要直接复制使用。

<script type='text/javascript'>
// 数据采集 SDK
!function (e, t, n, g, i) { e[i] = e[i] || function () { (e[i].q = e[i].q || []).push(arguments) }, n = t.createElement("script"), tag = t.getElementsByTagName("script")[0], n.async = 1, n.src = g, tag.parentNode.insertBefore(n, tag) }(window, document, "script", "https://assets.giocdn.com/cdp/gio.js", "gdp");
gdp('init', 'a500f222e29e3b0c', '9eda0bb1d74f86e4', {
host: 'gdp-test-api.growingio.com',
scheme: 'http'
});
// 弹窗 SDK
gdp('plugin', {
id: 'gio_plugin_gtouch',
src: document.location.protocol + "//assets.giocdn.com/sdk/cdp/marketing/gtouch.latest.js",
dataHost: 'gdp-test.growingio.com'
});
gdp('send');
</script>

3. 测试弹窗

集成 SDK 后请务必创建分别创建一个 「 网页」弹窗和「 H5 应用」 弹窗进行测试,以保证 SDK 正确集成,弹窗创建方法请参考 创建弹窗

4. 自适配 SDK 工作原理

自动适应弹窗主要的工作原理如下,其会自动探测浏览器环境,判断是 PC 端还是移动端,根据当前环境加载移动端 H5 或 PC 端 Web SDK。代码示例如下

//gtouch.latest.js源码分析
//m是sdk加载地址,g表示"是否H5环境",m最终会替换成对应环境的弹窗SDK JS
m = g ? m.replace("gtouch", "h5") : m.replace("gtouch", "access");

所以如果您选择了在自己的服务器或 CDN 托管弹窗 SDK 代码,请务必保证以下三个文件在同一个目录下。