第一节:DOM树结构

当用户打开网页时,会从服务器获取到 HTML 文件并渲染成 DOM 树结构,比如对于下面的 HTML 代码:

这段 HTML 代码会被渲染成这样的结构:

每一个框对应都是一个 DOM 对象,也是我们无埋点采集和匹配的基础。换一种呈现方式,用可视化树的方式,是这样的:

当页面加载后,SDK 会采集 body 下的所有结点,也就是 h1 结点、h2 结点、form 结点和 button 结点。

  • h1 结点的数据结构是 { x: ‘/h1#slogan’, v: ‘增长,源自对每一个用户行为的洞察’, t: ‘imp’ };
  • h2 结点的数据结构是 { x: ‘/h2#subtitle’, v: ‘为产品和运营打造的数据分析产品’, t: ‘imp’ };
  • form 结点的数据结构是 { x: ‘/form.register’, t: ‘imp’ };
  • button 结点的数据结构是 { x: ‘/form.register/button’, v: ‘免费试用’, t: ‘imp’ };

通过这些数据我们也就知道,用户在网页里面看到了哪些内容。

results matching ""

    No results matching ""