@rk911/tracker-sdk 1.6.4

package/plugins/click.js

@@ -0,0 +1,557 @@
+export class ClickPlugin {
+  constructor() {
+    this.name = 'click'
+    this.tracker = null
+    this._handler = null
+    this._lastClickKey = ''
+    this._lastClickTime = 0
+  }
+
+  install(tracker) {
+    this.tracker = tracker
+    var adapter = tracker.getAdapter()
+
+    if (!adapter.supportsDOM()) return
+
+    var self = this
+    this._handler = function (e) {
+      self._handleClick(e)
+    }
+    adapter.addClickListener(this._handler)
+  }
+
+  _handleClick(e) {
+    var adapter = this.tracker.getAdapter()
+    var rawTarget = e.target
+    if (!rawTarget || !rawTarget.tagName) return
+
+    // 底部导航/tabbar 区域的点击跳过自动采集
+    // 原因：click 在导航前触发，拿不到目标页的 pageRoute
+    // 由业务代码（如 footer-h.vue）的手动 $track 负责上报
+    if (this._isInsideTabbar(rawTarget)) return
+
+    // 第一步：找到可点击容器（有事件绑定的最近祖先）
+    var clickable = this._findClickableContainer(rawTarget)
+
+    // 第二步：从容器内容推断点击标识
+    var text = this._extractIdentity(clickable, rawTarget)
+
+    // 基于容器+文本的去重（同一个按钮 1s 内不重复上报）
+    var clickKey = (adapter.getXPath(clickable) || '') + '|' + (text || '')
+    var now = Date.now()
+    if (clickKey === this._lastClickKey && now - this._lastClickTime < 1000) return
+    this._lastClickKey = clickKey
+    this._lastClickTime = now
+
+    // 第三步：构造上报数据
+    var trackData = {
+      tagName: (clickable.tagName || '').toLowerCase(),
+      text: text,
+      xpath: adapter.getXPath(clickable),
+      pageX: e.pageX,
+      pageY: e.pageY,
+    }
+
+    if (clickable.id) trackData.containerId = clickable.id
+    if (clickable.dataset) {
+      if (clickable.dataset.trackId) trackData.trackId = clickable.dataset.trackId
+      if (clickable.dataset.trackName) trackData.trackName = clickable.dataset.trackName
+      if (clickable.dataset.trackExtKey) trackData.extKey = clickable.dataset.trackExtKey
+      if (clickable.dataset.trackExtValue) trackData.extValue = clickable.dataset.trackExtValue
+      if (clickable.dataset.trackExtInt) trackData.extIntValue = Number(clickable.dataset.trackExtInt)
+      if (clickable.dataset.trackParam) trackData.paramName = clickable.dataset.trackParam
+      // 脚本注入的 A 路线：收集所有 data-track-post-* 组装成 postParam（真实字段名）
+      var post = null
+      for (var dk in clickable.dataset) {
+        if (dk.indexOf('trackPost') === 0 && dk.length > 9) {
+          if (!post) post = {}
+          var fname = dk.charAt(9).toLowerCase() + dk.slice(10)
+          post[fname] = clickable.dataset[dk]
+        }
+      }
+      if (post) trackData.postParam = post
+    }
+    if (clickable.tagName === 'A' && clickable.href) {
+      trackData.href = clickable.href
+    }
+
+    var trackPayload = {
+      elementId: trackData.trackId || trackData.containerId || trackData.xpath || null,
+      elementText: trackData.text || null,
+      extraData: trackData,
+    }
+
+    if (trackData.extKey) trackPayload.extKey = trackData.extKey
+    if (trackData.extValue) trackPayload.extValue = trackData.extValue
+    if (trackData.extIntValue !== undefined) trackPayload.extIntValue = trackData.extIntValue
+    if (trackData.postParam) trackPayload.postParam = trackData.postParam
+    if (trackData.paramName) {
+      trackPayload._paramName = trackData.paramName
+      trackPayload._element = clickable
+    }
+
+    // 脚本注入的精准点位（有 data-track-id）：上报成 custom 且塞 frontUrl，
+    // 与手动 $dadian 打点对齐 —— 令注册表(event_type=custom) 与运行时一致，
+    // 触发后端"element_id 命中 page_path 且 event_type 匹配"的双写。
+    // 普通自动采集点击（无 data-track-id）仍上报 click，不受影响。
+    if (trackData.trackId) {
+      trackPayload.frontUrl = trackData.trackId
+      trackPayload.eventName = trackData.trackId
+      this.tracker.track('custom', trackPayload)
+    } else {
+      this.tracker.track('click', trackPayload)
+    }
+  }
+
+  /**
+   * 检测点击是否在 tabbar/底部导航 区域内
+   * 优先查项目级 isTabbarClick（如店长端 .footers 检测），
+   * 再查通用级 isNativeTabbar（原生 uni-tabbar 检测）
+   */
+  _isInsideTabbar(el) {
+    var rules = this.tracker.getConfig().projectRules
+    if (rules && typeof rules.isTabbarClick === 'function') {
+      if (rules.isTabbarClick(null, el)) return true
+    }
+    if (rules && typeof rules.isNativeTabbar === 'function') {
+      return rules.isNativeTabbar(null, el)
+    }
+    return false
+  }
+
+  /**
+   * 找到可点击容器：从点击目标向上遍历，找到第一个有点击事件绑定的元素
+   */
+  _findClickableContainer(el) {
+    var current = el
+    var depth = 0
+
+    while (current && current !== document.body && depth < 15) {
+      // 有 data-track-id 标记的优先
+      if (current.dataset && current.dataset.trackId) return current
+
+      var tag = current.tagName ? current.tagName.toUpperCase() : ''
+
+      // 标准可交互元素
+      if (tag === 'A' || tag === 'BUTTON') return current
+
+      // [PROJECT-ADAPT] SVG容器策略
+      // 店长端使用内联SVG图标，点击事件在SVG父元素上
+      // 其他项目如使用 iconfont/image 图标则此规则可能不触发
+      if (tag === 'SVG') {
+        var svgParent = current.parentElement || current.parentNode
+        if (svgParent && svgParent !== document.body) return svgParent
+        return current
+      }
+
+      // [PROJECT-ADAPT] Vue2 事件检测
+      // 依赖 __vue__ 内部属性和 $listeners（Vue2 + uni-app H5 编译产物）
+      // Vue3 项目需改为检查 __vueParentComponent 或其他方式
+      if (current.__vue__) {
+        var vm = current.__vue__
+        if (vm.$listeners && vm.$listeners.click) return current
+        if (vm._events && vm._events.click && vm._events.click.length) return current
+      }
+
+      // 原生 onclick
+      if (current.onclick) return current
+
+      // 有 id 的元素通常是有意义的容器（如 #floating-button）
+      if (current.id && tag === 'DIV') return current
+
+      current = current.parentElement || current.parentNode
+      depth++
+    }
+
+    // 兜底：返回原始元素
+    return el
+  }
+
+  /**
+   * 从可点击容器的内容推断点击标识
+   * 优先级：文字 > tel链接 > image文件名 > uni-icons type > SVG id >
+   *         placeholder > 表单label > aria-label > 背景图 > 容器id/class > 语义化xpath缩写
+   */
+  _extractIdentity(container, rawTarget) {
+    var text = ''
+
+    try {
+      // 1. 检查是否 <a href="tel:">
+      text = this._checkTelLink(container, rawTarget)
+      if (text) return text
+
+      // 2. 检查容器内是否有简短有意义的文字
+      text = this._getShortText(container)
+      if (text) return text
+
+      // 3. 检查 <image> 或 <img> 的 src 文件名
+      text = this._checkImageSrc(container)
+      if (text) return text
+
+      // 4. 检查 <uni-icons> 的 type 属性
+      text = this._checkUniIcons(container)
+      if (text) return text
+
+      // 5. 检查 SVG 内有意义的 <g id>
+      text = this._checkSvgId(container)
+      if (text) return text
+
+      // 6. 检查 input/textarea 的 placeholder
+      text = this._checkPlaceholder(container, rawTarget)
+      if (text) return text
+
+      // 7. 从表单行容器中找关联 label 文字
+      text = this._findFormLabel(container, rawTarget)
+      if (text) return text
+
+      // 8. 检查 aria-label / title 属性
+      text = this._checkAccessibility(container, rawTarget)
+      if (text) return text
+
+      // 9. 检查 CSS 背景图 URL 中的文件名
+      text = this._checkBackgroundImage(container)
+      if (text) return text
+
+      // 10. 容器自身的 id
+      if (container.id) return '[#' + container.id + ']'
+
+      // 11. 从 class 提取关键词
+      text = this._checkClassName(container)
+      if (text) return text
+
+      // 12. 最终 fallback：生成简短语义化位置描述
+      text = this._buildPositionHint(container, rawTarget)
+      if (text) return text
+
+    } catch (err) {}
+
+    return ''
+  }
+
+  /**
+   * 检查 tel: 链接
+   */
+  _checkTelLink(container, rawTarget) {
+    // 容器本身是 tel 链接
+    if (container.tagName === 'A' && container.href && container.href.indexOf('tel:') === 0) {
+      return '[拨打电话:' + container.href.replace('tel:', '') + ']'
+    }
+    // 从点击目标向上找 tel 链接
+    var current = rawTarget
+    var depth = 0
+    while (current && current !== container.parentElement && depth < 5) {
+      if (current.tagName === 'A' && current.href && current.href.indexOf('tel:') === 0) {
+        return '[拨打电话:' + current.href.replace('tel:', '') + ']'
+      }
+      current = current.parentElement
+      depth++
+    }
+    // 在容器内查找
+    var telLink = container.querySelector && container.querySelector('a[href^="tel:"]')
+    if (telLink && telLink.href) {
+      return '[拨打电话:' + telLink.href.replace('tel:', '') + ']'
+    }
+    return ''
+  }
+
+  /**
+   * 获取容器内的简短文字（排除图标字体等无意义字符）
+   */
+  _getShortText(container) {
+    var text = (container.innerText || container.textContent || '').trim()
+    // 排除空文本
+    if (!text) return ''
+    // 排除图标字体单字符（Unicode 私用区）
+    if (text.length === 1 && text.charCodeAt(0) > 0xe000) return ''
+    // [PROJECT-ADAPT] 设计工具命名过滤
+    // 当前规则基于 Sketch/Figma 中文命名导出，英文命名项目需调整
+    if (/^[\s\S]*(?:编组|矩形|备份|椭圆|路径)[\s\S]*$/.test(text) && text.indexOf('编组') > -1) return ''
+    // 文字太长说明是整个区域的内容，不是按钮文字
+    if (text.length > 30) return ''
+    return text.substring(0, 50)
+  }
+
+  /**
+   * 检查容器内 image/img 标签的 src，提取文件名
+   */
+  _checkImageSrc(container) {
+    var img = container.querySelector && (
+      container.querySelector('image[src]') || container.querySelector('img[src]')
+    )
+    if (!img) return ''
+    var src = img.getAttribute('src') || ''
+    // 提取文件名（去掉路径和后缀）
+    var match = src.match(/\/([^/]+)\.\w+$/)
+    if (match && match[1]) {
+      return '[img:' + match[1] + ']'
+    }
+    return ''
+  }
+
+  /**
+   * [PROJECT-ADAPT] 图标组件检测
+   * 当前支持: uni-icons / u-icon (uView)
+   * 其他项目如使用 vant-icon / iconfont 需扩展 selector
+   */
+  _checkUniIcons(container) {
+    var icon = container.querySelector && (
+      container.querySelector('uni-icons') ||
+      container.querySelector('[class*="uni-icons"]') ||
+      container.querySelector('u-icon') ||
+      container.querySelector('[class*="u-icon"]')
+    )
+    if (!icon) return ''
+    // 取 type 或 name 属性（uni-icons 用 type，u-icon 用 name）
+    var type = icon.getAttribute('type') || icon.getAttribute('name') || ''
+    if (!type) {
+      // 尝试从 Vue 实例取 props
+      if (icon.__vue__) {
+        type = icon.__vue__.type || icon.__vue__.name || ''
+      }
+    }
+    if (type) return '[icon:' + type + ']'
+    return ''
+  }
+
+  /**
+   * [PROJECT-ADAPT] SVG g[id] 识别规则
+   * ignorePattern: 过滤设计工具自动命名（中英文）
+   * 长度阈值 6: 基于店长端图标命名（"返回""关闭"等2-4字）
+   * 其他项目需根据实际 SVG 资产调整 ignorePattern 和长度阈值
+   */
+  _checkSvgId(container) {
+    var svg = container.querySelector && container.querySelector('svg')
+    if (!svg) return ''
+    var gList = svg.querySelectorAll('g[id]')
+    var ignorePattern = /编组|矩形|备份|椭圆|路径|蒙版|形状|图层|Mask|Group|Rectangle|Path|Shape|Layer/i
+    var best = ''
+    for (var i = 0; i < gList.length; i++) {
+      var gId = gList[i].id || ''
+      if (!gId || ignorePattern.test(gId)) continue
+      // 跳过含括号的（设计工具图层描述）
+      if (/[（()）]/.test(gId)) continue
+      // 跳过超长名称（设计工具自动命名通常很长）
+      if (gId.length > 6) continue
+      // 取最短的
+      if (!best || gId.length < best.length) {
+        best = gId
+      }
+    }
+    if (best) return '[svg:' + best + ']'
+    return ''
+  }
+
+  /**
+   * [PROJECT-ADAPT] class 关键词识别
+   * 当前关键词列表基于店长端 CSS 命名规范
+   * 其他项目如使用 BEM 或不同命名风格需扩展正则
+   */
+  _checkClassName(container) {
+    var cls = container.className || ''
+    if (typeof cls !== 'string') return ''
+    var match = cls.match(/\b(back|close|phone|call|delete|del|edit|search|submit|confirm|cancel|download|add|save|refresh|share|copy|more|menu|nav|tab|toggle|switch|check|select|input|login|register|send|pay|order|cart|collect|like|follow|btn[-_]?\w*|button[-_]?\w*)\b/i)
+    if (match) return '[.' + match[0] + ']'
+    return ''
+  }
+
+  /**
+   * 检查 input/textarea 的 placeholder 文本
+   * 用户点击输入框时，placeholder 提供了语义
+   */
+  _checkPlaceholder(container, rawTarget) {
+    // 直接点击的是 input/textarea
+    var input = null
+    if (rawTarget.tagName === 'INPUT' || rawTarget.tagName === 'TEXTAREA') {
+      input = rawTarget
+    } else {
+      // 容器内找 input
+      input = container.querySelector && (
+        container.querySelector('input[placeholder]') ||
+        container.querySelector('textarea[placeholder]')
+      )
+    }
+    if (input) {
+      var ph = input.getAttribute('placeholder')
+      if (ph && ph.trim()) return '[输入:' + ph.trim().substring(0, 20) + ']'
+    }
+    // uni-app 的 input 组件渲染为 uni-input，placeholder 在子元素上
+    var uniInput = container.querySelector && container.querySelector('uni-input')
+    if (!uniInput && container.tagName === 'UNI-INPUT') uniInput = container
+    if (uniInput) {
+      var phEl = uniInput.querySelector('.uni-input-placeholder')
+      if (phEl && phEl.textContent && phEl.textContent.trim()) {
+        return '[输入:' + phEl.textContent.trim().substring(0, 20) + ']'
+      }
+      // 尝试从 Vue 实例读 placeholder prop
+      if (uniInput.__vue__ && uniInput.__vue__.placeholder) {
+        return '[输入:' + uniInput.__vue__.placeholder.substring(0, 20) + ']'
+      }
+    }
+    return ''
+  }
+
+  /**
+   * 从表单行容器中找关联的 label 文字
+   * 典型结构：<view class="form-item"><text>直播标题</text><input/></view>
+   */
+  _findFormLabel(container, rawTarget) {
+    var FORM_TAGS = ['INPUT', 'TEXTAREA', 'SELECT',
+      'UNI-INPUT', 'UNI-TEXTAREA', 'UNI-SWITCH', 'SWITCH',
+      'UNI-CHECKBOX', 'CHECKBOX', 'RADIO', 'UNI-PICKER', 'PICKER']
+
+    var formEl = null
+    if (FORM_TAGS.indexOf(container.tagName) >= 0) {
+      formEl = container
+    } else if (FORM_TAGS.indexOf(rawTarget.tagName) >= 0) {
+      formEl = rawTarget
+    } else if (container.querySelector) {
+      for (var i = 0; i < FORM_TAGS.length; i++) {
+        var found = container.querySelector(FORM_TAGS[i].toLowerCase())
+        if (found) { formEl = found; break }
+      }
+    }
+    if (!formEl) return ''
+
+    // 向上找表单行容器
+    var ROW_PATTERN = /\b(form|item|row|cell|field|group|section|line|li)\b/i
+    var current = formEl.parentElement
+    var rowContainer = null
+    var depth = 0
+    while (current && current !== document.body && depth < 6) {
+      var cls = typeof current.className === 'string' ? current.className : ''
+      if (ROW_PATTERN.test(cls)) { rowContainer = current; break }
+      current = current.parentElement
+      depth++
+    }
+    if (!rowContainer) {
+      rowContainer = formEl.parentElement && formEl.parentElement.parentElement
+    }
+    if (!rowContainer) return ''
+
+    // 策略 1: 有 class 含 label/title 的子元素
+    var labelEl = rowContainer.querySelector && (
+      rowContainer.querySelector('[class*="label"]') ||
+      rowContainer.querySelector('[class*="title"]') ||
+      rowContainer.querySelector('label')
+    )
+    if (labelEl && (!formEl.contains || !formEl.contains(labelEl))) {
+      var t = (labelEl.innerText || labelEl.textContent || '').trim()
+      if (t && t.length <= 15) return t
+    }
+
+    // 策略 2: 表单元素之前的兄弟元素中找文字
+    var children = rowContainer.children
+    if (children) {
+      for (var j = 0; j < children.length; j++) {
+        var child = children[j]
+        if (child === formEl || (child.contains && child.contains(formEl))) break
+        var t2 = (child.innerText || child.textContent || '').trim()
+        if (t2 && t2.length > 0 && t2.length <= 15) return t2
+      }
+    }
+
+    // 策略 3: Vue 组件 props
+    if (formEl.__vue__) {
+      var vm = formEl.__vue__
+      var propLabel = vm.label || vm.title || ''
+      if (propLabel && typeof propLabel === 'string' && propLabel.length <= 15) return propLabel
+    }
+
+    return ''
+  }
+
+  /**
+   * 检查无障碍属性: aria-label, title
+   */
+  _checkAccessibility(container, rawTarget) {
+    // 从点击目标到容器逐级查找
+    var current = rawTarget
+    var depth = 0
+    while (current && current !== container.parentElement && depth < 5) {
+      var label = current.getAttribute && (
+        current.getAttribute('aria-label') ||
+        current.getAttribute('title') ||
+        current.getAttribute('alt')
+      )
+      if (label && label.trim() && label.length <= 30) {
+        return label.trim()
+      }
+      current = current.parentElement
+      depth++
+    }
+    return ''
+  }
+
+  /**
+   * 检查 CSS background-image 中的文件名
+   * 覆盖用图片做按钮背景但不用 <img> 标签的场景
+   */
+  _checkBackgroundImage(container) {
+    if (typeof getComputedStyle === 'undefined') return ''
+    // 检查容器及其直接子元素
+    var targets = [container]
+    if (container.children && container.children.length <= 3) {
+      for (var i = 0; i < container.children.length; i++) {
+        targets.push(container.children[i])
+      }
+    }
+    for (var j = 0; j < targets.length; j++) {
+      try {
+        var style = getComputedStyle(targets[j])
+        var bg = style.backgroundImage || ''
+        if (bg && bg !== 'none') {
+          var match = bg.match(/url\(["']?.*?\/([^/?"']+)\.\w+["']?\)/)
+          if (match && match[1]) {
+            var name = match[1]
+            // 过滤 base64 和过长/无意义的 hash 文件名
+            if (name.length > 32 || /^[a-f0-9]{16,}$/i.test(name)) return ''
+            return '[bg:' + name + ']'
+          }
+        }
+      } catch (e) {}
+    }
+    return ''
+  }
+
+  /**
+   * 最终 fallback：生成简短的位置描述
+   * 当所有识别方式都失败时，至少给出元素在页面中的大致位置
+   */
+  _buildPositionHint(container, rawTarget) {
+    var tag = (container.tagName || '').toLowerCase()
+    // 过滤纯布局标签，这些通常是误触
+    if (tag === 'body' || tag === 'uni-page-body' || tag === 'uni-page-wrapper') return ''
+
+    var hint = ''
+    // 尝试找到最近的有意义的祖先
+    var parent = container.parentElement
+    var depth = 0
+    while (parent && depth < 5) {
+      var parentCls = (parent.className && typeof parent.className === 'string') ? parent.className : ''
+      var parentId = parent.id
+      // 找到有意义的容器名称
+      if (parentId && parentId.length <= 20) {
+        hint = '#' + parentId
+        break
+      }
+      var clsMatch = parentCls.match(/\b(header|footer|sidebar|nav|menu|toolbar|modal|dialog|popup|card|list|item|cell|row|panel|section|content|wrapper|container|page)[-_]?(\w{0,10})\b/i)
+      if (clsMatch) {
+        hint = clsMatch[0]
+        break
+      }
+      parent = parent.parentElement
+      depth++
+    }
+
+    if (hint) return '[区域:' + hint + ']'
+    return ''
+  }
+
+  destroy() {
+    if (this._handler && this.tracker) {
+      this.tracker.getAdapter().removeClickListener(this._handler)
+    }
+    this._handler = null
+    this.tracker = null
+  }
+}