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