Vue 2 Composition API中监听Apollo查询结果触发商品曝光埋点问题

云原生阿岚

2026-10-6

商品曝光埋点实现方案

问题原因

监听逻辑错误：useResult返回的response本身是Ref类型，watch监听ref时回调参数直接对应response.value的值，之前代码中多写了一层.value访问，自然返回undefined
选型错误：computed用于生成响应式派生值，属于懒执行逻辑，只有被其他响应式依赖消费时才会触发，不适合处理埋点这类副作用逻辑
埋点事件结构错误：你当前的useTrackProductImpressions里用的是商品点击事件的上报结构，曝光事件需要调整对应字段，否则上报数据不符合规范

修复步骤

1. 修正曝光埋点上报结构

先调整useTrackProductImpressions函数里的dataLayer推送逻辑，替换为商品曝光对应的事件格式：

// 其余逻辑不变，仅修改dataLayer推送部分
dataLayer.push({ ecommerce: null }); // 清除旧的ecommerce对象
dataLayer.push({
  event: "productImpression", // 曝光事件固定名称
  ecommerce: {
    impressions: products,
    // 如果需要指定曝光列表名可以用以下格式
    // impressions: {
    //   actionField: { list: routeName },
    //   products
    // }
  }
});

2. 正确监听商品数据触发埋点

选择watch或者watchEffect都可以，推荐用watchEffect更简洁，自动追踪依赖不需要额外配置：

方案A：使用watchEffect（推荐）

// 在setup中useSearchProducts调用之后添加这段代码即可
import { watchEffect } from "@vue/composition-api";

watchEffect(() => {
  // 自动响应response的更新，只要数据返回且有商品就触发埋点
  if (response.value?.items?.length) {
    useTrackProductImpressions(response.value.items);
  }
});

方案B：使用watch

import { watch } from "@vue/composition-api";

watch(response, (newVal) => {
  if (newVal?.items?.length) {
    useTrackProductImpressions(newVal.items);
  }
}, {
  immediate: true, // 保证首次接口返回就触发
  deep: true // 嵌套数据更新时也能触发，按需添加
});