Website change detection

Systems and techniques may be used for providing website change detection. An example technique may include processing snapshots of a website, for example on a first day and a second day to produce a set of features of the website. The technique may include comparing at least one of the set of features from the first day to at least one of the set of features from the second day, for example using a distance function. A change score may be determined, the change score corresponding to at least one of a deleted feature, an added feature, or an unchanged feature of the website from the first day to the second day. The technique may include outputting the change score (e.g., for display).

BACKGROUND

Web commerce has become a nearly universal way to sell products. Managing web commerce websites is often done by a team of people, who use web analytics to make design, structural, and interactive choices for the web commerce websites. Sales data from a website may be used to determine whether a product is successful. However, the sales data does not tell the entire story, nor does it provide sufficient data to make proactive decisions.

DETAILED DESCRIPTION

Systems and techniques described herein perform website change detection, for example to notify a user when a website has changed its structure. These systems and techniques may compare two snapshots of a website, for example at different times, on different days, etc. The comparison may include a feature-by-feature comparison of features of the two snapshots to determine whether a change has occurred. For example a distance function may be used to evaluate feature changes from one snapshot to the other. A change score may be determined using the distance function, the change score representing changes such as a deleted feature, an added feature, or an unchanged feature of the website from one snapshot to the other. The change score may be used to indicate whether a change has occurred, for example by comparing the change score to a threshold.

Merchants and website owners or operators typically want to know statistical information about items that are presented or sold on a website. This statistical information may be specific to where the items appear on the website, including what items are near each other, what items are initially visible or hidden, what items are clicked on, what items are purchased or selected, etc. However, a technological problem arises, particularly in aggregating or comparing these types of statistical information, when the website changes structurally (e.g., when a feature of the website is changed). When a structural change to the layout of the website occurs, it may be difficult or not useful to compare statistical information from the new layout to the old layout. This technological problem is solved by the technical solutions described herein that determine changes to a website.

The systems and techniques described herein provide a technical solution to the problem of determining changes in a layout of a website. The layout change detection is distinct from content change detection, which may be used to determine changes to text, images, etc. within a particular layout. In some examples, both layout and content may change, while in others only content or only layout may change.

In some examples described herein, a snapshot is discussed (e.g., a comparison between two snapshots). A snapshot is a static version of a webpage that has been displayed, rendered, or output (e.g., displayed on at least one user device at a point in time during a session). A snapshot may be captured, logged, or stored at various points in time throughout a day, for example.

In some examples, a website has different layout versions, such as a first layout for a mobile device and a second layout for a laptop or desktop computer. In an example, layout versions may differ even for a single type of device. For example, depending on a user visiting the same alias, page or URL, the website output may change (e.g., for a logged in user versus a not logged in user, based on a location such as country or state, etc.).

Networked Computing Environment

FIG.1is a block diagram showing an example experience analytics system100that analyzes and quantifies the user experience of users navigating a client's website, mobile websites, and applications. The experience analytics system100can include multiple instances of a member client device102, multiple instances of a customer client device106, and multiple instances of a third-party server108.

The member client device102is associated with a client of the experience analytics system100, where the client that has a website hosted on the client's third-party server108. For example, the client can be a retail store that has an online retail website that is hosted on a third-party server108. An agent of the client (e.g., a web administrator, an employee, etc.) can be the user of the member client device102.

Each of the member client devices102hosts a number of applications, including an experience analytics client104. Each experience analytics client104is communicatively coupled with an experience analytics server system124and third-party servers108via a network110(e.g., the Internet). An experience analytics client104can also communicate with locally-hosted applications using Applications Program Interfaces (APIs).

The member client devices102and the customer client devices106can also host a number of applications including Internet browsing applications (e.g., Chrome, Safari, etc.). The experience analytics client104can also be implemented as a platform that is accessed by the member client device102via an Internet browsing application or implemented as an extension on the Internet browsing application.

Users of the customer client device106can access client's websites that are hosted on the third-party servers108via the network110using the Internet browsing applications. For example, the users of the customer client device106can navigate to a client's online retail website to purchase goods or services from the website. While the user of the customer client device106is navigating the client's website on an Internet browsing application, the Internet browsing application on the customer client device106can also execute a client-side script (e.g., JavaScript (.*js)) such as an experience analytics script122. In one example, the experience analytics script122is hosted on the third-party server108with the client's website and processed by the Internet browsing application on the customer client device106. The experience analytics script122can incorporate a scripting language (e.g., a .*js file or a .json file).

In certain examples, a client's native application (e.g., ANDROID™ or IOS™ Application) is downloaded on the customer client device106. In this example, the client's native application including the experience analytics script122is programmed in JavaScript leveraging a Software Development Kit (SDK) provided by the experience analytics server system124. The SDK includes Application Programming Interfaces (APIs) with functions that can be called or invoked by the client's native application.

In one example, the experience analytics script122records data including the changes in the interface of the website being displayed on the customer client device106, the elements on the website being displayed or visible on the interface of the customer client device106, the text inputs by the user into the website, a movement of a mouse (or touchpad or touch screen) cursor and mouse (or touchpad or touch screen) clicks on the interface of the website, etc. The experience analytics script122transmits the data to experience analytics server system124via the network110. In another example, the experience analytics script122transmits the data to the third-party server108and the data can be transmitted from the third-party server108to the experience analytics server system124via the network110.

An experience analytics client104is able to communicate and exchange data with the experience analytics server system124via the network110. The data exchanged between the experience analytics client104and the experience analytics server system124, includes functions (e.g., commands to invoke functions) as well as payload data (e.g., website data, texts reporting errors, insights, merchandising information, adaptability information, images, graphs providing visualizations of experience analytics, session replay videos, zoning and overlays to be applied on the website, etc.).

The experience analytics server system124supports various services and operations that are provided to the experience analytics client104. Such operations include transmitting data to and receiving data from the experience analytics client104. Data exchanges to and from the experience analytics server system124are invoked and controlled through functions available via user interfaces (UIs) of the experience analytics client104.

The experience analytics server system124provides server-side functionality via the network110to a particular experience analytics client104. While certain functions of the experience analytics system100are described herein as being performed by either an experience analytics client104or by the experience analytics server system124, the location of certain functionality either within the experience analytics client104or the experience analytics server system124may be a design choice. For example, it may be technically preferable to initially deploy certain technology and functionality within the experience analytics server system124but to later migrate this technology and functionality to the experience analytics client104where a member client device102has sufficient processing capacity.

Turning now specifically to the experience analytics server system124, an Application Program Interface (API) server114is coupled to, and provides a programmatic interface to, application servers112. The application servers112are communicatively coupled to a database server118, which facilitates access to a database300that stores data associated with experience analytics processed by the application servers112. Similarly, a web server120is coupled to the application servers112, and provides web-based interfaces to the application servers112. To this end, the web server120processes incoming network requests over the Hypertext Transfer Protocol (HTTP) and several other related protocols.

The Application Program Interface (API) server114receives and transmits message data (e.g., commands and message payloads) between the member client device102and the application servers112. Specifically, the Application Program Interface (API) server114provides a set of interfaces (e.g., routines and protocols) that can be called or queried by the experience analytics client104or the experience analytics script122in order to invoke functionality of the application servers112. The Application Program Interface (API) server114exposes to the experience analytics client104various functions supported by the application servers112, including generating information on errors, insights, merchandising information, adaptability information, images, graphs providing visualizations of experience analytics, session replay videos, zoning and overlays to be applied on the website, etc.

The application servers112host a number of server applications and subsystems, including for example an experience analytics server116. The experience analytics server116implements a number of data processing technologies and functions, particularly related to the aggregation and other processing of data including the changes in the interface of the website being displayed on the customer client device106, the elements on the website being displayed or visible on the interface of the customer client device106, the text inputs by the user into the website, a movement of a mouse (or touchpad) cursor and mouse (or touchpad) clicks on the interface of the website, etc. received from multiple instances of the experience analytics script122on customer client devices106. The experience analytics server116implements processing technologies and functions, related to generating user interfaces including information on errors, insights, merchandising information, adaptability information, images, graphs providing visualizations of experience analytics, session replay videos, zoning and overlays to be applied on the website, feedback provided by the user into feedback forms or widgets on the website, etc. Other processor and memory intensive processing of data may also be performed server-side by the experience analytics server116, in view of the hardware requirements for such processing.

System Architecture

FIG.2is a block diagram illustrating further details regarding the experience analytics system100according to some examples. Specifically, the experience analytics system100is shown to comprise the experience analytics client104and the experience analytics server116. The experience analytics system100embodies a number of subsystems, which are supported on the client-side by the experience analytics client104and on the server-side by the experience analytics server116. These subsystems include, for example, a data management system202, a data analysis system204, a zoning system206, a session replay system208, a journey system210, a merchandising system212, an adaptability system214, an insights system216, an errors system218, and an application conversion system220.

The data management system202is responsible for receiving functions or data from the member client devices102, the experience analytics script122executed by each of the customer client devices106, and the third-party servers108. The data management system202is also responsible for exporting data to the member client devices102or the third-party servers108or between the systems in the experience analytics system100. The data management system202is also configured to manage the third-party integration of the functionalities of experience analytics system100.

The data analysis system204is responsible for analyzing the data received by the data management system202, generating data tags, performing data science and data engineering processes on the data.

The zoning system206is responsible for generating a zoning interface to be displayed by the member client device102via the experience analytics client104. The zoning interface provides a visualization of how the users via the customer client devices106interact with each element on the client's website. The zoning interface can also provide an aggregated view of in-page behaviors by the users via the customer client device106(e.g., clicks, scrolls, navigation). The zoning interface can also provide a side-by-side view of different versions of the client's website for the client's analysis. For example, the zoning system206can identify the zones in a client's website that are associated with a particular element in displayed on the website (e.g., an icon, a text link, etc.). Each zone can be a portion of the website being displayed. The zoning interface can include a view of the client's website. The zoning system206can generate an overlay including data pertaining to each of the zones to be overlaid on the view of the client's website. The data in the overlay can include, for example, the number of views or clicks associated with each zone of the client's website within a period of time, which can be established by the user of the member client device102. In one example, the data can be generated using information from the data analysis system204.

The session replay system208is responsible for generating the session replay interface to be displayed by the member client device102via the experience analytics client104. The session replay interface includes a session replay that is a video reconstructing an individual user's session (e.g., visitor session) on the client's website. The user's session starts when the user arrives into the client's website and ends upon the user's exit from the client's website. A user's session when visiting the client's website on a customer client device106can be reconstructed from the data received from the user's experience analytics script122on customer client devices106. The session replay interface can also include the session replays of a number of different visitor sessions to the client's website within a period of time (e.g., a week, a month, a quarter, etc.). The session replay interface allows the client via the member client device102to select and view each of the session replays. In one example, the session replay interface can also include an identification of events (e.g., failed conversions, angry customers, errors in the website, recommendations or insights) that are displayed and allow the user to navigate to the part in the session replay corresponding to the events such that the client can view and analyze the event.

The journey system210is responsible for generating the journey interface to be displayed by the member client device102via the experience analytics client104. The journey interface includes a visualization of how the visitors progress through the client's website, page-by-page, from entry onto the website to the exit (e.g., in a session). The journey interface can include a visualization that provides a customer journey mapping (e.g., sunburst visualization). This visualization aggregates the data from all of the visitors (e.g., users on different customer client devices106) to the website and illustrates the visited pages in the order in which the pages were visited. The client viewing the journey interface on the member client device102can identify anomalies such as looping behaviors and unexpected drop-offs. The client viewing the journey interface can also assess the reverse journeys (e.g., pages visitors viewed before arriving at a particular page). The journey interface also allows the client to select a specific segment of the visitors to be displayed in the visualization of the customer journey.

The merchandising system212is responsible for generating the merchandising interface to be displayed by the member client device102via the experience analytics client104. The merchandising interface includes merchandising analysis that provides the client with analytics on: the merchandise to be promoted on the website, optimization of sales performance, the items in the client's product catalog on a granular level, competitor pricing, etc. The merchandising interface can, for example, comprise graphical data visualization pertaining to product opportunities, category, brand performance, etc. For instance, the merchandising interface can include the analytics on conversions (e.g., sales, revenue) associated with a placement or zone in the client website.

The adaptability system214is responsible for creating accessible digital experiences for the client's website to be displayed by the customer client devices106for visitors that would benefit from an accessibility-enhanced version of the client's website. For instance, the adaptability system214can improve the digital experience for users with disabilities, such as visual impairments, cognitive disorders, dyslexia, and age-related needs. The adaptability system214can, with proper user permissions, analyze the data from the experience analytics script122to determine whether an accessibility-enhanced version of the client's website is needed, and can generate the accessibility-enhanced version of the client's website to be displayed by the customer client device106.

The insights system216is responsible for analyzing the data from the data management system202and the data analysis system204surface insights that include opportunities as well as issues that are related to the client's website. The insights can also include alerts that notify the client of deviations from a client's normal business metrics. The insights can be displayed by the member client devices102via the experience analytics client104on a dashboard of a user interface, as a pop-up element, as a separate panel, etc. In this example, the insights system216is responsible for generating an insights interface to be displayed by the member client device102via the experience analytics client104. In another example, the insights can be incorporated in another interface such as the zoning interface, the session replay, the journey interface, or the merchandising interface to be displayed by the member client device102.

The errors system218is responsible for analyzing the data from the data management system202and the data analysis system204to identify errors that are affecting the visitors to the client's website and the impact of the errors on the client's business (e.g., revenue loss). The errors can include the location within the user journey in the website and the page that adversely affects (e.g., causes frustration for) the users (e.g., users on customer client devices106visiting the client's website). The errors can also include causes of looping behaviors by the users, in-page issues such as unresponsive calls to action and slow loading pages, etc. The errors can be displayed by the member client devices102via the experience analytics client104on a dashboard of a user interface, as a pop-up element, as a separate panel, etc. In this example, the errors system218is responsible for generating an errors interface to be displayed by the member client device102via the experience analytics client104. In another example, the insights can be incorporated in another interface such as the zoning interface, the session replay, the journey interface, or the merchandising interface to be displayed by the member client device102.

The application conversion system220is responsible for the conversion of the functionalities of the experience analytics server116as provided to a client's website to a client's native mobile applications. For instance, the application conversion system220generates the mobile application version of the zoning interface, the session replay, the journey interface, the merchandising interface, the insights interface, and the errors interface to be displayed by the member client device102via the experience analytics client104. The application conversion system220generates an accessibility-enhanced version of the client's mobile application to be displayed by the customer client devices106.

The feedback system222is responsible for receiving and analyzing data from the data management system202that includes the feedback data received from the client devices. As the visitor progresses through a client's website on the client device, a feedback webpage of the website, a pop-up window or tab, or an overlay can be displayed to receive the visitor's feedback. For instance, a feedback form can be displayed in a pop-up window or tab of the website, an overlay of the website, one of the plurality of webpages of the website, etc. The visitor can provide feedback on, for example, the functionality of the website, aesthetics of the website, on the goods and services associated with the website, etc. The feedback data can include a text input that is included into a feedback form on the website. The feedback data can also include a survey response, a rating that includes an image, an emoticon, or an icon, a screenshot of one of the plurality of webpages, etc. The feedback system222is also responsible for generating feedback interfaces to be displayed by the member client device102via the experience analytics client104.

Data Architecture

FIG.3is a schematic diagram illustrating database300, which may be stored in the database300of the experience analytics server116, according to certain examples. While the content of the database300is shown to comprise a number of tables, it will be appreciated that the data could be stored in other types of data structures (e.g., as an object-oriented database).

The database300includes a data table302, a session table304, a zoning table306, an error table310, an insights table312, a merchandising table314, and a journeys table308.

The data table302stores data regarding the websites and native applications associated with the clients of the experience analytics system100. The data table302can store information on the contents of the website or the native application, the changes in the interface of the website being displayed on the customer client device106, the elements on the website being displayed or visible on the interface of the customer client device106, the text inputs by the user into the website, a movement of a mouse (or touchpad or touch screen) cursor and mouse (or touchpad or touch screen) clicks on the interface of the website, etc. The data table302can also store data tags and results of data science and data engineering processes on the data. The data table302can also store information such as the font, the images, the videos, the native scripts in the website or applications, etc.

The session table304stores session replays for each of the client's websites and native applications.

The zoning table306stores data related to the zoning for each of the client's websites and native applications including the zones to be created and the zoning overlay associated with the websites and native applications.

The journeys table308stores data related to the journey of each visitor to the client's website or through the native application.

The error table310stores data related to the errors generated by the errors system218and the insights table312stores data related to the insights generated by the insights table312.

The merchandising table314stores data associated with the merchandising system212. For example, the data in the merchandising table314can include the product catalog for each of the clients, information on the competitors of each of the clients, the data associated with the products on the websites and applications, the analytics on the product opportunities and the performance of the products based on the zones in the website or application, etc.

The feedback table316stores data associated with the feedback system222. For example, the data in the feedback table316can include the feedback data received from each of the customer client devices106and stored in association with the customer client device106and the website associated with the customer client device106. The feedback data can include, for example, the text input that provides the visitor's (or customer's) feedback on the website, survey response, rating that includes an image, an emoticon, or an icon, a screenshot of one of the plurality of webpages, etc.

The data table302may store layout change information as described herein. For example, the data table302may store change scores for features or an overall change score a website. The data table302may store a changelog or graph, as described herein below.

Technique for Website Change Detection

Although the described flowcharts can show operations as a sequential process, many of the operations can be performed in parallel or concurrently. In addition, the order of the operations may be re-arranged. A process is terminated when its operations are completed. A process may correspond to a method, a procedure, an algorithm, etc. The operations of methods may be performed in whole or in part, may be performed in conjunction with some or all of the operations in other methods, and may be performed by any number of different systems, such as the systems described herein, or any portion thereof, such as a processor included in any of the systems.

FIG.4illustrates a technique400in accordance with an example. The technique400may be used to detect changes to a website.

The technique400includes an operation402to process a first set of snapshots of a website corresponding to a first day, each of the first set of snapshots having a respective first set of features of the website for the first day. The technique400includes an operation404to process a second set of snapshots of the website corresponding to a second day, each of the second set of snapshots having a respective a second set of features of the website for the second day. Features of operation402or404may include features identified from HTML code of the website, such as using a DOM tree. The features may include text, frames, images, etc. The first or second set of snapshots of the website may be captured at different times during the first or second day, respectively (e.g., once every hour, once every few hours, etc.). The respective first set of features or the respective second set of features may correspond to features visible on the website (e.g., only visible features), such as when the website is initially loaded. In this example, initially hidden features maybe disregarded (e.g., filtered out).

The technique400includes an operation406to compare at least one of the respective first set of features to at least one of the respective second set of features using a distance function to determine a change score corresponding to at least one of a deleted feature, an added feature, or an unchanged feature of the website from the first day to the second day. The technique400may use a hash function for each feature of the respective first set of features and the respective second set of features (e.g., for use as an identifier, to compare a feature to another feature, etc.). In an example the distance function compares respective hash values for each feature of the respective first set of features to respective hash values for the respective second set of features. In some examples, the distance function may be calculated by determining a first sum comprising: a sum of an area of deleted features from the respective first set of features plus a sum of an area of inserted features from the respective second set of features, determining a second sum comprising: a sum of areas of all features of the respective first set of features plus a sum of areas of all features of the respective second set of features, and dividing the first sum by the second sum.

Operation406may include comparing each of the respective first set of features to each of the respective second set of features to determine a set of change scores. In this example, the change sore may be selected from the set of change scores (e.g., a minimum change score in the set of change scores). In some examples, determining the change score may include using minimum distance pairs between features of each of the respective first set of features to each of the respective second set of features. For example, with three snapshots for the first day and three for the second day, there may be up to nine distances for a particular feature appearing on the first day. The minimum distance of those nine distances may be used to prevent incidental or temporary changes from affecting the ultimate change score.

The technique400includes an operation408to output the change score. Operation408may include generating a graph of change scores over time, and outputting the graph for display, such as on a user interface. Operation408may include generating a changelog indicating changed features. In some examples, a subset of the changed features from the changelog may be displayed or otherwise output based on a distance threshold corresponding to the changed features. The distance threshold may include a default (e.g., only using changes above a minimum threshold to filter out minor changes) or may be set by a user (e.g., only including large changes).

Machine Architecture

FIG.5is a diagrammatic representation of the machine500within which instructions510(e.g., software, a program, an application, an applet, an application, or other executable code) for causing the machine500to perform any one or more of the methodologies discussed herein may be executed. For example, the instructions510may cause the machine500to execute any one or more of the methods described herein. The instructions510transform the general, non-programmed machine500into a particular machine500programmed to carry out the described and illustrated functions in the manner described. The machine500may operate as a standalone device or may be coupled (e.g., networked) to other machines. In a networked deployment, the machine500may operate in the capacity of a server machine or a client machine in a server-client network environment, or as a peer machine in a peer-to-peer (or distributed) network environment. The machine500may comprise, but not be limited to, a server computer, a client computer, a personal computer (PC), a tablet computer, a laptop computer, a netbook, a set-top box (STB), a personal digital assistant (PDA), an entertainment media system, a cellular telephone, a smartphone, a mobile device, a wearable device (e.g., a smartwatch), a smart home device (e.g., a smart appliance), other smart devices, a web appliance, a network router, a network switch, a network bridge, or any machine capable of executing the instructions510, sequentially or otherwise, that specify actions to be taken by the machine500. Further, while only a single machine500is illustrated, the term “machine” shall also be taken to include a collection of machines that individually or jointly execute the instructions510to perform any one or more of the methodologies discussed herein. The machine500, for example, may comprise the member client device102or any one of a number of server devices forming part of the experience analytics server116. In some examples, the machine500may also comprise both client and server systems, with certain operations of a particular method or algorithm being performed on the server-side and with certain operations of the particular method or algorithm being performed on the client-side.

The machine500may include processors504, memory506, and input/output I/O components502, which may be configured to communicate with each other via a bus540. In an example, the processors504(e.g., a Central Processing Unit (CPU), a Reduced Instruction Set Computing (RISC) Processor, a Complex Instruction Set Computing (CISC) Processor, a Graphics Processing Unit (GPU), a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Radio-Frequency Integrated Circuit (RFIC), another processor, or any suitable combination thereof) may include, for example, a processor508and a processor512that execute the instructions510. The term “processor” is intended to include multi-core processors that may comprise two or more independent processors (sometimes referred to as “cores”) that may execute instructions contemporaneously. AlthoughFIG.5shows multiple processors504, the machine500may include a single processor with a single-core, a single processor with multiple cores (e.g., a multi-core processor), multiple processors with a single core, multiple processors with multiples cores, or any combination thereof.

The memory506includes a main memory514, a static memory516, and a storage unit518, both accessible to the processors504via the bus540. The main memory506, the static memory516, and storage unit518store the instructions510embodying any one or more of the methodologies or functions described herein. The instructions510may also reside, completely or partially, within the main memory514, within the static memory516, within machine-readable medium520within the storage unit518, within at least one of the processors504(e.g., within the processor's cache memory), or any suitable combination thereof, during execution thereof by the machine500.

The I/O components502may include a wide variety of components to receive input, provide output, produce output, transmit information, exchange information, capture measurements, and so on. The specific I/O components502that are included in a particular machine will depend on the type of machine. For example, portable machines such as mobile phones may include a touch input device or other such input mechanisms, while a headless server machine will likely not include such a touch input device. It will be appreciated that the I/O components502may include many other components that are not shown inFIG.5. In various examples, the I/O components502may include user output components526and user input components528. The user output components526may include visual components (e.g., a display such as a plasma display panel (PDP), a light-emitting diode (LED) display, a liquid crystal display (LCD), a projector, or a cathode ray tube (CRT)), acoustic components (e.g., speakers), haptic components (e.g., a vibratory motor, resistance mechanisms), other signal generators, and so forth. The user input components528may include alphanumeric input components (e.g., a keyboard, a touch screen configured to receive alphanumeric input, a photo-optical keyboard, or other alphanumeric input components), point-based input components (e.g., a mouse, a touchpad, a trackball, a joystick, a motion sensor, or another pointing instrument), tactile input components (e.g., a physical button, a touch screen that provides location and force of touches or touch gestures, or other tactile input components), audio input components (e.g., a microphone), and the like.

In further examples, the I/O components502may include biometric components530, motion components532, environmental components534, or position components536, among a wide array of other components. For example, the biometric components530include components to detect expressions (e.g., hand expressions, facial expressions, vocal expressions, body gestures, or eye-tracking), measure biosignals (e.g., blood pressure, heart rate, body temperature, perspiration, or brain waves), identify a person (e.g., voice identification, retinal identification, facial identification, fingerprint identification, or electroencephalogram-based identification), and the like. The motion components532include acceleration sensor components (e.g., accelerometer), gravitation sensor components, rotation sensor components (e.g., gyroscope).

With respect to cameras, the member client device102may have a camera system comprising, for example, front cameras on a front surface of the member client device102and rear cameras on a rear surface of the member client device102. The front cameras may, for example, be used to capture still images and video of a user of the member client device102(e.g., “selfies”). The rear cameras may, for example, be used to capture still images and videos in a more traditional camera mode. In addition to front and rear cameras, the member client device102may also include a 360° camera for capturing 360° photographs and videos.

Further, the camera system of a member client device102may include dual rear cameras (e.g., a primary camera as well as a depth-sensing camera), or even triple, quad or penta rear camera configurations on the front and rear sides of the member client device102. These multiple cameras systems may include a wide camera, an ultra-wide camera, a telephoto camera, a macro camera and a depth sensor, for example.

Communication may be implemented using a wide variety of technologies. The I/O components502further include communication components538operable to couple the machine500to a network522or devices524via respective coupling or connections. For example, the communication components538may include a network interface component or another suitable device to interface with the network522. In further examples, the communication components538may include wired communication components, wireless communication components, cellular communication components, Near Field Communication (NFC) components, Bluetooth® components (e.g., Bluetooth® Low Energy), Wi-Fi® components, and other communication components to provide communication via other modalities. The devices524may be another machine or any of a wide variety of peripheral devices (e.g., a peripheral device coupled via a USB).

The various memories (e.g., main memory514, static memory516, and memory of the processors504) and storage unit518may store one or more sets of instructions and data structures (e.g., software) embodying or used by any one or more of the methodologies or functions described herein. These instructions (e.g., the instructions510), when executed by processors504, cause various operations to implement the disclosed examples.

The instructions510may be transmitted or received over the network522, using a transmission medium, via a network interface device (e.g., a network interface component included in the communication components538) and using any one of several well-known transfer protocols (e.g., hypertext transfer protocol (HTTP)). Similarly, the instructions510may be transmitted or received using a transmission medium via a coupling (e.g., a peer-to-peer coupling) to the devices524.

Software Architecture

FIG.6is a block diagram600illustrating a software architecture604, which can be installed on any one or more of the devices described herein. The software architecture604is supported by hardware such as a machine602that includes processors620, memory626, and I/O components638. In this example, the software architecture604can be conceptualized as a stack of layers, where each layer provides a particular functionality. The software architecture604includes layers such as an operating system612, libraries610, frameworks608, and applications606. Operationally, the applications606invoke API calls650through the software stack and receive messages652in response to the API calls650.

The operating system612manages hardware resources and provides common services. The operating system612includes, for example, a kernel614, services616, and drivers622. The kernel614acts as an abstraction layer between the hardware and the other software layers. For example, the kernel614provides memory management, processor management (e.g., scheduling), component management, networking, and security settings, among other functionalities. The services616can provide other common services for the other software layers. The drivers622are responsible for controlling or interfacing with the underlying hardware. For instance, the drivers622can include display drivers, camera drivers, BLUETOOTH® or BLUETOOTH® Low Energy drivers, flash memory drivers, serial communication drivers (e.g., USB drivers), WI-FI® drivers, audio drivers, power management drivers, and so forth.

The libraries610provide a common low-level infrastructure used by the applications606. The libraries610can include system libraries618(e.g., C standard library) that provide functions such as memory allocation functions, string manipulation functions, mathematic functions, and the like. In addition, the libraries610can include API libraries624such as media libraries (e.g., libraries to support presentation and manipulation of various media formats such as Moving Picture Experts Group-4 (MPEG4), Advanced Video Coding (H.264 or AVC), Moving Picture Experts Group Layer-3 (MP3), Advanced Audio Coding (AAC), Adaptive Multi-Rate (AMR) audio codec, Joint Photographic Experts Group (JPEG or JPG), or Portable Network Graphics (PNG)), graphics libraries (e.g., an OpenGL framework used to render in two dimensions (2D) and three dimensions (3D) in a graphic content on a display), database libraries (e.g., SQLite to provide various relational database functions), web libraries (e.g., WebKit to provide web browsing functionality), and the like. The libraries610can also include a wide variety of other libraries628to provide many other APIs to the applications606.

The frameworks608provide a common high-level infrastructure that is used by the applications606. For example, the frameworks608provide various graphical user interface (GUI) functions, high-level resource management, and high-level location services. The frameworks608can provide a broad spectrum of other APIs that can be used by the applications606, some of which may be specific to a particular operating system or platform.

In an example, the applications606may include a home application636, a contacts application630, a browser application632, a book reader application634, a location application642, a media application644, a messaging application646, a game application648, and a broad assortment of other applications such as a third-party application640. The applications606are programs that execute functions defined in the programs. Various programming languages can be employed to create one or more of the applications606, structured in a variety of manners, such as object-oriented programming languages (e.g., Objective-C, Java, or C++) or procedural programming languages (e.g., C or assembly language). In a specific example, the third-party application640(e.g., an application developed using the ANDROID™ or IOS™ software development kit (SDK) by an entity other than the vendor of the particular platform) may be mobile software running on a mobile operating system such as IOS™, ANDROID™, WINDOWS® Phone, or another mobile operating system. In this example, the third-party application640can invoke the API calls650provided by the operating system612to facilitate functionality described herein.

Glossary

Website Change Detection Block Diagrams

As discussed above, a snapshot may include a static version of a webpage that has been seen by some user at some point of time during a session. Snapshot data may be defined as a collection of DOM tree data, snapshot image, and zones list (e.g., a list of zones with each zone's features). A webpage layout may include a visual architecture of a webpage, and how its components are organized. In some examples, HTML or CSS code of a website may be used to capture this structural information. In an example, DOM Tree object data may be used. The structural information may be output in a linear representation in some examples, such as with a list of zones for each snapshot.

A website may be dynamic, for example having a different layout depending on various factors of how or when the website is accessed (e.g., depending on user device type, time of day, location, login status, etc.). In an example, an e-commerce website home page may have a single URL alias, such as alias: Homepage to urls list: 1. example_ecoormece.com/homepage. This website may have a large variety of products and different ways those products are displayed (e.g., may include randomly displayed, such as from a set of predefined options). In some examples, from a user to another user, the website may have different versions.

Based on snapshot comparison, a few different outcomes may occur. For example, two snapshots may be from a same day, and in this case each one is considered as a version and therefore not a change. This results in identifying different website versions, which may be useful for identifying what time of day or operating conditions to capture the website for future snapshots. A layout change, in some examples, is indicated only when there is a change between different dates (e.g., intraday changes are ignored as being different versions).

In another example, when two snapshots are in different dates, a change may be detected when a change occurs. In some examples, multiple snapshots from each of two days may be considered to determine whether there is a change or merely two different versions were captured. All versions for each of two dates may be considered. For example, multiple snapshots may be captured and compared for each of the two days. When no common version is found, a change may be indicated.

Equation 1 below is an example rule for determining whether a website has a change based on snapshots on two different days:

Similar to the different layout versions explained above, dynamic layouts for a website may provide many different versions of a website in a day. Dynamic layouts are also not automatically considered to be a change. Some pages or aliases may have a part of their canvas that is dynamic, which means that depending on the visitor, device, time of day, or the user interactions, a part or all of a page may change. The difference from one dynamic layout to another for a website may follow a pattern in some examples (e.g., a different length of a list of products for example). In dynamic layout websites, a general layout of the page may stay constant.

Two examples of dynamic layouts include product pages and cart pages. A dynamic layout website may have a template in some examples. Some products have more photos, more comments, specific sections that are related and which need more space, or the like, which may result in different page arrangements. These changing aspects may be indicated as part of a dynamic layout of the page. These changes include content and part of the visual layout, but are not a part of a layout change because the general layout or template is still the same. In another example, a dynamic layout part may include a list of products in the cart, which depends on the user (e.g., how many items were added to the cart). The list of items may be longer or different, but that does not indicate a change to the layout of the website.

FIG.7illustrates a block diagram showing website snapshot comparisons in accordance with some examples.FIG.7shows snapshots captured on two days, a first day700and a second day702. While the two days are shown with the same number of snapshots for illustration purposes, in other examples one of the two days may have more snapshots than the other. The snapshots are shown with a corresponding capture time, indicating when or generally when the snapshot was taken. In some examples, snapshots may be taken at exactly the same time during each of the two days (e.g., snapshot 4), but this is not necessary (e.g., snapshots 2 and 3 are taken at different times in the first day700and the second day702).

As shown inFIG.7, each snapshot from the first day700may be compared to each snapshot of the second day702. For the example given of five snapshots per day, that results in twenty-five comparisons. Each of these comparisons may include a feature by feature comparison, which may be combined, as described below, for an overall change score. The overall change score for each pair of features from each of the snapshots from the first day700to the second day702may be assessed to determine a lowest score for each feature, as discussed further below.

FIG.8illustrates a block diagram showing snapshot feature comparisons in accordance with some examples.FIG.8includes snapshots on a first day800and a second day802, which may be similar or the same as those described with respect toFIG.7. The snapshots on the first day800include a snapshot804, which is shown with its features810A,812A, and814A. The snapshots on the second day802include a snapshot806, which is shown with its features810B,812B, and814B. While these snapshots are shown with a few features, as few as a single feature or many more features may be present on a snapshot. The snapshots features are labeled with A and B designations for illustrative purposes, in some examples the features may be different (e.g., feature814A and814B may not be related or include any of the same information).

In an example, the features of the snapshot804are compared to the features of the snapshot806to see if there has been a change in layout. Each feature of snapshot804may be compared to each feature of snapshot806. For example, feature810A may be compared to feature810B,812B, and814B. For the three features shown in each of snapshots804and806, this results in nine comparisons, for example. The comparison may include calculating a distance from a feature in snapshot804to a feature in snapshot806. For example, feature810A may have a distance change of zero when compared to snapshot810B, and a large distance when compared to snapshot814B. A minimum distance of the set of distances may be used to determine a feature change score for the feature. A hash function may be used for each zone or area of the snapshots, such as810A to encode nodes in a set of hash values. A list of hashes (e.g., by encoding the features) for each of snapshots804and806may be generated. These hashes values may be compared to match how many areas have been inserted, deleted, or kept the same between both snapshots804and806. A distance formula may be used for combining the hash matching results, and features to get an overall change score between the two snapshots804and806.

In the example ofFIG.8, for feature810A the feature change score may be zero, since feature810B is in the same location as feature810A. Feature814A may have a larger distance score, since it has appeared to move from snapshot804to a new location as feature814B in snapshot806. An overall change score may be determined for the snapshot804to snapshot806comparison by summing the minimum feature change scores for each feature in either snapshot804or snapshot806. In some examples, a determination of whether the website has changed from the first day800to the second day802may be determined using one or more overall change scores from snapshot pairs. For example, an average overall change score, a minimum overall change score, a maximum overall change score, or the like may be used for the day to day comparison. In some examples, a threshold (e.g., a minimum day to day change score) may be used to determine whether a layout change has occurred.

In an example, a normalized distance value between 0 and 1 may be calculated between two snapshots. The data for calculating the distance value may be extracted by transforming a snapshot into a list of nodes with a set of features, for example in a tabular form. In some examples, all nodes of a DOM tree are parsed. Invisible nodes may be removed and not used as input for distance calculations in some examples. After capturing nodes, each node may be hashed, for example based on a set of input features. Nodes may be matched from two snapshots, for example based on node value or node hash (e.g., feature810A and feature810B may be matched based on one or more node values being the same or similar). When node matching is performed, comparison of nodes with matching values may be used without matching those nodes to other nodes in the snapshot (e.g., when nodes810A and810B have the same or similar node value, they may be compared to each other without comparing to812A-B or814A-B). A distance calculation may be made on two pages (e.g., by comparing nodes within the two pages). In some examples, a hash function is applied to each node of a snapshot using one or more of HTML attributes (e.g., tag, class, text, src, or the like) or CSS attributes (e.g., background color, font size, or the like) may be used. For example, features from a DOM Tree may be used.

The distance calculation may be performed according to any one or more of the following equations.

Once each feature (e.g., zone or node) of both snapshots804and806is computed, features that have the same hash from both may be matched, and considered as the same zones (e.g., no change, such as810A to810B). Features that are not matched are either inserted (part of change) or deleted (part of change). For example, features812A or814A may be considered deleted and features812B or814B may be considered added, since they have different sizes and thus may have a different hash. The features812A-B may include similar or same content, but because the feature had a change in size, it may be considered deleted (812A) and added (812B) for purposes of performing the distance calculation. In other examples, features812A-B or814A-B may have a same hash. For features814A-B, there may be a change because the feature may have moved.

In an example, the following assumptions may be used: let Λ1and Λ2be the total number of zones of the snapshots804and806. Let Λdbe the combined area of deleted nodes and Λithe combined area of inserted nodes. The distance may be computed using the ratio of combined area of deleted and inserted compared to the size of snapshots, for example with Eq. 2 below:

In another example, the following assumptions may be used: let N1and N2be the total number of zones of the snapshots804and806. Let |D| be the number of deleted nodes and |I| the number of inserted nodes. The distance may be computed using the ratio of combined area of deleted and inserted compared to the size of snapshots, for example with Eq. 3 below:

In yet another example, the following assumptions may be used: let

T⁢Λ1=∑n∈S1λn
and

T⁢Λ2=∑n∈S1λn
be the sum of areas of all nodes of respectively snapshot804and806where λnis the area of the node n. Let

T⁢Λd=∑n∈Dλn
be the sum of deleted nodes areas and

T⁢Λi=∑n∈Iλn
be the sum of inserted nodes areas. The distance may be computed using the ratio of combined area of deleted and inserted compared to the size of snapshots, for example with Eq. 4 below:

Once the distance is calculated, for example using any one or more of the above Eqs. 2-4, the distance may be compared to a threshold to determine whether a change in layout for the website has occurred. The calculated distance may be output, for example stored or displayed. In some examples, a graph, changelog, or visual depiction of layout change may be stored or displayed, for example as described below with respect to the example user interfaces ofFIGS.10A-10C.

FIG.9illustrates a block diagram showing example website changes in accordance with some examples. The block diagram shows two example changes of a website from a first snapshot900A to a second snapshot900B or to a snapshot state900C. The first state change from snapshot900A to snapshot900B shows optional comparisons from each feature in snapshot900A to each feature in snapshot900B. Snapshot900A has feature902, which appears in snapshot900B in the same location on the website (e.g., feature904is unchanged). Snapshot900A includes feature904, which is missing from snapshot900B (e.g., has been deleted). A change score for the changes between snapshot900A and snapshot900B may reflect the deleted feature904and the unchanged feature902.

Snapshot900C shows an added feature906, in addition to non-changed features902and904from snapshot900A. A change score for the changes between snapshot900A and snapshot900C may reflect the added feature906and the unchanged features902and904. In some examples, each feature in snapshot900A may be compared (e.g., via a distance calculation) to one or more features of snapshot900C to determine a feature score (e.g., a feature distance score). In other examples, features of snapshot900A are only compared to features in snapshot900C that share a hash or other value. A lowest distance value may be used as the feature value for a particular feature. An overall change score may include a combination (e.g., sum or average) of the feature change scores for a snapshot. In an example, snapshot900A may have a lower overall change score because it does not have feature906. In this example, the higher overall change score may be used for snapshots900A and900C.

User Interfaces

FIGS.10A-10Cillustrate example user interfaces for displaying website change information in accordance with some examples. A user interface1002shows an indication of a layout change (e.g., one that may impact a user-selected analysis). The indication may be displayed in response to a user selection, such as related to analytics for a website, or related to a user request for whether a layout has changed. The user interface1002may indicate a number of layout changes occurring on the website between two selected dates or since a selected date. The user interface1002includes selectable indications to see changes or to dismiss the indication of the layout change.

A user interface1004illustrates a changelog of a website. The changelog may be displayed in response to selection of the “see changes” selectable indication of user interface1002, in some examples. The changelog may provide indications of what changes occurred in a layout, such as from a previous snapshot, which may be a previous day, a previously accessed day, a selected day, or the like. The changelog shown in the user interface1004includes details corresponding to each change, although this may be optional or available on selection by a user of the indication of the change. The user interface1004shows an optional impact level indicating how much of an impact the change has or is likely to have on a selected analytic, for example.

The change indications in the changelog on the user interface1004include “new” for added features, “removed” for deleted features, and “improved” for changed features. The impact levels are indicated as high, medium, or low, but may include more precise impact levels (e.g., on a scale, such as zero to ten or one hundred).

The changelog may include a notification that there is a change on a particular date (e.g., when the changelog is accessed to determine whether a change has occurred, or in response to a push notification, email, text, etc. that a change has occurred). In some examples, a note may be added to the changelog based on a threshold (e.g., only show changes that meet at least a minimum “low” threshold, for example). The impact levels or threshold may include a prediction of what changes may be relevant. The user may choose the threshold in some examples, or provide a custom list of features to identify changes for. Different features may have different thresholds (e.g., based on frequency of changes to website, degree of changes, etc.).

A user interface1006illustrates a graph of layout changes to a website. The graph may be displayed in response to selection of the “see changes” selectable indication of user interface1002, in some examples. The graph may be accessed, in some examples, from the user interface1004(e.g., a selection on the changelog, such as a range of dates). In some examples, the graph may be selected (e.g., selecting a date, a bar, an impact level, etc.), and on selection, more detail may be provided on the selected indication (e.g., the user interface1004may be displayed, or only high impact changes may be shown, etc.). The graph may be pre-rendered, such as whenever a change occurs (which may be subject to thresholding in some examples). When there is a change, it may be stored, and when the user interface1006is to be rendered, the stored graph may be retrieved.

EXAMPLES

Example 1 is a method comprising: processing a first set of snapshots of a website corresponding to a first day, each of the first set of snapshots having a respective first set of features of the website for the first day; processing a second set of snapshots of the website corresponding to a second day, each of the second set of snapshots having a respective a second set of features of the website for the second day; comparing, using a processor, at least one of the respective first set of features to at least one of the respective second set of features using a distance function to determine a change score corresponding to at least one of a deleted feature, an added feature, or an unchanged feature of the website from the first day to the second day; and outputting the change score.

In Example 2, the subject matter of Example 1 includes, wherein comparing the at least one of the respective first set of features to the at least one of the respective second set of features using the distance function includes comparing each of the respective first set of features to each of the respective second set of features to determine a set of change scores.

In Example 3, the subject matter of Example 2 includes, wherein the change score is selected from the set of change scores having a minimum change score.

In Example 4, the subject matter of Examples 2-3 includes, wherein to determine the change score includes using minimum distance pairs between features of each of the respective first set of features to each of the respective second set of features.

In Example 5, the subject matter of Examples 1-4 includes, wherein the respective first set of features and the respective second set of features include frames identified from HTML code of the website.

In Example 6, the subject matter of Examples 1-5 includes, wherein the distance function compares respective hash values for each feature of the respective first set of features to respective hash values for the respective second set of features.

In Example 7, the subject matter of Examples 1-6 includes, wherein calculating the distance function includes: determining a first sum comprising: a sum of an area of deleted features from the respective first set of features plus a sum of an area of inserted features from the respective second set of features; determining a second sum comprising: a sum of areas of all features of the respective first set of features plus a sum of areas of all features of the respective second set of features; and dividing the first sum by the second sum.

In Example 8, the subject matter of Examples 1-7 includes, wherein the first set of snapshots of the website are captured at different times during the first day.

In Example 9, the subject matter of Examples 1-8 includes, wherein the respective first set of features and the respective second set of features correspond to features visible on the website when the website is initially loaded, with initially hidden features disregarded.

In Example 10, the subject matter of Examples 1-9 includes, wherein outputting the change score includes generating a graph of change scores over time, and displaying the graph on a user interface.

In Example 11, the subject matter of Examples 1-10 includes, wherein outputting the change score includes generating a changelog indicating changed features and displaying a subset of the changed features from the changelog based on a distance threshold corresponding to the changed features.

Example 12 is at least one non-transitory machine-readable medium including instructions, which when executed by processing circuitry, cause the processing circuitry to perform operations to: process a first set of snapshots of a website corresponding to a first day, each of the first set of snapshots having a respective first set of features of the website for the first day; process a second set of snapshots of the website corresponding to a second day, each of the second set of snapshots having a respective a second set of features of the website for the second day; compare at least one of the respective first set of features to at least one of the respective second set of features using a distance function to determine a change score corresponding to at least one of a deleted feature, an added feature, or an unchanged feature of the website from the first day to the second day; and output the change score.

In Example 13, the subject matter of Example 12 includes, wherein the operations to compare the at least one of the respective first set of features to the at least one of the respective second set of features using the distance function include operations to compare each of the respective first set of features to each of the respective second set of features to determine a set of change scores.

In Example 14, the subject matter of Example 13 includes, wherein the change score is selected from the set of change scores having a minimum change score.

In Example 15, the subject matter of Examples 13-14 includes, wherein to determine the change score includes using minimum distance pairs between features of each of the respective first set of features to each of the respective second set of features.

In Example 16, the subject matter of Examples 12-15 includes, wherein the respective first set of features and the respective second set of features include frames identified from HTML code of the website.

In Example 17, the subject matter of Examples 12-16 includes, wherein the operations to compare the distance function include operations to: determine a first sum comprising: a sum of an area of deleted features from the respective first set of features plus a sum of an area of inserted features from the respective second set of features; determine a second sum comprising: a sum of areas of all features of the respective first set of features plus a sum of areas of all features of the respective second set of features; and divide the first sum by the second sum.

In Example 18, the subject matter of Examples 12-17 includes, wherein the respective first set of features and the respective second set of features correspond to features visible on the website when the website is initially loaded, with initially hidden features disregarded.

In Example 19, the subject matter of Examples 12-18 includes, wherein the operations to output the change score include operations to generate a graph of change scores over time, and to display the graph on a user interface.

In Example 20, the subject matter of Examples 12-19 includes, wherein the operations to output the change score include operations to generate a changelog indicating changed features and to display a subset of the changed features from the changelog based on a distance threshold corresponding to the changed features.