友盟H5统计(vue版)

275 阅读1分钟

步骤如下:

  1. 注册账号 H5的埋点位于【U-Mini】下,新建测试应用后,如下图:

image.png 主要用到的是appkey

image.png

  1. 在【价值转化】-【自定义事件】中,添加需要的埋点事件

image.png

  1. 前端是vue框架,在index.html中加入官方文档的代码
<head>
  <script>
   (function(w, d, s, q, i) {
     w[q] = w[q] || [];
     var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
     j.async = true;
     j.id = 'beacon-aplus';
     j.src = 'https://d.alicdn.com/alilog/mlog/aplus/' + i + '.js';
     f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'aplus_queue', '203467608');

    //集成应用的appKey
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['appKey', 'xxxxxxx']
    });

    /* 如果使用的是单页面应用,例如:React、Vue、Angular等,则需要添加下面的代码 */
    /* 关闭自动PV发送,如果不是单页面应用,请删掉下方代码 */
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['aplus-waiting', 'MAN']
    });

    //是否开启调试模式 
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['DEBUG', true]
    });
  </script>
</head>

vue是单页面应用,需要关闭自动PV发送 在main.ts的app.mount('#app')之前,加入路由相关代码:

// 💡 页面访问埋点逻辑放在这里
router.afterEach((to, from) => {
  // 避免首次加载页面多次触发,可以做防抖/限频
  if (window.aplus && typeof window.aplus.sendPV === 'function') {
    window.aplus.sendPV({
      is_auto: false, // 禁用 SDK 自动上报(你已经手动控制)
      page_url: window.location.href,
      page_title: document.title,
    });
  }
});

封装一个单独的youmeng.ts类,如下:

declare global {
  interface Window { aplus_queue: any }
}

// 手动点击 
export const trackEvent = (eventName: string, params: Record<string, string | number>) => {
  const { aplus_queue } = window as any;
  
  aplus_queue.push({
    action: 'aplus.record',
    arguments: [
      eventName,  // 事件ID (需在后台预先创建)
      'CLK',      // 固定事件类型
      {           // 平铺参数 (禁止嵌套!)
        ...params
      }
    ]
  });
}

// 手动曝光
export const trackExposure = (items: Record<string, string>) => {
  const { aplus_queue } = window as any;
  
  aplus_queue.push({
    action: 'aplus.record',
    arguments: [
      '$$_exposure', // 固定事件ID
      'EXP',         // 曝光类型
      {              // 平铺参数
        ...items
      }
    ]
  });
}

具体的vue页面内调用如下:

import { trackEvent, trackExposure } from '@/umeng';

trackEvent('click_submit', { form: '123123' });

上面

  • click_submit 对应你在后台创建的自定义事件key
  • { form: '123123' }对应你需要收集的埋点信息,可以自定义