按Tag模板场景化示例-可视化埋点-服务端配置-Web-动态标签管理

动态参数埋点

动态参数是指当页面加载完后，某些class类名未存在于页面元素上，而是通过某些操作（比如点击、鼠标悬浮等）给页面元素动态添加或者更改class类名。

若class类名未存在于页面元素上，则普通参数埋点无法获取；若class类名存在于页面元素上，但位置可改变，则普通参数埋点时获取的路径可能存在偏差，导致上报数据有误。动态参数埋点则能根据动态添加的class在不同元素上的位置，上报该元素的文本或值，从而弥补了普通参数埋点的弊端。

选择“可视化埋点”页签，进入可视化埋点。输入框默认填写当前项目配置的网址，可手动修改目标埋点网址。点击“按Tag模板埋点”，系统跳转至埋点页面。
新建代码模板。
1. 在左侧“选择代码模板”页面，点击“新建”按钮。
2. 系统跳转至“新建代码”页面，输入“代码名称”，选择“扩展”类型，并设置其它公共设置项，点击“保存”。
3. 创建成功后，在“选择代码模板”页面可查看到已创建的代码模板。
在左侧的“选择代码模板”页面，选择已创建的代码模板，在右侧的“添加埋点”页面，点击“开始埋点”。
点击“添加埋点”，在页面右侧，选择您要埋点的元素类型，并在左侧页面圈选埋点。
在弹出的提示框中，选择“取消”。

说明
动态参数的结构为非同类元素，参数埋点时为一个参数对应一个埋点，而同类参数埋点则是多个参数对应多个埋点。因此，此处必须埋点为非同类元素。
通过自定义输入设置埋点名称。
添加动态参数。点击“添加”按钮添加参数行，一个埋点的参数不能超过10个。
1. 通过手动输入或选择变量的方式设置键，勾选“获取动态参数”。
2. 通过图标在左侧页面中圈选动态参数范围。当鼠标移动到可圈选元素范围时，该范围会出现红色圈选效果。当圈选元素范围后，左侧页面上的红色圈选效果变更为绿色虚线框。
  
  说明
  当某个页面元素的节点下，存在一系列的同类子元素，或这些子元素的唯一（不能有旁系）子元素是同类元素，则该元素节点可以被圈选。此处的同类是指层级、节点名一致且含有相同的class。
3. 在圈选的动态参数范围内，动态添加一个class，如选择任意一个元素。
  说明
  动态参数是从同类元素中获取唯一的元素，具有唯一性，因此只支持添加一个class。若动态class添加在多个元素上，则可视化功能无法获取该参数。
4. 点击图标，选中的元素形成高亮，在系统弹出的提示框中，点击“确定”。
  
  说明
  完成动态参数埋点后，若打开选择器按钮，选择器路径不可编辑。
完成获取动态参数后，单击“确定”，完成埋点添加。

弹框埋点

添加弹框埋点后，埋点状态有如下几种情况：

当DOM结构从关闭到打开，埋点状态为绿色；
当DOM结构从关闭到打开再到关闭，且关闭后DOM结构一直存在，埋点状态为绿色；
当DOM结构从关闭到打开再到关闭，且关闭后DOM结构消失，埋点状态为灰色。

选择“可视化埋点”页签，进入可视化埋点。输入框默认填写当前项目配置的网址，可手动修改目标埋点网址。点击“按Tag模板埋点”，系统跳转至埋点页面。
新建代码模板。
1. 在左侧“选择代码模板”页面，点击“新建”按钮。
2. 系统跳转至“新建代码”页面，输入“代码名称”，选择“扩展”类型，并设置其它公共设置项，点击“保存”。
3. 创建成功后，在“选择代码模板”页面可查看到已创建的代码模板。
在左侧的“选择代码模板”页面，选择已创建的代码模板，在右侧的“添加埋点”页面，点击“开始埋点”。
点击“购物车”，打开弹框。
在页面右侧，点击“添加埋点”，选择埋点元素为“任何元素”，在弹框中圈选埋点。
通过自定义输入设置埋点名称。
设置“埋点名称”及其他相关配置，单击“确定”，完成埋点。
您可以在“埋点列表”中查看到该埋点信息。
点击页面左上角的刷新按钮，刷新页面后，埋点状态为灰色。
点击“购物车”，打开弹框，埋点状态为绿色。此时，若您关闭弹框，状态仍为绿色。