前言

前端埋点主要分为页面埋点和事件埋点
官方文档：https://help.aliyun.com/document_detail/201089.html

页面埋点

import { sendTrack} from '@/util/quickTracking'
sendTrack({
  eventName: '***_page',
  params: {}
})

事件埋点

import { sendTrackEvent } from '@/util/quickTracking'
sendTrackEvent({
  eventName: '**_click',
  params: {}
})

初始化埋点方法

import config from '@/config/env'
import { getUserInfo } from '@/util/auth/func'

const {
  appKey,
  trackHost,
  sdkUrl
} = config.tracking

export const EventType = {
  Exp: 'EXP',
  Click: 'CLK',
  Other: 'OTHER'
}

export function init() {
  if (!window.aplus_queue) {
    initQueue()
    loadQuickTrackSDK()
      .then(() => {
        setUserInfo()
      })
  }
}

export function sendTrackEvent({
  eventName,
  pageName = eventName,
  eventType = EventType.Click,
  params
}) {
  console.log('qt event', eventName, pageName, eventType, params)
  window.aplus_queue.push({
    action: 'aplus.record',
    arguments: [eventName, eventType, {
      ...params,
      page_name: pageName
    }]
  })
}

export function sendTrack({
  eventName,
  pageName = eventName,
  params
}) {
  console.log('qt tracking', eventName, pageName, params)
  window.aplus_queue.push({
    action: 'aplus.sendPV',
    arguments: [{
      is_auto: false
    }, {
      // ts: Date.now(),
      // path: eventName, // 当前page的url
      page_name: pageName,
      ...params
    }]
  })
}

function initQueue() {
  window.aplus_queue = []
  // 手动 PV
  window.aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-waiting', 'MAN']
  })
  // 集成应用的appKey
  window.aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['appKey', appKey]
  })
  // 如果是私有云部署还需要在上面那段JS后面紧接着添加日志域名埋点
  if (trackHost) {
    window.aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['aplus-rhost-v', trackHost]
    })
  }
  // 关闭全埋点
  window.aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-autotrack-enabled', false]
  })
  window.aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_hold', 'BLOCK']
  })
}

async function loadQuickTrackSDK() {
  // qt的库回覆盖window.history的函数 pushState, replaceState 函数并导致IE11报错
  // 这里覆盖回去
  const nativePushState = window.history.pushState
  const nativeReplaceState = window.history.replaceState
  return new Promise((resolve) => {
    const $scriptInDOM = document.getElementsByTagName('script')[0]
    const $script = document.createElement('script')
    $script.async = true
    $script.id = 'beacon-aplus'
    $script.src = sdkUrl
    $script.onload = () => {
      // qt库内部在body渲染之后延时51，这里延时200应该足以覆盖
      sleep(200).then(() => {
        window.history.pushState = nativePushState
        window.history.replaceState = nativeReplaceState
        resolve()
      })
    }
    $scriptInDOM.parentNode.insertBefore($script, $scriptInDOM)
  })
}

async function setUserInfo() {
  const userInfo = await getUserInfo()
  if (userInfo) {
    window.aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['_user_id', userInfo.user_id]
    })
  }
  window.aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_hold', 'START']
  })
}

async function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms)
  })
}

埋点信息配置

const config = {
  webId: '',
  // QuickTracking
  appKey: '',
  trackHost: '',
  sdkUrl: ''
}
export default config

埋点验证

开发的时候一般是通过console.log验证参数是否正确。正式的验证要在Quick Tracking平台上验证

• 选择对应的平台点击开始验证

  
  
  埋点验证.png

• 输入对应的验证地址，生成验证地址

  
  
  埋点验证.png
• 当你开始访问验证地址，会自动跳转到对应的埋点信息列表