CN112783783A - 网页埋点方法、装置、设备及可读存储介质 - Google Patents

网页埋点方法、装置、设备及可读存储介质 Download PDF

Info

Publication number
CN112783783A
CN112783783A CN202110126988.6A CN202110126988A CN112783783A CN 112783783 A CN112783783 A CN 112783783A CN 202110126988 A CN202110126988 A CN 202110126988A CN 112783783 A CN112783783 A CN 112783783A
Authority
CN
China
Prior art keywords
style
interface
reporting
display element
switching
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110126988.6A
Other languages
English (en)
Inventor
潘佳志
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Fanxing Huyu IT Co Ltd
Original Assignee
Guangzhou Fanxing Huyu IT Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Fanxing Huyu IT Co Ltd filed Critical Guangzhou Fanxing Huyu IT Co Ltd
Priority to CN202110126988.6A priority Critical patent/CN112783783A/zh
Publication of CN112783783A publication Critical patent/CN112783783A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/3668—Software testing
    • G06F11/3672—Test management
    • G06F11/3684—Test management for test design, e.g. generating new test cases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
    • G06F11/3438—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment monitoring of user actions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/3668—Software testing
    • G06F11/3672—Test management
    • G06F11/3688—Test management for test execution, e.g. scheduling of test suites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
    • G06F9/4451—User profiles; Roaming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开了一种网页埋点方法、装置、设备及可读存储介质，涉及数据分析领域。该方法包括：显示目标网页界面，目标网页界面中显示有界面显示元素，界面显示元素显示为第一样式；接收显示元素切换信号，显示元素切换信号用于指示将界面显示元素由第一样式切换为第二样式；响应于显示元素切换信号，从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址；响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，切换事件用于指示服务器基于切换事件生成第二样式对应的埋点数据。无需编写大量JavaScript代码即可实现埋点上报，对网页内的样式实现简单快速的上报，节省了一定的开发成本。

Description

网页埋点方法、装置、设备及可读存储介质
技术领域
本申请实施例涉及数据分析领域，特别涉及一种网页埋点方法、装置、设备及可读存储介质。
背景技术
埋点技术是网站和应用程序等产品进行日常改进以及数据分析的数据采集基础，根据采集得到的用户行为数据进行数据分析，进而更加合理地安排运营计划让网站和应用程序等产品走向更好的方向。
相关技术中的网页埋点方案，通过预先编写JavaScript脚本监听用户的操作行为进行埋点统计上报。
然而，上述方案中，对网页是否应用某种层叠样式表(Cascading Style Sheets，简称CSS)的统计，开发人员需要编写完整的埋点代码，监控用户行为，完成更换网页皮肤样式的埋点统计，所需开发成本较高。
发明内容
本申请实施例提供了一种网页埋点方法、装置、设备及可读存储介质，可以减少上报埋点统信息时的开发成本。所述技术方案如下：
一方面，提供了一种网页埋点方法，所述方法包括：
显示目标网页界面，所述目标网页界面中显示有界面显示元素，所述界面显示元素显示为第一样式；
接收显示元素切换信号，所述显示元素切换信号用于指示将所述界面显示元素由所述第一样式切换为第二样式；
响应于所述显示元素切换信号，从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址；
响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，所述切换事件用于指示所述服务器基于所述切换事件生成所述第二样式对应的埋点数据。
在一种可选的实施例中，所述配置文件中包括所述目标网页界面对应的层叠样式表CSS文件；
所述从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址包括：
从所述目标网页界面对应的所述层叠样式表CSS文件内获取与所述第二样式对应的所述上报接口地址。
在一种可选的实施例中，所述从所述目标网页界面对应的所述层叠样式表CSS文件内获取与所述第二样式对应的所述上报接口地址，还包括：
确定所述第二样式对应的样式名；
基于所述样式名，从所述层叠样式表CSS文件内确定与所述样式名对应的所述上报接口地址。
在一种可选的实施例中，所述方法还包括：
响应于所述显示元素切换信号，在所述目标网页界面中以延时加载方式加载所述第二样式的所述界面显示元素。
在一种可选的实施例中，所述响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，包括：
响应于所述第二样式的延时加载过程结束，向所述服务器上报所述延时加载事件，所述延时加载事件用于指示所述服务器基于所述延时加载事件生成所述第二样式对应的所述埋点数据。
在一种可选的实施例中，所述目标网页界面中还包括与所述第二样式对应的切换控件；
所述接收显示元素切换信号，包括：
接收在所述切换控件上的第一触发操作，所述切换控件上包括所述第二样式对应的缩略图；
基于所述第一触发操作生成所述显示元素切换信号。
在一种可选的实施例中，所述接收显示元素切换信号，包括：
接收在所述界面显示元素上的第二触发操作；
基于所述第二触发操作以预设切换顺序确定排列在所述第一样式之后的所述第二样式，并生成所述显示元素切换信号。
在一种可选的实施例中，所述向所述上报接口地址对应的服务器上报切换事件包括：
将所述上报接口地址作为目标接收地址，确定与所述目标接收地址对应的所述服务器；
向所述服务器发送与所述第二样式对应的地址信息，所述地址信息包括与所述第二样式对应的所述样式名。
另一方面，提供了一种网页埋点装置，所述装置包括：
显示模块，用于显示目标网页界面，所述目标网页界面中显示有界面显示元素，所述界面显示元素显示为第一样式；
切换模块，用于接收显示元素切换信号，所述显示元素切换信号用于指示将所述界面显示元素由所述第一样式切换为第二样式；
获取模块，用于响应于所述显示元素切换信号，从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址；
上报模块，用于响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，所述切换事件用于指示所述服务器基于所述切换事件生成所述第二样式对应的埋点数据。
另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述本申请实施例中任一所述的网页埋点方法。
另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述本申请实施例中任一所述的网页埋点方法。
另一方面，提供了一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得计算机执行如上述本申请实施例中任一所述的交换资源的支付方法。
本申请实施例提供的技术方案带来的有益效果至少包括：
当用户在目标网页界面内触发元素切换信号时，通过从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址，响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，并生成与第二样式对应的埋点数据。无需编写大量JavaScript代码即可实现埋点上报，对网页内的样式实现简单快速的上报，并生成对应样式的埋点数据，节省了一定的开发成本。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请一个示例性实施例提供的实施环境示意图；
图2是本申请一个示例性实施例提供的网页埋点方法的流程图；
图3是本申请另一个示例性实施例提供的网页埋点方法的流程图；
图4是基于图3提供的一个目标网页的界面示意图；
图5是本申请一个示例性实施例提供的网页埋点装置的结构框图；
图6是本申请另一个示例性实施例提供的网页埋点装置的结构框图；
图7是本申请一个示例性的实施例提供的服务器的结构框图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
图1是本申请一个示例性实施例提供的实施环境示意图，如图1所示，该实施环境中包括终端110和服务器120，且终端110和服务器120通信连接。
可选的，用户可在终端110中浏览网页，网页中包括界面显示元素，该界面显示元素可以实现为网页更换背景样式、整体网页皮肤。终端110接收用户在网页上的显示元素切换信号，将当前网页显示的第一样式切换至第二样式；终端110响应于显示元素切换信号，从当前网页对应的配置文件中获取与第二样式对应的接口地址，并向接口地址对应的服务器120上报该切换事件，该切换事件用于指示当前网页从第一样式切换至第二样式。
可选的，服务器120接收该切换事件，该切换事件中包括第二样式对应的样式名和/或第二样式对应的上报接口地址；根据接口地址生成第二样式对应的埋点信息，该埋点信息中包括第二样式在预设时间内占全部界面显示元素的占比，其中，占比较高用于指示该界面显示元素受用户喜爱。
可选的，终端110还可以用于查看网页内界面显示元素埋点数据的统计信息，服务器120接收统计信息的查询请求，确定查询请求中包含的界面显示元素对应的样式名，并向终端110反馈该样式名对应的统计信息，并显示在终端110的指定区域处，供以用户查看使用次数最多的样式便于用户进行应用。
值得注意的是，上述终端110可以实现为手机、平板电脑、可穿戴设备、便携式膝上笔记本电脑等移动终端，也可以实现为台式电脑等终端，本申请实施例对此不加以限定。可选的，终端110还可以是提供网站开发、开发文件编译、埋点上报接口地址设置以及埋点数据上传的任何设备。例如个人计算机(Personal Computer，简称PC机)、便携式计算机(例如笔记本电脑等)、桌面型计算机等。终端110上还可以安装网站开发所需的工具，例如用于对网站开发文件进行编译打包处理的webpack打包工具等。
在本申请实施例中，上述网站开发文件为层叠样式表CSS文件，开发人员在开发网站时，对网页内的界面显示元素对应的CSS文件内的属性值进行配置上报接口地址的操作，在用户使用该网站时，对界面显示元素对应的样式进行应用(切换)时，终端110直接解析该样式对应的上报接口地址，网页对应的浏览器自动对该上报接口地址发起上报请求，服务器120处理该上报请求并统计该样式对应的埋点数据信息。
上述服务器120可以实现为一台服务器，也可以实现为多台服务器组成的服务器集群，上述服务器120可以实现为物理服务器，也可以实现为云服务器，本申请对此不加以限定。
结合上述实施环境，对本申请实施例中涉及的网页埋点方法进行说明，图2是本申请一个示例性实施例提供的网页埋点方法的流程图，以该方法应用于终端中进行说明，如图2所示，该方法包括：
步骤201，显示目标网页界面，目标网页界面中显示有界面显示元素，界面显示元素显示为第一样式。
在显示目标网页界面之前，开发人员在对目标网站对应的目标网页进行开发时，对该目标网页内所有样式对应的属性值进行配置上报接口地址的操作，其中，该样式用于指示应用于该目标网页界面的背景、皮肤、主题等。以第一样式进行举例，开发人员获取第一样式对应的第一样式名，为第一样式名对应的CSS文件内的预设属性值添加上报接口地址，例如，该目标网站包括A、B两种网页主题，在对应的body元素上对应的样式名分别是“a”、“b”，开发人员对a样式的CSS文件内的background-image属性添加如下网址：background-image:url(“https://logwebs.kkkk.com/fxfhp？aaa＝1”)，其中，https://logwebs.kkkk.com/fxfhp？aaa＝1为a样式对应的埋点上报的接口地址，在实际应用过程中，用户应用a样式对应的网页主题时，该目标网站对应的浏览器对上报接口地址发起请求完成上报。
当开发人员完成对该目标网站的配置并进行该网站的正常使用时，用户通过浏览器访问该目标网站并显示目标网页界面后，该目标网页界面中包括界面显示元素，该界面显示元素可以为应用于该目标网页界面的网页主题、网页背景、网页皮肤等。
当用户通过浏览器访问该目标网站时，该目标网页界面显示有第一样式的界面显示元素，该第一样式可以是开发人员设置的默认界面显示元素，也可以是用户最近一次为该目标网页界面设置的界面显示元素的样式。
步骤202，接收显示元素切换信号，显示元素切换信号用于指示将界面显示元素由第一样式切换为第二样式。
该目标网页界面可包括至少一个界面显示元素，其中至少一个界面显示元素均对应有切换控件，用户点击目标网页界面内的切换控件，完成目标网页界面内的样式切换。下述以第一样式切换至第二样式进行说明：
可选的，接收在第二样式对应的切换控件上的第一触发操作，其中该切换控件实现为第二样式对应的缩略图，或者由开发人员设置的链接至第二样式的独立控件。终端基于该第一触发操作，生成显示元素切换信号，用于指示目标网页界面内的界面显示元素由第一样式切换至第二样式，该第一触发操作可以为点击操作，也可以是双击操作，也可以是长按操作，此处不加以限定。
可选的，用户通过浏览器打开目标网页界面时，目标网页界面内的界面显示元素每间隔预设时间进行循环切换，由用户选择在循环切换过程自己喜欢的样式作为目标界面显示元素。终端接收在界面显示元素上的第二触发操作，基于该第二触发操作以预设切换顺序确定排列在第一样式之后的第二样式，并生成显示元素切换信号。例如，A网页内包括A样式、B样式、C样式在内的三种网页主题，用户打开A网页时，A样式、B样式、C样式按照每隔3秒的时间进行循环切换，用户若喜欢A样式(第一样式)之后的B样式，则将B样式选为最终显示的主题样式(第二样式)。值得注意的是，该预设时间可以由用户自主设置，用户还可以在该目标网页界面内上传至少一个本地皮肤，终端接收至少一个本地皮肤，并将至少一个本地皮肤加入轮换队列，其中，第二触发操作可以为点击操作或者双击操作，此处不加以限定。
步骤203，响应于显示元素切换信号，从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址。
配置文件用于表现超文本标记语言(HyperText Markup Language，简称HTML)或者可扩展标记语言(Extensible Markup Language，简称XML)等网页元素样式的计算机语言。其中该配置文件可以静态地修饰网页中的应用样式，也可以配合脚本动态地对网页中的各个应用样式进行格式化操作，也能够对网页中各个界面显示元素对应的缩略图控件进行像素级控制，拥有对网页内界面显示元素包括的样进行编辑的能力。
本申请实施例中，该配置文件中包括目标网页界面对应的层叠样式表CSS文件，当用户对目标网页界面内样式进行更换时(由第一样式更换至第二样式)，终端从层叠样式表CSS文件内解析第二样式对应的数据包，该数据包中包括第二样式对应的配置内容、第二样式对应的样式名、第二样式对应在层叠样式表CSS文件内的所有属性值、样式名对应的上报接口地址。终端从层叠样式表CSS文件内获取第二样式的样式名以及样式名对应预设属性值的上报接口地址。
终端响应于显示元素切换信号，确定第二样式对应的样式名；基于该样式名从配置文件中获取与第二样式对应的预设属性值；基于该预设属性值，确定第二样式对应的上报接口地址，其中该配置文件中包括目标网页界面对应的层叠样式表CSS文件，也即，终端从层叠样式表CSS文件中获取与第二样式预设属性值对应的上报接口地址。该上报接口地址的配置过程请参见上述步骤201，此处不再详述。值得注意的是，该步骤在具体实现时，目标网页界面内的界面显示元素已切换至第二样式。
步骤204，响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，切换事件用于指示所述服务器基于切换事件生成所述第二样式对应的埋点数据。
当用户选择第二样式作为目标网页界面最终的界面显示元素后，从层叠样式表CSS文件内获取第二样式对应的上报接口地址，终端将该上报接口地址作为目标接收地址，并确定与该目标接收地址对应的服务器；向该服务器发送与第二样式对应的地址信息，该地址信息中包括第一样式对应的样式名、第二样式对应的样式名、上报接口地址中的至少一种。
服务器基于上述切换事件，接收终端发送的地址信息；并基于该地址信息生成与第二样式对应的埋点信息，其中该切换事件用于指示上述过程中由第一样式切换至第二样式对应的事件。可选的，该埋点信息可以用于指示在预设时间段内第二样式在所有样式内的占比情况，也可以用于指示第一样式在所有样式对应的放弃率，也可以用于指示第二样式在预设时间段内的重复使用率。例如，放弃率指由第一样式切换至第二样式后，终端获取第一样式对应的上报接口地址，并通过浏览器向对应的服务器上报第一样式对应的上报接口地址对应的埋点信息，该埋点信息中统计用户放弃使用第一样式对应的统计信息；重复使用率用于指示由第一样式切换至第二样式，其中第一样式由第二样式切换至第一样式后显示的样式，终端在两次元素切换事件中获取两次第二样式对应的上报接口地址，判断获取的两次中是否间隔一个其他样式，若是，则向对应的服务器上报一次第二样式对应的埋点信息，将该埋点信息作为一次第二样式的重复使用率。
综上所述，本实施例提供的网页埋点方法，当用户在目标网页界面内触发元素切换信号时，通过从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址，响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，并生成与第二样式对应的埋点数据。无需编写大量JavaScript代码即可实现埋点上报，对网页内的样式实现简单快速的上报，并生成对应样式的埋点数据，节省了一定的开发成本。
图3是本申请另一个示例性实施例提供的网页埋点方法的流程图，以该方法应用于终端中为例进行说明，如图3所示，该方法包括：
步骤301，显示目标网页界面所述目标界面中显示有界面显示元素，界面显示元素显示为第二样式。
在一种可能的实现方式中，用户通过浏览器查看目标网页界面，该目标网页界面当前的界面显示元素为第二样式，或者，该目标网页界面当前界面显示元素为第一样式，用户点击第二样式对应缩略图的切换控件对第一样式进行切换，将当前界面显示元素从第一样式切换至第二样式。。
步骤302，响应于显示元素切换信号，在目标网页界面中以延时加载方式加载第二样式的界面显示元素。
当目标网页界面处于懒加载时，也即随着页面的滚动才开始该界面内未显示的内容，而此时的第二样式可以是已完整加载与目标网页界面中(也即，用户已经完成浏览第一样式对应的界面样式)，也可以是只显示用户刚打开该目标网页界面时出现的界面区域，本申请对此不加以限定。
可选的，当用户对第二样式对应的切换内容进行懒加载浏览时，判断第二样式的第一内容和第二内容是否处于曝光状态，其中第一内容用于指示第二样式的对应的网页界面的顶端内容是否被用户浏览查看(第二样式对应的第一内容默认处于曝光状态)，第二内容用于第二样式的对应的网页界面的底端内容是否内用户浏览查看；若第一内容和第二内容均处于被用户进行查看，则确定第二样式完整曝光与该目标网页界面中，将此次事件作为第二样式的一次埋点事件。
步骤303，响应于第二样式的延时加载过程结束，向服务器上报延时加载事件，延时加载事件用于指示服务器基于延时加载事件生成第二样式对应的埋点数据。
当第二样式的延时加载过程结束，也即，应用第二样式的目标网页界面被用户完成浏览时，终端确定第二样式对应的样式名；并基于该样式名从层叠样式表CSS文件内获取第二样式的预设属性值对应的上报接口地址，并将该上报接口地址作为目标地址。
基于目标地址确定第二样式对应的服务器，并向服务器发送与第二样式对应的地址信息，该地址信息中包括第二样式对应的曝光率、第二样式的上报接口地址、第二样式对应的样式名中的至少一种。服务器基于该地址信息，生成与第二样式对应的埋点数据信息。
在服务器统计第二样式对应的埋点数据信息之后还可以包括：
终端接收用户对该埋点数据信息的查询请求，从对应的服务器中获取第二样式对应的埋点数据信息，其中，该埋点数据信息中包括第二样式在预设时间内的完整曝光次数和完整曝光时间；终端接收该埋点数据信息，并在预设区域内显示该埋点数据信息，可选的，用户可以将该埋点数据信息进行统一查询并实现埋点数据信息的打印操作。具体请参见下图4，如图4所示，用户通过浏览器访问目标网页401，点击目标网页401内关于界面显示元素更换的控件，打开目标网页界面402，用户通过目标网页界面402内显示的各个样式名对应的数据信息选择皮肤样式进行更换，例如，用户在目标网页401可以看到各个样式名对应的缩略图，用户通过点击该缩略图实现皮肤样式的更换，用户还可以查看到各个皮肤样式对应的数据信息，该数据信息为上述描述中的埋点信息。例如，用户在目标网页界面402内看到第二样式404对应的第二样式的缩略图403以及第二样式的数据信息405，第二样式的数据信息405中展示第二样式404被80％用户选择，用户点击第二样式的缩略图403为目标网页401进行皮肤样式的更换，可以看到，该目标网页的顶部区域对应的浏览界面均应用第二样式404。用户还可以对目标网页界面402内的其他皮肤样式区域406进行选择，其中，用户可根据观看其他皮肤样式区域406内皮肤样式的缩略图进行选择，也可以根据其他皮肤样式区域406内查看各个皮肤样式对应的数据信息进行选择。
综上所述，本实施例提供的网页埋点方法，当用户在目标网页界面内触发元素切换信号时，通过从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址，响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，并生成与第二样式对应的埋点数据。无需编写大量JavaScript代码即可实现埋点上报对网页内的样式实现简单快速的上报，并生成对应样式的埋点数据，节省了一定的开发成本。
本申请的实施例提供的网页埋点方法还可以应用于以下场景中，具体内容如下：
一般当用户在目标网页界面内的应用样式进行选择后，实现应用的埋点数据统计时，通过JavaScript脚本(以下简称Js)发起的Asynchronous JavaScript and XML(异步JavaScript和XML，简称AJAX)请求有同源限制，其中的AJAX请是一种创建快速动态网页的技术，通过后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
当浏览器使用Js脚本发起AJAX请求时会产生同源限制，例如用户访问的网站对应的主域名是ffff.kaaa.com，则使用Js脚本发起AJAX请求时的接口域名只能是ffff.kaaa.com或者xxxx.kaaa.com，那么通过llll.baaa.com这个网址则会因为域名不同源，被浏览器禁止发送埋点上报请求。
若用本申请中的网页埋点方法，开发人员直接在开发该网页时，在不同的样式名的预设属性值内配置不同的且唯一对应的上报接口地址，向服务器发起上报请求时则没有上述提及的同源限制，本申请实施例中，在用户进行样式切换时，终端获取层叠样式表CSS文件中第二样式的background-image属性值对应的上报接口地址。
综上所述，本申请实施例提供的网页埋点方法，当用户在目标网页界面内触发元素切换信号时，通过从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址，响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，并生成与第二样式对应的埋点数据。利用该方案，网站在使用第三方埋点服务系统时也能正常请求完成埋点数据信息的上报，节省了一定的开发成本。
图5是本申请一个示例性实施例提供的交换资源的支付装置的结构框图，如图5所示，该装置包括：显示模块500、切换模块510、获取模块520以及上报模块530；
显示模块500，用于显示目标网页界面，所述目标网页界面中显示有界面显示元素，所述界面显示元素显示为第一样式；
切换模块510，用于接收显示元素切换信号，所述显示元素切换信号用于指示将所述界面显示元素由所述第一样式切换为第二样式；
获取模块520，用于响应于所述显示元素切换信号，从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址；
上报模块530，用于响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，所述切换事件用于指示所述服务器基于所述切换事件生成所述第二样式对应的埋点数据。
在一个可选的实施例中，所述配置文件中包括所述目标网页界面对应的层叠样式表CSS文件；
所述获取模块520，还用于从所述目标网页界面对应的层叠样式表CSS文件内获取与所述第二样式对应的所述上报接口地址。
在一个可选的实施例中，如图6所示，所述装置，还包括：确定模块540；
所述确定模块540，用于确定所述第二样式对应的样式名；基于所述样式名，从所述层叠样式表CSS文件内确定与所述样式名对应的所述上报接口地址。
在一个可选的实施例中，如图6所示，所述装置，还包括：加载模块550；
所述加载模块550，用于响应于所述显示元素切换信号，在所述目标网页界面中以延时加载方式加载所述第二样式的所述界面显示元素。
在一个可选的实施例中，所述上报模块530，还用于响应于所述第二样式的延时加载过程结束，向所述服务器上报所述延时加载事件，所述延时加载事件用于指示所述服务器基于所述延时加载事件生成所述第二样式对应的所述埋点数据。
在一个可选的实施例中，如图6所示，所述装置包括：560生成模块；
所述生成模块560，用于接收在所述界面显示元素上的第二触发操作；基于所述第二触发操作以预设切换顺序确定排列在所述第一样式之后的所述第二样式，并生成所述显示元素切换信号。
在一个可选的实施例中，所述上报模块530，还用于将所述上报接口地址作为目标接收地址，确定与所述目标接收地址对应的所述服务器；向所述服务器发送与所述第二样式对应的地址信息，所述地址信息包括与所述第二样式对应的所述样式名。
综上所述，本实施例提供的网页埋点装置，当用户在目标网页界面内触发元素切换信号时，通过从目标网页界面对应的配置文件中获取与第二样式对应的上报接口地址，响应于第二样式的切换，向上报接口地址对应的服务器上报切换事件，并生成与第二样式对应的埋点数据。无需编写大量JavaScript代码即可实现埋点上报，对网页内的样式实现简单快速的上报，并生成对应样式的埋点数据，节省了一定的开发成本。
需要说明的是：上述实施例提供的网页埋点装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的网页埋点装置与网页埋点方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
图7示出了本申请一个示例性实施例提供的终端110的结构框图。该终端110可以是便携式移动终端，比如：智能手机、平板电脑、MP4(Moving Picture Experts GroupAudio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端110还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常，终端110包括有：处理器701和存储器702。
处理器701可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器701可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器701也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器701可以集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器701还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器702可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器702还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器702中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器701所执行以实现本申请中方法实施例提供的网页埋点方法。
在一些实施例中，终端110还可选包括有：外围设备接口703和至少一个外围设备。处理器701、存储器702和外围设备接口703之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口703相连。具体地，外围设备包括：射频电路704、显示屏705、摄像头组件706、音频电路707、定位组件708和电源709中的至少一种。
本领域技术人员可以理解，图7中示出的结构并不构成对终端110的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
上述存储器还包括一个或者一个以上的程序，一个或者一个以上程序存储于存储器中，被配置由CPU执行。
本申请的实施例还提供了一种计算机设备，该计算手机设备包括处理器和存储器，该存储器中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述各方法实施例提供的网页埋点方法。
本申请的实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行，以实现上述各方法实施例提供的网页埋点方法。
可选地，该计算机可读存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、固态硬盘(SSD，Solid State Drives)或光盘等。其中，随机存取记忆体可以包括电阻式随机存取记忆体(ReRAM,Resistance RandomAccess Memory)和动态随机存取存储器(DRAM，Dynamic Random Access Memory)。上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (11)

1.一种网页埋点方法，其特征在于，所述方法包括：
显示目标网页界面，所述目标网页界面中显示有界面显示元素，所述界面显示元素显示为第一样式；
接收显示元素切换信号，所述显示元素切换信号用于指示将所述界面显示元素由所述第一样式切换为第二样式；
响应于所述显示元素切换信号，从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址；
响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，所述切换事件用于指示所述服务器基于所述切换事件生成所述第二样式对应的埋点数据。
2.根据权利要求1所述的方法，其特征在于，所述配置文件中包括所述目标网页界面对应的层叠样式表CSS文件；
所述从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址包括：
从所述目标网页界面对应的所述层叠样式表CSS文件内获取与所述第二样式对应的所述上报接口地址。
3.根据权利要求2所述的方法，其特征在于，所述从所述目标网页界面对应的所述层叠样式表CSS文件内获取与所述第二样式对应的所述上报接口地址，还包括：
确定所述第二样式对应的样式名；
基于所述样式名，从所述层叠样式表CSS文件内确定与所述样式名对应的所述上报接口地址。
4.根据权利要求1所述的方法，其特征在于，所述方法还包括：
响应于所述显示元素切换信号，在所述目标网页界面中以延时加载方式加载所述第二样式的所述界面显示元素。
5.根据权利要求4所述的方法，其特征在于，所述响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，包括：
响应于所述第二样式的延时加载过程结束，向所述服务器上报所述延时加载事件，所述延时加载事件用于指示所述服务器基于所述延时加载事件生成所述第二样式对应的所述埋点数据。
6.根据权利要求1至5任一所述的方法，其特征在于，所述目标网页界面中还包括与所述第二样式对应的切换控件；
所述接收显示元素切换信号，包括：
接收在所述切换控件上的第一触发操作，所述切换控件上包括所述第二样式对应的缩略图；
基于所述第一触发操作生成所述显示元素切换信号。
7.根据权利要求1至5任一所述的方法，其特征在于，所述接收显示元素切换信号，包括：
接收在所述界面显示元素上的第二触发操作；
基于所述第二触发操作以预设切换顺序确定排列在所述第一样式之后的所述第二样式，并生成所述显示元素切换信号。
8.根据权利要求1至5任一所述的方法，其特征在于，所述向所述上报接口地址对应的服务器上报切换事件包括：
将所述上报接口地址作为目标接收地址，确定与所述目标接收地址对应的所述服务器；
向所述服务器发送与所述第二样式对应的地址信息，所述地址信息包括与所述第二样式对应的所述样式名。
9.一种网页埋点装置，其特征在于，所述装置包括：
显示模块，用于显示目标网页界面，所述目标网页界面中显示有界面显示元素，所述界面显示元素显示为第一样式；
切换模块，用于接收显示元素切换信号，所述显示元素切换信号用于指示将所述界面显示元素由所述第一样式切换为第二样式；
获取模块，用于响应于所述显示元素切换信号，从所述目标网页界面对应的配置文件中获取与所述第二样式对应的上报接口地址；
上报模块，用于响应于所述第二样式的切换，向所述上报接口地址对应的服务器上报切换事件，所述切换事件用于指示所述服务器基于所述切换事件生成所述第二样式对应的埋点数据。
10.一种计算机设备，其特征在于，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至8任一所述的网页埋点方法。
11.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至8任一所述的网页埋点方法。
CN202110126988.6A 2021-01-29 2021-01-29 网页埋点方法、装置、设备及可读存储介质 Pending CN112783783A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110126988.6A CN112783783A (zh) 2021-01-29 2021-01-29 网页埋点方法、装置、设备及可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110126988.6A CN112783783A (zh) 2021-01-29 2021-01-29 网页埋点方法、装置、设备及可读存储介质

Publications (1)

Publication Number Publication Date
CN112783783A true CN112783783A (zh) 2021-05-11

Family

ID=75759812

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110126988.6A Pending CN112783783A (zh) 2021-01-29 2021-01-29 网页埋点方法、装置、设备及可读存储介质

Country Status (1)

Country Link
CN (1) CN112783783A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113467867A (zh) * 2021-06-10 2021-10-01 北京达佳互联信息技术有限公司 信息处理方法、装置、电子设备及存储介质
CN113467663A (zh) * 2021-09-06 2021-10-01 北京达佳互联信息技术有限公司 界面配置方法、装置、计算机设备及介质
CN113868565A (zh) * 2021-09-23 2021-12-31 深圳市腾讯网域计算机网络有限公司 皮肤样式的文件编辑方法及装置
CN114416603A (zh) * 2022-03-31 2022-04-29 北京搜狐新动力信息技术有限公司 Ui元素测试方法、装置、存储介质和设备
CN114489882A (zh) * 2021-12-16 2022-05-13 成都鲁易科技有限公司 浏览器动态皮肤的实现方法及装置、存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150170070A1 (en) * 2013-08-05 2015-06-18 Tencent Technology (Shenzhen) Company Limited Method, apparatus, and system for monitoring website
CN105022841A (zh) * 2015-08-19 2015-11-04 上海斐讯数据通信技术有限公司 界面主题的调整系统及其方法
CN111158998A (zh) * 2019-12-27 2020-05-15 北京达佳互联信息技术有限公司 一种埋点数据的显示方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150170070A1 (en) * 2013-08-05 2015-06-18 Tencent Technology (Shenzhen) Company Limited Method, apparatus, and system for monitoring website
CN105022841A (zh) * 2015-08-19 2015-11-04 上海斐讯数据通信技术有限公司 界面主题的调整系统及其方法
CN111158998A (zh) * 2019-12-27 2020-05-15 北京达佳互联信息技术有限公司 一种埋点数据的显示方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
HAOROOMS: "利用空白gif图片，实现数据上报，数据埋点", Retrieved from the Internet <URL:https://www.haorooms.com/post/css_data_up#:~:text=css%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E4%B8%8A%E6%8A%A5%EF%BC%8C%E6%95%B0%E6%8D%AE%E5%9F%8B%E7%82%B9%E3%80%82, %E5%BC%80%E5%8F%91%E4%B8%AD%E7%BB%8F%E5%B8%B8%E9%9C%80%E8%A6%81%E7%BB%9F%E8%AE%A1%E9%A1%B5%E9%9D%A2%E7%82%B9%E5%87%BB%EF%BC%8C%E6%9B%9D%E5%85%89%EF%BC%8C%E5%8C%85%E6%8B%AC%E4%B8%80%E4%BA%9B%E6%95%B0%E6%8D%AE%E5%9F%8B%E7%82%B9%EF%BC%8C%E5%BD%93%E7%84%B6%EF%BC%8C%E5%9F%8B%E7%82%B9%E6%95%B0%E6%8D%AE%E4%B8%8A%E6%8A%A5%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%BE%88%E5%A4%9A%EF%BC%8C%E4%B8%8B%E9%9D%A2%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%AAcss%E7%9A%84%E6%96%B9%E5%BC%8F%E3%80%82> *
开源中国: "让人耳目一新的 CSS 埋点统计", pages 1 - 7, Retrieved from the Internet <URL:https://juejin.cn/post/6844903552406519816> *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113467867A (zh) * 2021-06-10 2021-10-01 北京达佳互联信息技术有限公司 信息处理方法、装置、电子设备及存储介质
CN113467867B (zh) * 2021-06-10 2024-05-07 北京达佳互联信息技术有限公司 信息处理方法、装置、电子设备及存储介质
CN113467663A (zh) * 2021-09-06 2021-10-01 北京达佳互联信息技术有限公司 界面配置方法、装置、计算机设备及介质
CN113467663B (zh) * 2021-09-06 2023-09-05 北京达佳互联信息技术有限公司 界面配置方法、装置、计算机设备及介质
CN113868565A (zh) * 2021-09-23 2021-12-31 深圳市腾讯网域计算机网络有限公司 皮肤样式的文件编辑方法及装置
CN113868565B (zh) * 2021-09-23 2024-05-24 深圳市腾讯网域计算机网络有限公司 皮肤样式的文件编辑方法及装置
CN114489882A (zh) * 2021-12-16 2022-05-13 成都鲁易科技有限公司 浏览器动态皮肤的实现方法及装置、存储介质
CN114489882B (zh) * 2021-12-16 2023-05-19 成都鲁易科技有限公司 浏览器动态皮肤的实现方法及装置、存储介质
CN114416603A (zh) * 2022-03-31 2022-04-29 北京搜狐新动力信息技术有限公司 Ui元素测试方法、装置、存储介质和设备

Similar Documents

Publication Publication Date Title
CN112783783A (zh) 网页埋点方法、装置、设备及可读存储介质
TWI690812B (zh) 頁面元件動態佈局方法、裝置及客戶端
TWI703463B (zh) 資訊顯示方法、裝置及智能終端
US9116999B2 (en) Pre-fetching of network page content
CN107085580B (zh) 客户端展示页面的方法及客户端
CN104133828A (zh) 用于html文档的拖放剪贴板
US20090193363A1 (en) Representing Multiple Computing Resources Within A Predefined Region Of A Graphical User Interface For Displaying A Single Icon
JP2022033689A (ja) ページのテーマを決定するための方法、装置、電子機器、コンピュータ可読記憶媒体及びコンピュータプログラム
CN111596911B (zh) 生成控件的方法、装置、计算机设备和存储介质
CN110968314B (zh) 一种页面生成方法及装置
US20160248890A1 (en) Hybrid native networked applications
CN109040767B (zh) 一种直播间加载方法、系统、服务器及存储介质
CN110262749B (zh) 一种网页操作方法、装置、容器、设备及介质
CN115309470A (zh) 微件的加载方法、装置、设备以及存储介质
CN113792208B (zh) 基于网页的图片交互方法、装置、设备、介质及程序产品
CN108664191B (zh) 系统访问方法及装置
CN117724714A (zh) 工作流创建方法、装置、电子设备和计算机可读存储介质
CN111459686A (zh) 队列消息存储转发方法、系统及具操作系统的计算机装置
CN113626032B (zh) 列表页的配置方法、装置及存储介质
CN113688345B (zh) 一种页面切换方法、装置及计算设备
CN114647411A (zh) 编程界面加载方法、装置、电子设备及存储介质
CN108268298A (zh) 桌面图标的生成方法、装置、存储介质及电子设备
CN114063958A (zh) 页面分屏显示方法及装置
KR102191458B1 (ko) 웹 데이터 수집 장치 및 방법
CN113849195A (zh) 应用程序加载方法、装置、存储介质以及终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination