一种可视化埋点的设置方法、系统、设备及其存储介质与流程

本发明涉及网络信息技术领域，具体涉及一种可视化埋点的设置方法、设备、系统以及存储有一种可视化埋点的设置方法的电子存储介质。

背景技术：

随着网络技术的快速发展，人们在日常生活中常常会通过网站或app进行网上购物、获取资讯消息、进行网上社交活动等活动；而在现有的网站或app中，开发人员通常会在页面中设置埋点的方式来获取用户的操作行为，其中，该埋点是指在页面界面中植入若干的固定代码，用于统计用户在界面上的操作行为，然后根据用户的操作行为激活与该操作行为相耦合的对象模块。

而在现有技术中，在页面中植入或修改埋点时，均需要开发人员获取页面中待植入埋点的视图代码，然后再对植入位置的视图代码进行重新编写或修改；但由于其所获取到的视图的代码，内容并不直观，故业务人员无法确定埋点所植入的视图是否正确，因此，网站或app在后续还需要进行多次的调试才能进行上线，其工作复杂，效率较低。

技术实现要素：

为克服上述缺陷，本发明的目的即在于提供一种可显示植入埋点的页面的埋点设置方法、系统、设备以及其存储介质。

本发明的目的是通过以下技术方案来实现的：

本发明是一种可视化埋点的设置方法，包括：

在页面中对待植入埋点的目标视图进行触发；

对被触发的目标视图在所述页面中的位置进行定位，并在定位后获取与所述目标视图的内容相关联的代码；

根据所获取到的代码内容，对所述代码内容相对应的图像进行显示；

在对图像进行显示后，将埋点控件的代码植入到所述目标视图的代码，得到埋点事件代码，并将所述埋点事件代码进行上报。

在本发明中，对所述代码内容相对应的图像进行显示之后包括：

判断所显示的图像是否有误，如无误，则进行将埋点控件的代码植入到所述目标视图的代码。

在本发明中，所述在页面中对待植入埋点的目标视图进行触发之前包括：

中断所有控制事件的输入。

在本发明中，所述对被触发的目标视图在所述页面中的位置进行定位包括：

获取被触发目标视图所在页面的响应链，并获取被触发目标视图的在所述页面中的层级。

在本发明中，所述获取与所述目标视图的内容相关联的代码包括：

判断所述目标视图中是否存在有与文本和/或图片相关的代码，若存在，则对所述文本和/或图片相关的代码进行提取，作为与所述目标视图的内容相关联的代码。

在本发明中，所述判断所述目标视图中是否存在有与文本和/或图片相关的代码还包括：

若不存在，则判断与所述目标视图位置相邻的相邻视图中是否存在文本和/或图片相关的代码，若相邻视图中存在相关的代码，则将所获取到的与文本和/或图片相关的代码作为与所述目标视图的内容相关联的代码。

在本发明中，所述判断与所述目标视图位置相邻的相邻视图中是否存在文本和/或图片相关的代码还包括：

若相邻视图中不存在相关的代码，则将目标视图进行截图，并将所述截图进行编码后，得到与所述目标视图的内容相关联的代码。

本发明是一种可视化埋点的设置系统，其包括：

视图触发模块，所述视图触发模块用于在页面中对待植入埋点的目标视图进行触发；

视图定位模块，所述视图定位模块与所述视图触发模块相连接，用于对被触发的目标视图在所述页面中的位置进行定位；

代码获取模块，所述代码获取模块与所述视图定位模块相连接，用于在定位后获取与所述目标视图的内容相关联的代码；

视图显示模块，所述视图显示模块与所述代码获取模块相连接，用于根据所获取到的代码内容，对所述代码内容相对应的图像进行显示；

埋点植入模块，所述埋点植入模块与所述代码获取模块相连接，用于在对图像进行显示后，将埋点控件的代码植入到所述目标视图的代码，得到埋点事件代码；

埋点上报模块，所述埋点上报模块分别与所述埋点植入模块和服务器相连接，用于并将所述埋点事件代码上报至服务器中。

本发明是一种电子设备，所述电子设备包括：

处理器；

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如上所述的可视化埋点的设置方法。

本发明是一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如上所述的可视化埋点的设置方法。

本发明以触发的形式获取到待植入埋点的视图，然后对该视图进行展示，使得业务人员能直观地获取到视图的内容，使得埋点能准确地导入，有效地减少了后续调试的流程，工作较为简单，工作效率较高。

附图说明

为了易于说明，本发明由下述的较佳实施例及附图作详细描述。

图1为本发明可视化埋点的设置方法一个实施例的工作流程示意图；

图2为本发明可视化埋点的设置方法另一个实施例的工作流程示意图；

图3为本发明埋点动态设置的系统一个实施例的逻辑结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在本发明的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”、“顺时针”、“逆时针”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接。可以是机械连接，也可以是电连接。可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

下面以一个app的实施例为例，对本发明的一种可视化埋点的设置方法进行具体描述，请参阅图1，其包括：

s101.对目标视图进行触发

通过点击app的页面中的目标视图，对页面中对待植入埋点的目标视图进行触发；

s102.定位目标视图并获取其代码

对被触发的目标视图在所述页面中的位置进行定位，而在app中，基本上每次用户操作都是通过点击或者其他手势操作触发app上的某块区域产生的。所以，每次用户操作在app上都会有一个对应的承载区，我们称之为响应区、响应视图。所以，定位用户操作，等价于定位用户操作对应的响应视图，而每个响应视图又会属于某个页面。其中，响应视图属于哪个页面可以通过响应链获得，而同一个页面区分不同的响应视图可以通过视图层级来进行描述；通过响应链和视图层级对目标视图的位置进行定位；并在定位后获取与所述目标视图的内容相关联的代码；

s103.显示被选定视图的图像

根据所获取到的代码内容，对所述代码内容相对应的图像进行显示；由于在选定目标视图时，有可能会因为各种原因导致选定上的偏差，故对被选定的视图进行显示，有利于开发者判断选定是否有误。

s104.植入埋点控件

在对图像进行显示后，将埋点控件的代码植入到所述目标视图的代码，得到埋点事件代码；该埋点控件可预先进行设置，埋点控件中包含有埋点事件如：单击、双击、上下拉动、左右拉动等。

s105.将埋点事件代码进行上报

将所述埋点事件代码上报至服务器中，当服务器对数据进行更新后，即可响应相应的埋点事件；即当用户在已经进行埋点的视图中进行埋点事件，则服务器将会进行响应。

下面以另一个实施例为例，对本发明的一种可视化埋点的设置方法进行具体描述，请参阅图2，其包括：

s201.中断控制事件的输入

中断所有控制事件的输入；如，当前点击登录按钮，app此时就不会去执行登录的代码逻辑。

s202.对目标视图进行触发

通过点击app的页面中的目标视图，对页面中对待植入埋点的目标视图进行触发；

s203.定位目标视图

对被触发的目标视图在所述页面中的位置进行定位，而在app中，基本上每次用户操作都是通过点击或者其他手势操作触发app上的某块区域产生的。所以，每次用户操作在app上都会有一个对应的承载区，我们称之为响应区、响应视图。所以，定位用户操作，等价于定位用户操作对应的响应视图，而每个响应视图又会属于某个页面。其中，响应视图属于哪个页面可以通过响应链获得，而同一个页面区分不同的响应视图可以通过视图层级来进行描述；其中，通过获取被触发目标视图所在页面的响应链，并获取被触发目标视图的在所述页面中的层级，获取目标视图在所述页面中的位置；并在定位后获取与所述目标视图的内容相关联的代码；

s204.判断当前视图中是否存在相关的代码

判断所述目标视图中是否存在有与文本和/或图片相关的base64代码，若存在，则对所述文本和/或图片相关的代码进行提取，作为与所述目标视图的内容相关联的代码。

s205.判断相邻视图中是否存在相关的代码

若不存在，则判断与所述目标视图位置相邻的相邻视图中是否存在文本和/或图片相关的base64代码，若相邻视图中存在相关的代码，则将所获取到的与文本和/或图片相关的代码作为与所述目标视图的内容相关联的代码。

s206.将目标视图进行截图获取相关的代码

若相邻视图中不存在相关的base64代码，则将目标视图进行截图，并将所述截图进行编码后，得到与所述目标视图的内容相关联的代码。

s207.显示被选定视图的图像

根据所获取到的代码内容，对所述代码内容相对应的图像进行显示；由于在选定目标视图时，有可能会因为各种原因导致选定上的偏差，故对被选定的视图进行显示，有利于开发者判断选定是否有误。

s208.判断所显示的图像是否有误

判断所显示的图像是否有误，如无误，则进行将埋点控件的代码植入到所述目标视图的代码。

s209.植入埋点控件

在对图像进行显示后，将埋点控件的代码植入到所述目标视图的代码，得到埋点事件代码；该埋点控件可预先进行设置，埋点控件中包含有埋点事件如：单击、双击、上下拉动、左右拉动等。在植入控件信息之后，为事件计算出唯一标志id，并为该事件取一个名字，或者为补充其他相关信息，然后形成埋点事件代码；

s210.将埋点事件代码进行上报

将所述埋点事件代码上报至服务器中，当服务器对数据进行更新后，即可响应相应的埋点事件；即当用户在已经进行埋点的视图中进行埋点事件，则服务器将会进行响应。

请参看图3，本发明是一种可视化埋点的设置系统，其包括：

视图触发模块301，所述视图触发模块301用于在页面中对待植入埋点的目标视图进行触发。

视图定位模块302，所述视图定位模块302与所述视图触发模块301相连接，用于对被触发的目标视图在所述页面中的位置进行定位；其中，通过获取被触发目标视图所在页面的响应链，并获取被触发目标视图的在所述页面中的层级，以获取目标视图在所述页面中的位置。

代码获取模块303，所述代码获取模块303与所述视图定位模块302相连接，用于在定位后获取与所述目标视图的内容相关联的代码；其中，该相关联的代码包括：文本和/或图片相关的base64代码；其具体包括：直接获取当前视图内容的代码、获取相邻视图内容的代码、将目标视图进行截图后获取其内容的代码三种获取方式。

视图显示模块304，所述视图显示模块304与所述代码获取模块303相连接，用于根据所获取到的代码内容，对所述代码内容相对应的图像进行显示。

埋点植入模块305，所述埋点植入模块305与所述代码获取模块303相连接，用于在对图像进行显示后，将埋点控件的代码植入到所述目标视图的代码，得到埋点事件代码。

埋点上报模块306，所述埋点上报模块306分别与所述埋点植入模块305和服务器相连接，用于并将所述埋点事件代码上报至服务器中。

本发明是一种电子设备，所述电子设备包括：

处理器；存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如上所述的可视化埋点的设置方法。

本实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的模块也可以设置在处理器中。其中，这些模块的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现如上述实施例中所述的可视化埋点的设置方法。

本发明还可以是一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如上所述的可视化埋点的设置方法。例如，本实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行上述方法流程所示的方法的程序代码。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。

在本说明书的描述中，参考术语“一个实施方式”、“一些实施方式”、“示意性实施方式”、“示例”、“具体示例”、或“一些示例”等的描述意指结合实施方式或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施方式或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施方式或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施方式或示例中以合适的方式结合。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。