LOL前端重构规范

# 数据统计

页面统一使用**LOL统计代码组件进行数据上报，基本使用方法： 其中，特别需要注意setSite对象中的project属性，需要根据体系/模块的不同填入对应的内容：

体系/模块   project 说明
掌盟内嵌 app 用于掌盟的内嵌长期产品页面，比如掌盟活动中心、TFT资料库等
皮肤 skin 皮肤相关（皮肤售卖、皮肤投票专题等）
英雄 hero 英雄相关（英雄揭秘、新英雄售卖、英雄重做、英雄投票专题等）
商业化 commerce 商业化收入相关（抽奖专题、其他收入相关专题等）
运营/版本 version 用户运营活动/游戏版本相关（用户运营相关活动、游戏版本相关活动等）
赛事 match 赛事相关（仅适用于LOL域名下的赛事活动，如LPL、LDL、德杯、MSI、全球总决赛等）
品牌 brand 品牌相关（品牌H5、品牌站等）
IP ip IP相关（英雄背景故事、小说、漫画、音乐、文学等）
社区 community 社区相关（掌盟相关的所有活动、社区直播相关、主播合作相关、社区产品等）
网吧投放 netbar 网吧落地页
其他 other 未在以上类型全部归属于other

例如，无畏契约官网专题：https://val.qq.com/web202107/main.html

对应填写project为other：

# 初始化上报

<script src="//game.gtimg.cn/images/js/plugin/report/atReport.js" charset="UTF-8"></script>
<script>
    //此段代码不能放到外链JS中，
    var setSite={ //设置网站属性 
        siteType:"os", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
        pageType:"main", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
        project:"base", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
        ingame: false,//选填项:默认根据浏览器类型获取是否属于游戏内，因英雄联盟端游客户端特殊性，所以英雄联盟端游客户端需求需要填写true.
        autoClick: false,//是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
        autoAreaStay: false,//是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
    };
    if(typeof LOL_SEND_DATA_FN_AT == 'function'){
        LOL_SEND_DATA_FN_AT();
    };//千万不能忘记！
</script>

如果不清楚应该填入什么标签，请找内部重构同学确认。

注意

主函数 LOL_SEND_DATA_FN_AT() 请不要延迟执行，建议直接调用，或者最迟在 document.DOMContentLoaded(即通常理解的domReady ) 事件内调用。晚于此时间点上报统计请求，有统计数据丢失的风险。检测是否成功上报可以打开浏览器调试器查看是否输出项目详情

# 按钮点击上报

<script>
    LOLSendClickAT('btn','start','开始');"
</script>

# 分享上报

<script>
    LOLSendClickAT('share','sharetowx','分享到wx');"
</script>

# 模块曝光定义

<div dt-areaid="respoure">声明式区域上报</div>

TIP

dt-areaid只能使用英文，中文和特殊字符会出现乱码的情况

# 自定义类型上报

<script>
    LOLSendClickAT('xx','englishname','中文名');"//xx表示需要上报的类型
</script>

TIP

检查是否成功上报可上传服务器后查看调试器或network
1）初始化成功打印：
eg: 项目名 a20221019coreload 项目类型 other 页面名 index 平台 dcv_pc 渠道 direct 来源(渠道类型) direct 网络类型 other
2）点击&自定义&分享成功打印：
上报 btn_start_开始
3）模块曝光可检查network Fetch/XHR：
v2_upload?appkey=xxxxx请求会上报at_show_area事件：payload中有字段events: [{eventCode: "at_show_area"...}]

# ADTAG上报

数据上报还有另外一种方式是在链接上加一个参数，用于特定渠道访问量统计。比如链接是https://lolm.qq.com/main.html，那在后面拼接参数ADTAG=xx.xx.xx.xxx

渠道类型 ADTAG参数
内部购买 media.qqbuy.媒体参数.广告位参数
外部购买 media.buy.媒体参数.广告位参数
内部配额 media.free.媒体参数.广告位参数
内部合作 cop.innercop.媒体参数.广告位参数
外部入口 media.outerenter.媒体参数.广告位参数
内部入口 media.innerenter.媒体参数.广告位参数

例如”九周年宇宙竞技场”跳转“九周年内场“： https://lol.qq.com/9/Infield/index.shtml?ADTAG=cop.innercop.lolmain.Infield

注意

用英文句号.做分割，最多不可超过4个。渠道号只能包含字母和数字。不能出现字符！字符会导致渠道号失效

TIP

如果原链接本来就带参数，比如：https://lolm.qq.com/main.html?id=123，加上&再拼接即可，和平常的url传参方式一样。
最终为：https://lol.qq.com/9/outfield/index.html?page=wishpool&ADTAG=cop.innercop.lolmain.outfield

# 小程序数据统计

# 安装sdk

npm install @tencent/lol-miniprogram-report
//或者
tnpm install @tencent/lol-miniprogram-report

# 构建npm

小程序开发者工具中构建npm（构建npm可参考微信小程序官方开发文档）

# 小程序管理端加入request合法域名

https://h.trace.qq.com;https://oth.str.beacon.qq.com;https://otheve.beacon.qq.com;

# 初始化上报

// app.js
import autoReport from '@tencent/lol-miniprogram-report';
autoReport.LOL_SEND_DATA_FN_AT({
  siteType: "a20230317xxxxxx",//必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
  dm:'lolm.qq.com',
  project: "other", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
});
//以上必须放在小程序初始化之前
App({
  onLaunch() {
   
    })
  }
})

注意

初始化需放在小程序初始化之前(必须放在onLaunch之前)，晚于此时间点上报统计请求，有统计数据丢失的风险。检测是否成功上报可以打开调试器查看是否输出项目详情，正确的输出如下图所示：

avatar

# 按钮点击上报

  wx.LOLSendClickAT('btn','start','开始');"

TIP

手游小程序组件中， 如果使用了common.report方法，可不用使用wx.LOLSendClickAT()。 common.report('btn','start','开始')上报中会默认上报eas和灯塔点击上报

# 分享上报

默认会自动采集分享上报，如需在上报中加入额外信息，可使用如下方式

  wx.LOLSendClickAT('share','sharetowx','分享到wx');"

# 模块曝光定义

加入class=“dt-expose” 并自定义data-dt-areaid

  <view class="dt-expose" data-dt-areaid="respoure">/view>

TIP

data-dt-areaidd只能使用英文，中文和特殊字符会出现乱码的情况

# 自定义类型上报

  wx.LOLSendClickAT('xx','englishname','中文名');"

TIP

检查是否成功上报可上传服务器后查看调试器或network 1）初始化成功打印： eg: 组件提示：初始化成功 项目名称：a20230317xxxxxxx 项目类型：other 项目渠道：adtag_buy 项目渠道类型：buy 项目域名：lolm.qq.com
组件提示：小程序启动
组件提示：打开页面
2）点击&自定义&分享成功打印：
上报 btn_start_开始
3）模块曝光可检查network Fetch/XHR：
v2_upload?appkey=xxxxx请求会上报at_mp_area_show/at_mp_area_stay事件：payload中有字段events: [{eventCode: "at_mp_area_stay "...}{eventCode:"at_mp_area_show}]

# ADTAG上报

如果需要上报adtag或者渠道表示，可以使用如下方法

  wx.LOLSetChannelAT('adtag.cop.innercop.lolmain.Infield');

注意

用英文句号.做分割，最多不可超过4个。渠道号只能包含字母和数字。不能出现字符！字符会导致渠道号失效

← 路径分离 →