web圈选

成功加载 SDK 后，GrowingIO 就会自动采集用户的行为数据（采集数据是实时的，但是从采集到展现需要一些时间）。接下来，我们就可以通过圈选定义页面上的元素，包括文字、图片、按钮等，圈选出来的指标是制作任何图表的基础。

1.点击［新建］－［开始圈选］后，选择想要圈选的项目，就会进入到相应应用的圈选页面。

2.通过默认的浏览模式进入到想要圈选的页面，点击左上角［圈选］后，就可以开始圈选所需元素了。 高亮模式下，粉色实线代表已经被圈选的元素，粉色虚线代表已经被圈选的同类元素。

在圈选模式下按住 shift 键，就可以快速切换至浏览模式，放开 shift 键返回圈选模式。
当一些元素需要鼠标 hover 等交互行为才能显示的时候也可以使用 shift 快捷键，方便地显示出该元素，并且进行圈选。

3.在右上角我们提供了屏幕尺寸的选项，可以选择不同的设备的屏幕，对自适应元素进行圈选。


1.圈选当前页面和元素（web）


1.1定义整页：对整个页面的访问量进行定义

通过点击右上角「定义整页」按钮，在弹出框中 GrowingIO 会根据网页 URL 自动识别出域名、路径等，点击保存即可保存整个页面的访问量（即PV）。

这时也可以通过添加通配符，定义一组页面：

「路径」右侧的开关关闭时，意味着要圈选出所有符合域名为 blog.growingio.com 的一组页面，不管后面的路径是什么；

「路径」最右侧的开关开启时，可以通过在「路径」中使用「*」来做通配符，也能达到圈选多个类似页面的目的：

例如，GrowingIO 博客文章的地址都是这样的
https://blog.growingio.com/posts/具体路径
那么我们在路径中输入 /posts/* 就会圈选出所有的博客单篇文章的页面。

1.2定义某个元素

1.2.1 圈选「当前元素」：适用于即使位置改变，依旧统计该元素的场景

应用场景：列表中的文章会经常更新，图中选中的这篇文章在列表中的位置可能发生变化，当只关心这篇文章标题的点击情况，不在乎它出现在文章列表的第几位的时候，可以选择统计当前元素。

1.2.2 圈选「当前位置」：适用于某个位置的统计，即使这个位置上的元素改变，依旧统计该位置的数据量

应用场景：经常应用于广告位、搜索结果位的统计。只关心列表中某个位置的点击情况，而不关心出现在该位置的具体内容时，可以选择这个选项。

1.2.3 圈选「同类元素」：选择「同类元素」后，绿色高亮的部分都会被一并统计，这里的数据量为同类元素的总量

1.2.4 自定义

「限制文本」这里会显示被圈选的元素上面的文字。勾选该选项后表示：只统计文本为框中内容“线上公开课”的数据，文本不同将不统计。

「限制链接」 当所圈的元素为跳转链接时，该链接表示目的页的链接；当所圈元素为图片时，该链接表示图片地址。勾选该选项后表示：只统计与该跳转链接或该图片地址相同的数据，链接不同将不统计。

「限制位置」 勾选该选项后表示：只统计出现在列 表中某个位置的数据，即使该位置内容改变，依旧统计该位置的数据。


2.圈选跨页面元素（web）


在圈选元素的时候，是默认圈选当前页面的，如果想实现跨页面同类元素的圈选，可以在「页面」里选择之前定义过的其它页面。

圈选后的指标在指标管理中可以查看和修改。


3.圈选的常见问题（web）


1.如果我的页面改版，现在标记的指标是不是需要重新定义？

改版后，变化的元素需要重新圈选。

2.什么时候选择手动圈选，什么时候选择自动圈选？

使用自动模式可以很方便快捷地圈选某些元素。但是有些时候由于页面框架的实现方式，自动圈选会圈选相似的模块进来，从而造成数据误差，所以必要时可以切换手动圈选来解决问题。

3.H5怎么圈选？

GrowingIO 可以统计原生应用中的 H5 页面和 H5 做成的应用。

4.为什么圈选的元素只有点击量，没有浏览量？

1.如果被圈选元素是 a, button, input，img，并且在倒数两层以下，只统计点击量，不统计浏览量。

2.如果用户使用的是 IE8 及以下的 IE 浏览器版本，无法统计浏览量 ，只统计点击量。

5.为什么圈选的元素只有浏览量，没有点击量？

1.可能真的是没有点击量。

2.可能选中的是纯文本等没有带超链接可点击的元素。

6.当页面带查询条件的时候，开关查询条件，数据为什么没有变化？

当圈选元素所在的页面带查询条件的时候，此时圈选框内展示的数据是不带查询条件的数据。保存带查询条件指标后，指标不会回溯数据，会从保存后开始统计数据。

7.web 圈选时候页面加载不完全？错位？

部分浏览器会有兼容性问题，推荐使用 Chrome 浏览器。

8.web 端已经装了 SDK，现在不能进行圈选。

1.有可能是工程师没有成功加载 JS；

2.可能是该网站禁止了 iframe 的加载，请联系工程师修改配置；

3.可能是工程师加载 js 代码时的项目 ID 填写有误（项目 ID 没有空格）；

4.有可能复写 window 对象：可视化圈选时候，必须要保证您的网站与 GrowingIO 平台之间的通信。如果 window.top, window.parent, window.name, window.location 被复写，将导致无法圈选。

9.能否在 iframe 中进行圈选？

GrowingIO 是使用 iframe 来加载目标网页进行可视化定义的。如果目标网站禁止了 iframe 加载，就无法正常定义标签，当点击某个按钮的时候，页面无法发生跳转且命令行显示：

Refused to display '**' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

此时只允许同个顶级域名加载，因此需要设置运行 iframe 加载，如果您的网站使用 https 协议，需将配置修改成：

X-Frame-Options: Allow-From https://www.growingio.com

仍有疑问？请参考常见问题－圈选部分。

results matching ""

    No results matching ""