AppTrace

主题

Web集成指南 ​

注意

JS文件会不定期更新，请勿下载保存到本地使用，否则会导致安装参数匹配不成功

1. 集成AppTrace JS SDK ​

方式一：直接引入

html
<script src="https://asset.apptrace.cn/apptrace.min.js"></script>
<script>
  // 填入对应的 AppKey
  AppTrace.init('AppTrace_AppKey')

  // 用户点击下载按钮时触发此函数
  function download() {
    AppTrace.download()
  }
</script>

方式二：在VUE中引入

在 public/index.html 添加依赖

html
<html>
  <head>
    <!--...-->
    <script src="https://asset.apptrace.cn/apptrace.min.js"></script>
    <!--...-->
  </head>
  <body>
    <!--...-->
  </body>
</html>

在下载页初始化

vue2

js
export default {
  // ...
  created() {
    // ...
    // 填入对应的 AppKey
    AppTrace.init('AppTrace_AppKey')
    // ...
  },
  methods: {
    // ...
    handleDownload() {
      // 用户点击下载按钮时触发此函数
      AppTrace.download()
    }
    // ...
  }
}

vue3

js
<script setup lang="ts"> 

  // 填入对应的 AppKey
  AppTrace.init('AppTrace_AppKey') 

  // 用户点击下载按钮时触发此函数
  const download = () => {
    AppTrace.download()
  }

<script>

注意

AppTrace.download() 函数调用的下载方式， 必须在 AppTrace控制台 里配置，有自定义链接地址、应用市场两种安装方式，任选一种即可。（安装方式配置页面：控制台 — 应用详情 — Android/iOS配置 — 应用配置）

2. AppTrace JS SDK 一键调起配置 ​

AppTrace支持通过标准的Scheme和Universal Links，接入AppTrace SDK后，在各种浏览器，包括微信，微博等内置浏览器一键调起app，并传递网页配置等自定义动态参数。简单步骤如下：

  1. 先到AppTrace后台，分别打开Android的Scheme开关，iOS建议打开Universal Links开关

  2. 参照客户端配置文档分配配置Android和iOS的一键调起

  3. 目前AppTrace的默认下载页已经支持一键调起，如果自定义下载页，引入AppTrace JS后，请在用户点击下载按钮时，触发此函数：

    js
    AppTrace.download() // 如果已经安装会尝试调起，未安装则触发下载

3. 接口补充说明 ​

3.1 AppTrace.init 有两种初始化方式 ​

方式一：精简配置

js
AppTrace.init('AppTrace_AppKey')

方式二: 更多参数

参数名称参数类型是否必填参数说明
appKeystring必填应用的AppKey，可到控制台中查看
paramsstring选填分享参数，如果不填写，默认取url的参数（url ? 后面的参数）
errorfunction(msg: string)选填初始化异常回调
successfunction()选填初始化成功回调

例子:

js
AppTrace.init({
  appKey: 'AppTrace_AppKey', // 必填
  params: '自定义参数', // param1=value1&param2=value2
  success: function () {
    console.log('init success...')
  },
  error: function (msg) {
    console.log(msg)
  }
})

3.2 AppTrace.download(Function callback) 自定义下载地址 ​

如果要自定义下载地址，自己根据设备环境进行下载链接的重定向，可以调用 AppTrace.download() 传入回调函数。 示例代码：

js
AppTrace.download(function () {
  window.location.href = '你自己的下载页'
})

4. 完整的示例代码 ​

html
<script src="https://asset.apptrace.cn/apptrace.min.js"></script>
<script>
  let initSuc = false

  AppTrace.init({
    appKey: 'AppTrace_AppKey', // 必填
    params: '自定义参数', // param1=value1&param2=value2
    success: function () {
      initSuc = true

      /**
       * 如果开启一键调起app功能可以在此处调用wakeUp()
       */
      AppTrace.wakeUp()

    },
    error: function (msg) {
      console.log(msg)
    }
  })

  // 下载按钮点击时调用此方法
  function btnClick() {
    if (initSuc) {
      AppTrace.download()
    } else {
      // 如果初始化失败建议自己指定下载地址，虽然不能获取安装参数但是不会影响用户的下载
      window.location.href = '你自己的下载页'
    }
  }
</script>