与网站监测代码集成

SocialMaster H5 监测方案可以与网站监测代码配合使用,获取更丰富的 H5 页面数据。

下面以 SiteMaster 为例,介绍本方案中通用网站监测工具的使用方法。

一、添加 SiteMaster 通加代码

参考以下模板,了解各部分代码的位置。

<!DOCTYPE html>
<html>
  <head>
    <title>SocialMaster H5 Template</title>

    <!-- jquery或zepto 依赖 -->
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 微信JSSDK -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <!-- SocialMasterH5监测通用代码 -->
    <script src="http://page.socialmaster.com.cn/lib/wx.min.js"></script>
  </head>
  <body>
    <h1>SocialMaster H5 Demo</h1>


    <!-- SocialMaster H5 监测方案代码 -->

    <script>
        SM_TRACK.DEBUG = false; // 可设置为 true 以调试

        /* 请修改以下文字和图片,定制分享文案 */
        SM_TRACK.setTimeLine({
          title: '分享到朋友圈时显示的标题',
          imgUrl: 'http://f.cdnmaster.com/upload/2015-06-16/1434422657899.jpg'
        });
        SM_TRACK.setAppMessage({
          title: '分享给好友时显示的标题',
          imgUrl: 'http://f.cdnmaster.com/upload/2015-06-16/1434422657899.jpg',
          desc: '分享给好友时显示的摘要'
        });
        SM_TRACK.setQQ({
          title: '分享到手机QQ时显示的标题',
          imgUrl: 'http://f.cdnmaster.com/upload/2015-06-16/1434422657899.jpg',
          desc: '分享到手机QQ时显示的摘要'
        });
    </script>



    <!-- 在 body 标签闭合之前,加入 SiteMaster 代码。如有必要,可将此代码加到 head 标签内 -->

    <script type="text/javascript">
    var _smq = _smq || [];
    _smq.push(['_setAccount', '21e03e3', new Date()]);
    _smq.push(['pageview']);

    (function() {
    var sm = document.createElement('script'); sm.type = 'text/javascript'; sm.async = true;
    sm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdnmaster.com/sitemaster/collect.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sm, s);
    })();
    </script>



  </body>
</html>

二、记录当前页面访问者

普通的网站监测方案用于 H5,只能记录 Cookie 等信息用作用户身份识别。配合本方案的 openid 变量,可以识别微信用户的信息。

本方案在 URL 中会包含当前微信用户的 openid 信息,可以获取后传递到 SiteMaster 自定义变量。(SiteMaster 的自定义变量在 应用管理 > 自定义变量设置 里,如果您不清楚如何使用,请与我们的顾问联系)

因此,我们将 SiteMaster 通加代码修改如下:

<script type="text/javascript">
    var _smq = _smq || [];
    _smq.push(['_setAccount', 'xxxx', new Date()]);
    _smq.push(['pageview']);

    (function() {
    var sm = document.createElement('script'); sm.type = 'text/javascript'; sm.async = true;
    sm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdnmaster.com/sitemaster/collect.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sm, s);
    })();
    // user.openid 为获取到的 openid 信息。
    SM_TRACK.getUserinfo(function(err,user){if(user){_smq.push(["_setCustomVar",1,user.openid,1])}});
</script>

三、记录网页事件

SiteMaster 可以记录页面互动事件。特别地,可以记录点击微信分享按钮的事件。

例如,我们定义一类分享事件,具体为分享给好友或分享到朋友圈,又有成功和取消两种情况。对于分享到朋友圈的动作的统计,代码如下。

var opt = {
  title: '分享到朋友圈时显示的标题',
  imgUrl: 'http://f.cdnmaster.com/upload/2015-06-16/1434422657899.jpg'
  success: function() {
    _smq.push(['custom', '分享', '分享到朋友圈', '成功']);
  },
  cancel: function() {
    _smq.push(['custom', '分享', '分享到朋友圈', '取消']);
  }
};
SM_TRACK.setTimeLine(opt);

SiteMaster 的事件可以灵活定义,比如,可以定义如下事件来记录哪个用户做了什么分享。

_smq.push(['custom', '分享到朋友圈', '取消', openid ]);

其他的网站分析工具的工作原理与此类似,如果您使用 Google Analytics、百度统计、站长统计等工具,可自行修改代码。

results matching ""

    No results matching ""