AMP 提供了可分析用户行为数据的 <amp-analytics> 元素,通过该元素实现对神策埋点数据的采集

1. 使用方法

1.1. 集成

在 head 中引入拓展组件 <amp-analytics> 的脚本:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
JS

1.2. 页面浏览事件采集

在 body 中引入 <amp-analytics> 标签,标签 type="sensorsanalytics",通过编辑标签内部的 json 配置,来进行行为数据采集

<amp-analytics type="sensorsanalytics" id="sensorsanalytics1">
  <script type="application/json">
        "requests": {
          "event": "https://jssdkdata.debugbox.sensorsdata.cn/sa?project=liangshuang" //数据接收地址
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "event",
            "vars":{
              "event":"amp_pageview",    //自定义事件名称
              "amp_properties":"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D" //自定义属性
            }
          }
      }
  </script>
</amp-analytics>
JS

1.3. 自定义事件采集

支持在特定元素触发点击时发送自定义事件,事件 trigger 配置如下,会在通过 selector 指定的元素触发点击时分别发送 click_test1 、click_test2 事件。如果多个 trigger 通过 selector 选中了同一个元素,点击这个元素,会触发每一个监听器的动作,也就是会发送多个点击的自定义事件

<amp-analytics type="sensorsanalytics" id="sensorsanalytics2">
  <script type="application/json">
        "requests": {
          "event": "https://jssdkdata.debugbox.sensorsdata.cn/sa?project=liangshuang" //数据接收地址
        },
        "triggers": {
          "id_test1": {
            "on": "click",
            "selector": "#test1",       //点击事件需要监听的元素选择器
            "request": "event",
            "vars":{
              "event":"click_test1",	//自定义事件名称
              "amp_properties":"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D" //自定义属性
            }
          },
          "class_test2": {
            "on": "click",
            "selector": ".test2",        //点击事件需要监听的元素选择器
            "request": "event",
            "vars":{
              "event":"click_test2",	//自定义事件名称
              "amp_properties":"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D" //自定义属性
            }
          }
        }
      }
  </script>
</amp-analytics>
JS


需要配置的参数说明:

  • requests 中的 event 字段:      
    1. 数据接收地址,从神策分析 —— 基本设置 —— 数据接入 —— 客户端埋点复制出的 https 数据接收地址。如果您这里没有 https 的数据接收地址,请联系神策值班同学进行配置。

    2. 获取到数据接收地址后,使用格式化工具获取符合 Web JS SDK 规范的接收地址,填入 requests 中的 event

  • vars 中的 event String,事件名称,将作为埋点事件的 event 字段上报,建议 AMP 上报的事件统一加 amp_ 前缀进行标识
  • selector String,监听点击时必须配置,为监听元素的选择器。建议在 amp_properties 中将 selector 复制上报,便于问题的定位与排查
  • amp_properties String ,事件携带的自定义属性集合,配置方法:

    如果需要上报自定义属性,如 platform 和 color :

    1. 将自定义属性写入一个属性集合对象:

      {
      	platform:'amp',
      	color:'red'
      }
      JS
    2. 对属性集合对象进行编码,编码方式为 encodeURIComponent(JSON.stringify(prop)),上面的例子编码之后为 "%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D"。您也可以使用自动编码工具进行编码 

    3. 将编码之后的字符串填入 amp_properties

如果配置多个 标签,建议给予每个 <amp-analytics> 唯一 id 。也可以通过一个 <amp-analytics> 进行配置,举例如下:

<amp-analytics type="sensorsanalytics" id="sensorsanalytics1">
  <script type="application/json">
        "requests": {
          "event": "https://jssdkdata.debugbox.sensorsdata.cn/sa?project=liangshuang"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "event",
            "vars":{
              "event":"amp_pageview",    //自定义事件名称
              "amp_properties":"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D"
            }
          },
          "id_test1": {
            "on": "click",
            "selector": "#test1",       //点击事件需要监听的元素选择器
            "request": "event",
            "vars":{
              "event":"click_test1",	//自定义事件名称
              "amp_properties":"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D"
            }
          },
          "class_test2": {
            "on": "click",
            "selector": ".test2",       //点击事件需要监听的元素选择器
            "request": "event",
            "vars":{
              "event":"click_test2",	//自定义事件名称
              "amp_properties":"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D"
            }
          }
        }
      }
  </script>
</amp-analytics>
JS

2. 预置属性

属性名属性含义
$screen_height屏幕高度
$screen_width屏幕宽度
$libsdk 版本,为 amp
$lib_versionsdk 版本号
$referrer前向地址
$title页面标题
$url页面地址
amp_properties自定义属性集合的字符串编码
{
	distinct_id: "amp-UYetU1tSwYaaGVsPnKEuMQ"
	lib: {
		$lib: "amp", 
		$lib_method: "code", 
		$lib_version: "1.0.0"
	},
	properties:{
    	$screen_height: 900,  
    	$screen_width: 1440,
    	$lib: "amp",           
    	$lib_version: "1.0.0",  
		$referrer: "http://localhost:8000/examples/analytics-vendors.amp.html?type=saanalytics",
		$title: "AMP Analytics",
		$url: "http://localhost:8000/examples/analytics-vendors.amp.html?type=saanalytics",
		amp_properties:"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D"
	},
	type: "track",
	event: "$pageview",
	time: "1610432623504"
}
CODE

3. 用户标识

 AMP 网页可以通过多种方式在浏览器查看,不同方式查看 AMP 网页将可能拥有不同的身份标识,网站指标会受到影响。

3.1. AMP 网页的三种访问方式:

下面是用户访问 AMP 网页的不同方式以及不同情况下客户端 id 的存储与识别:

3.1.1. AMP 查看器访问

AMP 网页可以通过各类平台(如 Google 搜索、Google 新闻和 Bing)访问,这类平台显示 AMP 网页在 “AMP 查看工具“ 中,通过 iframe 引入。这种情况下,用户查看的是 AMP Cache 中的网页。

由于浏览器对第三方 cookie 的限制,这种情况下用户 id 无法存储,每次访问都会标记为新用户

3.1.2. 代理/缓存访问

用户可以通过 缓存/代理 访问 AMP 网页,这时 AMP 网页所在的域名为 cdn.ampproject.org

用户访问的 id 是存储在 cdn.ampproject.org 中

3.1.3. 普通浏览器直接访问

用户直接访问发布商网域的 AMP 页面,如 https://manual.sensorsdata.cn/xxxx.html

会在发布商网域上使用一个名为 sensors_amp_id 的第一方 cookie 存储客户端标识,此次用户访问的 id 是存储 sensorsdata.cn 中

3.2. 同域名 AMP 页面和非 AMP 页面的用户统一

用户在发布商网域访问非 AMP 页面,如 https://manual.sensorsdata.cn/xxxx.html

会在发布商网域上使用一个名为 sensorsdata2015jssdkcross 的第一方 cookie 存储客户端标识,此次用户访问的 id 是存储 sensorsdata.cn 中。

默认情况下,sensorsdata.cn/amp.html 和 sensorsdata.cn/index.html  虽然为同域下的页面,但是由于 AMP 页面和非 AMP 页面记录用户标识的 cookie 不同,所以仍然记为两个用户

如果需要记为一个用户,则需要在非 AMP 页面同步集成 v1.16.5 版本的 JS SDK ,引入 AMP 插件,且设置 use_client_time:true 参数,JS SDK 初始化代码举例如下:

    <script charset="UTF-8" src="sensorsdata.js 的文件地址"></script>
    <script charset="UTF-8">
        var sensors = window['sensorsDataAnalytic201505'];
        sensors.init({
          name: 'sensors',
          server_url: 'https://jssdkdata.debugbox.sensorsdata.cn/sa?project=xx',
          heatmap:{scroll_notice_map:'not_collect'},
          use_client_time:true  
        });
        sensors.use('Amp');  //引入 AMP 插件
        sensors.quick('autoTrack');
    </script>
XML
  • JS SDK 初始化之后立即引入 AMP 插件
  • 设置 use_client_time:true 使用客户端时间

注意事项:

  1. 对于新用户会识别为一个,如果是老用户,可能会识别为两个用户。可以开启多对一减少这种用户的产生
  2. 非 AMP 页面上报的首日首次属性是针对非 AMP 页面访问的首日/首次,不包括 AMP 页面的访问
  3. AMP 用户 ID 存储在根域下,因此 JS SDK cross_subdomain 属性必须使用默认的 true ,否则会有异常
  4. 由于 AMP 生成的 uuid 格式为  amp-xxxxxxxxx ,因此非 AMP 页面的登录 id 不要使用 amp- 开头,与 AMP 的 uuid 进行区分


4. 检测 AMP 集成是否成功

触发一条埋点事件,查看 network 是否有 sa.gif 的请求发出:

{
	distinct_id: "amp-UYetU1tSwYaaGVsPnKEuMQ"
	lib: {
		$lib: "amp", 
		$lib_method: "code", 
		$lib_version: "1.0.0"
	},
	properties:{
    	$screen_height: 900,  
    	$screen_width: 1440,
    	$lib: "amp",           
    	$lib_version: "1.0.0",  
		$referrer: "http://localhost:8000/examples/analytics-vendors.amp.html?type=saanalytics",
		$title: "AMP Analytics",
		$url: "http://localhost:8000/examples/analytics-vendors.amp.html?type=saanalytics",
		amp_properties:"%7B%22platform%22%3A%22amp%22%2C%22color%22%3A%22red%22%7D"
	},
	type: "track",
	event: "amp_pageview",
	time: "1610432623504"
}
CODE