参见 ”获取代码“
部署四步骤:
1、head中引入监测JS和微信JS → 2、配置tar.init → 3、配置wx.config → 4、配置wx.ready
开发准备:
1) 开发者至少需要具备接入微信JSSDK分享接口的能力!
接入条件:认证订阅号/认证服务号
接入方法:参见 接入微信分享。
2) 开发者接入微信分享后,如需监测粉丝昵称、头像、性别等数据或需要配置现金红包等,则必须接入微信网页授权; 无上述需求可直接省略该步骤。
接入条件:认证服务号
接入方法:参见 接入微信授权。
注意事项:
授权后重定向的回调地址redirect_uri,注意必须动态获取,不能 hardcode,且需要urlencode,否则授权过程中可能造成链接参数的丢失,导致监测数据不完整。
PHP、ASP、JSP等web语言动态获取页面完整URL方法:
$redirect_url = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER["REQUEST_URI"];
string redirect_url = Request.Url.ToString();
String redirect_url = request.getScheme()+"://"+ request.getServerName()+request.getRequestURI()+"?"+request.getQueryString();
其他开发语言请参考对应编程语言API获取。
注:
如果开发者已经具备上述能力,则可以直接开始部署监测代码!
如不具备上述开发经验 ,请自行研究或与TargetSocial洽谈合作,由TargetSocial提供技术支持。
第一步:在Html页面head头中引入监控JS
请注意,如果你的页面启用了https,务必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js,否则将无法在iOS9.0以上系统中成功使用JSSDK
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript" src="http://js.tarsocial.com/h5stat-2.1.1.js"></script>
第二步:配置监控tar.init,需在wx.config之前完成
var tar_userinfo = []; //微信网页授权获取到的微信用户信息,默认为空; 示例代码见下方。 tar.init({ tar_debug:true, //选填,debug模式:值为true开启、false为关闭,默认开启。 tar_token:"xxxxxxxxxxxxxxxxxxxx",// 必填,监测系统分配给此次监测活动的token tar_tid:"1xxxxx", // 必填,监测系统分配给此次监测活动的id tar_userinfo:tar_userinfo });
注意: 如需监控openid、昵称、头像等信息,则需要将微信网页授权获取的信息传给监测JS中的userinfo,示例如下:
<!--显性授权--> var tar_userinfo = [{ "openid":"OPENID", "nickname":"NICKNAME", "sex":"1", "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl":"http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLS", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }]; <!--隐性授权--> var tar_userinfo = [{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }];
wx.config({ appId: "wxdxxxxxxxxxxxx", //必填,公众号的唯一标识 timestamp: "", //必填,生成签名的时间戳 nonceStr: "", //必填,生成签名的随机串 signature: "", //必填,签名,见 http://t.cn/RL24Fgw jsApiList: [ "getNetworkType", "getLocation", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone" //如业务需求,可继续加入其他微信JS接口 ] });
wx.ready(function () { var shareData64 = { title: "这里填写分享标题", //必填,分享标题 desc: "这里填写分享描述", //选填,分享描述 imgUrl: "http://www.xxx.com/…", //选填,分享图链接 link: "http://www.xxx.com/…", //必填,支持直接填写location.href success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }; wx.onMenuShareAppMessage(tar.shapeShareAppMessage(shareData64)); wx.onMenuShareTimeline(tar.shapeShareTimeline(shareData64)); });
通过在页面元素中加上H5点击上报代码,来统计事件的点击次数。
1.数字列表项目统计页面中指定按钮或链接的点击量
2.统计需要点击效果的html标签的点击量
在需要点击效果的html标签中嵌入代码 onclick=“tar.hitTag('tagvalue')“。 示例代码:
tar.hitTag('tagvalue');//'tagvalue' 自定义,英文字母+数字
在非微信环境下,代码部署与微信环境一致即可,监测JS会自动兼容其它平台(QQ、微博、QQ空间、PC等等)。
需要注意的是:
如果H5有接入微信网页授权,则需要动态判断H5是否是在微信浏览器内打开的。
不在微信内打开时需要关闭掉微信网页授权,否则页面将直接跳转至授权页面,导致无法浏览。
开启Debug模式,在微信内打开活动网页,根据Alert信息查看监测是否部署正确,具体见 “debug模式”。
tar_debug:true, //选填,debug模式:值为true开启,默认关闭。
代码部署正确后,即可开始统计监测数据,您可以登录TARS系统,查看对应的统计报告。