如何将localStorage数据添加到AMP Analytics中？

AMP 本身对自定义JS执行有严格限制，你需要通过官方提供的能力实现localStorage数据读取和上报，可根据你的场景选择以下两种方案： #

方案1：直接使用AMP Analytics内置宏（无需额外自定义JS） #

如果你不需要对localStorage的值做额外逻辑处理，直接用内置的LOCAL_STORAGE宏即可，配置最简单：

• 直接在你的amp-analytics配置中引用对应key的值即可，你定义的data变量对应的key为sn，配置示例如下：

<amp-analytics>
  <script type="application/json">
  {
    "requests": {
      "base": "https://你的上报接口地址?sn=${sn}&event_type=${event}"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "base",
        "vars": {
          "event": "page_view",
          "sn": "${LOCAL_STORAGE(sn)}"
        }
      }
    }
  }
  </script>
</amp-analytics>

方案2：配合amp-script自定义逻辑（适合需要处理值的场景） #

如果你需要对localStorage的值做加工、判断等自定义逻辑，就用amp-script把值暴露给AMP全局状态，再传给Analytics：

1. 首先在页面<head>中引入amp-analytics和amp-script的官方组件脚本，按AMP官方基础接入要求配置即可。
2. 添加amp-script节点读取localStorage值并写入全局状态，你已经定义的let data = "sn"直接放在脚本内即可：

<amp-script layout="nodisplay" script="get-sn-script">
  <script id="get-sn-script" type="text/plain" target="amp-script">
    // 你定义的localStorage键名
    let data = "sn";
    // 读取值，缺省设为unknown避免上报空值
    const snVal = localStorage.getItem(data) || "unknown";
    // 写入AMP全局状态
    AMP.setState({
      userMeta: {
        sn: snVal
      }
    });
  </script>
</amp-script>

3. 配置amp-analytics读取全局状态的值作为上报参数：

<amp-analytics>
  <script type="application/json">
  {
    "requests": {
      "eventTrack": "https://你的上报接口地址?sn=${userMeta.sn}&event=${eventName}"
    },
    "triggers": {
      "pageView": {
        "on": "visible",
        "request": "eventTrack",
        "vars": {
          "eventName": "page_view"
        }
      }
    }
  }
  </script>
</amp-analytics>

注意事项 #

• 只能读取当前域名下存储的localStorage，跨域场景无法读取
• 如果使用内联amp-script，脚本总大小不能超过150KB，超过需要用外部地址引入
• 上报的参数名、接口地址可根据你的实际统计需求自行修改

内容的提问来源于stack exchange，提问作者Praveen K