U.S. patent application number 16/673334 was filed with the patent office on 2020-04-23 for dynamic zooming of content with overlays.
This patent application is currently assigned to Acoustic, L.P.. The applicant listed for this patent is Acoustic, L.P.. Invention is credited to Matthew Cordasco, Kevin DeLoach, Christopher Fraschetti, Shawn Simon.
Application Number | 20200125789 16/673334 |
Document ID | / |
Family ID | 50729157 |
Filed Date | 2020-04-23 |
![](/patent/app/20200125789/US20200125789A1-20200423-D00000.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00001.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00002.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00003.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00004.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00005.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00006.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00007.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00008.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00009.png)
![](/patent/app/20200125789/US20200125789A1-20200423-D00010.png)
View All Diagrams
United States Patent
Application |
20200125789 |
Kind Code |
A1 |
DeLoach; Kevin ; et
al. |
April 23, 2020 |
DYNAMIC ZOOMING OF CONTENT WITH OVERLAYS
Abstract
A dynamic zooming system may use overlays to display usage
information over associated webpages. In one example, a replay
manager may zoom-in on particular areas of the webpages to view
more specific usage information. In another example, the replay
manager may zoom-out the webpages to view more general usage
information. The dynamic zooming system may use a first scaled
overlay layer to dynamically vary a zoom level of the usage
information to match a zoom level for the webpages. The dynamic
zooming system also may use a second fixed overlay layer to display
other usage information independently of the zoom-level for the
webpages.
Inventors: |
DeLoach; Kevin; (San
Francisco, CA) ; Simon; Shawn; (San Francisco,
CA) ; Fraschetti; Christopher; (San Francisco,
CA) ; Cordasco; Matthew; (San Francisco, CA) |
|
Applicant: |
Name |
City |
State |
Country |
Type |
Acoustic, L.P. |
New York |
NY |
US |
|
|
Assignee: |
Acoustic, L.P.
New York
NY
|
Family ID: |
50729157 |
Appl. No.: |
16/673334 |
Filed: |
November 4, 2019 |
Related U.S. Patent Documents
|
|
|
|
|
|
Application
Number |
Filing Date |
Patent Number |
|
|
13828476 |
Mar 14, 2013 |
10474735 |
|
|
16673334 |
|
|
|
|
61727915 |
Nov 19, 2012 |
|
|
|
Current U.S.
Class: |
1/1 |
Current CPC
Class: |
G06F 9/545 20130101;
G06F 40/106 20200101; G06F 40/14 20200101 |
International
Class: |
G06F 40/106 20060101
G06F040/106; G06F 9/54 20060101 G06F009/54; G06F 40/14 20060101
G06F040/14 |
Claims
1-28. (canceled)
29. A system comprising: a database configured for storing
information regarding webpages displayed during a web session and
user events occurring during the web session; an Analytics Engine
configured for obtaining usage information relating to the web
session; and a Replay Manager configured for replay of the web
session using the usage information, wherein the Replay Manager
comprises a Zoom Coordinator configured to enable, during the
replay of the web session, adjusting a zoom level of displayed
usage information based on a zoom level of a displayed webpage,
wherein the zoom level of the displayed webpage varies during the
replay; wherein the zoom level of the displayed usage information
is adjustable to be fixed or to vary to match the zoom level of the
displayed web page; wherein the Replay Manager is configured to
utilize an HTML stack of layers comprising: a content layer for use
in displaying webpage objects; a scaled overlay layer for
displaying usage information at a zoom level to match a zoom level
of a displayed webpage; and a fixed overlay layer for displaying
usage information at a zoom level that is fixed and independent of
a displayed webpage zoom level, wherein the HTML stack of layers is
ordered such that scaled overlay layer HTML objects overlay content
layer HTML objects, and fixed overlay layer HTML objects overlay
content layer HTML objects and scaled overlay layer HTML objects;
and wherein the Replay Manager is configured to enable
communication of usage information between the scaled overlay layer
and the fixed overlay layer.
30. The system of claim 29, wherein the HTML stack of layers is a
z-index based stack, wherein the Replay Manager is configured to
enable communication of usage information between the scaled
overlay layer and the fixed overlay layer, and wherein the Replay
Manager is configured to enable communication of usage information
from an object located within the scaled overlay layer to an object
located within the fixed overlay layer.
31. The system of claim 29, wherein the HTML stack of layers is a
z-index based stack, wherein the Replay Manager is configured to
enable communication of usage information between the scaled
overlay layer and the fixed overlay layer, and wherein the Replay
Manager is configured to enable communication of usage information
from an object located within the scaled overlay layer to an object
located within the fixed overlay layer, and wherein the scaled
overlay layer is a separate application instance from the fixed
overlay layer.
32. The system of claim 29, wherein the HTML stack of layers is
ordered such that, when HTML objects are displayed at least
partially in the same display location, scaled overlay layer HTML
objects overlay content layer HTML objects, and fixed overlay layer
HTML objects overlay content layer HTML objects and scaled overlay
layer HTML objects.
33. The system of claim 29, wherein the zoom coordinator is
configured to: display webpage content objects in the content
layer; display first usage information in the scaled overlay layer;
display second usage information in the fixed overlay layer; and
enable zooming to change zoom level; wherein, during zooming, a
zoom level of the displayed first usage information is adjusted to
match a zoom level of the content objects, and wherein a zoom level
of the second usage information is kept fixed.
34. The system of claim 29, wherein the zoom level of the displayed
webpage varies during the replay based on user selection during the
replay.
35. The system of claim 29, wherein displayed usage information
comprises a displayed heat map relating to the user events.
36. The system of claim 29, wherein the user events comprise user
clicks, user selections, and user keystroke entries.
37. The system of claim 29, wherein the Replay Manager is
configured to display an analysis box, wherein a first HTML object
of the scaled overlay layer: counts first usage information within
a boundary of the analysis box; obtains a count value relating to
the first usage information; and passes the count value to a second
HTML object of the fixed overlay layer for fixed display during
zooming.
38. The system of claim 29, wherein usage information comprises
conversion rate information, number of mouse clicks information,
percentage of mouse clicks information, and information regarding
an amount of time that a user spent on a web page during a web
session.
39. The system of claim 29, wherein the scaled overlay layer
comprises a transparent Iframe.
40. The system of claim 29, wherein the webpage comprises a
Document Object Model (DOM) structure.
41. The system of claim 29, wherein replay and zooming take place
on a mobile device.
42. The system of claim 29, wherein, during replay, webpages and
usage information is displayed on a display of a mobile device.
43. A method comprising: Storing, in a database, information
regarding webpages displayed during a web session and user events
occurring during the web session; obtaining usage information
relating to the web session; and replaying the web session using
the usage information, comprising, during replay of the web
session, adjusting a zoom level of displayed usage information
based on a zoom level of a displayed webpage, wherein the zoom
level of the displayed webpage varies during the replay; wherein
the zoom level of the displayed usage information is adjustable to
be fixed or to vary to match the zoom level of the displayed web
page; wherein the replay utilizes an HTML stack of layers
comprising: a content layer for use in displaying webpage objects;
a scaled overlay layer for displaying usage information at a zoom
level to match a zoom level of a displayed webpage; and a fixed
overlay layer for displaying usage information at a zoom level that
is fixed and independent of a displayed webpage zoom level, wherein
the HTML stack of layers is ordered such that scaled overlay layer
HTML objects overlay content layer HTML objects, and fixed overlay
layer HTML objects overlay content layer HTML objects and scaled
overlay layer HTML objects; and wherein usage information is
communicated between the scaled overlay layer and the fixed overlay
layer.
44. The method of claim 43, comprising utilizing the HTML stack of
layers for the replay, wherein the HTML stack of layers is a
z-index based stack, wherein usage information is communicated
between the scaled overlay layer and the fixed overlay layer, and
wherein usage information is communicated from an object located
within the scaled overlay layer to an object located within the
fixed overlay layer.
45. The method of claim 43, comprising utilizing the HTML stack of
layers for the replay, wherein the HTML stack of layers is a
z-index based stack, wherein usage information is communicated
between the scaled overlay layer and the fixed overlay layer, and
wherein usage information is communicated from an object located
within the scaled overlay layer to an object located within the
fixed overlay layer, and wherein the scaled overlay layer is a
separate application instance from the fixed overlay layer.
46. The method of claim 43, comprising utilizing the HTML stack of
layers for the replay, wherein the HTML stack of layers is ordered
such that, when HTML objects are displayed at least partially in
the same display location, scaled overlay layer HTML objects
overlay content layer HTML objects, and fixed overlay layer HTML
objects overlay content layer HTML objects and scaled overlay layer
HTML objects.
47. The method of claim 43, comprising: displaying webpage content
objects in the content layer; displaying first usage information in
the scaled overlay layer; displaying second usage information in
the fixed overlay layer; and enabling zooming to change zoom level;
wherein, during zooming, a zoom level of the displayed first usage
information is adjusted to match a zoom level of the content
objects, and wherein a zoom level of the second usage information
is kept fixed.
48. The method of claim 43, comprising displaying the webpage,
wherein the webpage comprises a Document Object Model (DOM)
structure.
49. The method of claim 43, comprising replaying the web session,
wherein replay and zooming take place on a mobile device.
50. A non-transitory computer readable medium or media containing
instructions for executing a method comprising: Storing, in a
database, information regarding webpages displayed during a web
session and user events occurring during the web session; obtaining
usage information relating to the web session; and replaying the
web session using the usage information, comprising, during replay
of the web session, adjusting a zoom level of displayed usage
information based on a zoom level of a displayed webpage, wherein
the zoom level of the displayed webpage varies during the replay;
wherein the zoom level of the displayed usage information is
adjustable to be fixed or to vary to match the zoom level of the
displayed web page; wherein the replay utilizes an HTML stack of
layers comprising: a content layer for use in displaying webpage
objects; a scaled overlay layer for displaying usage information at
a zoom level to match a zoom level of a displayed webpage; and a
fixed overlay layer for displaying usage information at a zoom
level that is fixed and independent of a displayed webpage zoom
level, wherein the HTML stack of layers is ordered such that scaled
overlay layer HTML objects overlay content layer HTML objects, and
fixed overlay layer HTML objects overlay content layer HTML objects
and scaled overlay layer HTML objects; and wherein usage
information is communicated between the scaled overlay layer and
the fixed overlay layer.
Description
[0001] The present application claims priority to U.S. Provisional
Patent Application, Ser. No. 61/727,915, entitled: DYNAMIC ZOOMING
OF HTML CONTENT WITH OVERLAYS, filed Nov. 19, 2012, which is herein
incorporated by reference in its entirety.
FIELD
[0002] This application relates generally to data processing and,
more specifically, to displaying usage information.
BACKGROUND
[0003] A monitoring system may capture user events for webpages,
such as mouse clicks, selections, keystroke entries, etc. An
analysis system may track and display the user events associated
with different locations within the webpage. For example, the
analysis system may display heatmaps that show where users clicked
on different webpage objects.
[0004] The analysis system may display darker images in the heat
maps to represent more mouse clicks for the associated webpage
location and may display lighter images to represent fewer mouse
clicks for the associated webpage location. In another example, the
analysis system may display usage clusters of the heat map in
different colors to represent the number of mouse clicks.
[0005] An operator may have difficulties visually associating usage
information with underlying webpage objects. For example, the
analysis system may display a heat map usage cluster over multiple
different webpage objects. The operator may want to view more
detailed usage information for particular webpage objects. However,
the analysis system may only display one static heat map for the
entire webpage.
BRIEF SUMMARY
[0006] A dynamic zooming system may use overlays to display usage
information over associated webpages. In one example, a replay
manager may zoom-in on particular areas of the webpages to view
more specific usage information. In another example, the replay
manager may zoom-out the webpages to view more general usage
information. The dynamic zooming system may use a first scaled
overlay layer to dynamically vary a zoom level of the usage
information to match a zoom level for the webpages. The dynamic
zooming system also may use a second fixed overlay layer to display
other usage information independently of the zoom-level for the
webpages.
BRIEF DESCRIPTION OF DRAWINGS
[0007] FIG. 1 depicts an example dynamic zooming system.
[0008] FIG. 2 depicts example overlays displayed by a dynamic
zooming system.
[0009] FIG. 3 depicts an example process for creating scaled
overlay layers and fixed overlay layers.
[0010] FIG. 4 depicts an example process for dynamically zooming
usage information in a scaled layer and a fixed layer.
[0011] FIG. 5 depicts an example heat map displayed in a scaled
layer.
[0012] FIG. 6 depicts an example heat map displayed in response to
a zoom level change.
[0013] FIG. 7 depicts an example of usage information displayed in
a scaled layer and in a fixed layer.
[0014] FIG. 8 depicts an example how a fixed layer and a scaled
layer display usage information in response to a zoom level
change.
[0015] FIG. 9 depicts another example of usage information
displayed in a scaled layer and in a fixed layer.
[0016] FIG. 10 depicts an example of how a fixed layer updates
usage information after a zoom level change.
[0017] FIG. 11 depicts an example link analytics overlay.
[0018] FIG. 12 depicts an example of how a scaled layer and a fixed
layer display a link analytic overlay after a zoom level
change.
[0019] FIG. 13 depicts an example computing system for implementing
a dynamic zooming system.
DETAILED DESCRIPTION
[0020] FIG. 1 depicts an example diagram of a content management
system 100. A storage system 102 may store content, such as webpage
106 for a website 104 operated by an enterprise. In one example,
the enterprise may be any company that sells products and/or
services on-line to users 120. Of course, the enterprise operating
storage system 102 and/or website 104 may be any service, business,
company, individual, or other entity that provides information to
users 120. Webpage 106 may comprise a home webpage for website 104
or any another webpage associated with website 104.
[0021] A network 108 may operably couple storage system 102 to a
content server 130 and to different computing devices 118 and 138.
Network 108 may comprise any combination of local area networks
(LANs), wide area networks (WANs), Internet Protocol (IP) networks,
phone networks, Public Services Telephone Networks (PSTN), wireless
networks, cellular networks, Wi-Fi networks, Bluetooth networks,
cable networks, data buses, or the like, or any combination
thereof.
[0022] Content server 130 and computing devices 118 and 138 may
comprise any devices configured to store and process content for
web sessions. For example, content server 130 may comprise a data
and/or web server and computing devices 118 and 138 may comprise
tablet computers, hand-held devices, smart telephones, mobile
telephones, personal digital assistants (PDAs), laptop computers,
personal computers, computer terminals, PSTN telephones, voice over
internet protocol (VoIP) phones, or the like, or any combination
thereof.
[0023] Any one of users 120 may use computing device 118 to access
website 104. For example, one of users 120 may open a web browser
110 and send Hypertext Transfer Protocol (HTTP) requests over
network 108 to website 104. Website 104 may send webpage 106 back
to web browser 110 in response to the HTTP requests. Web browser
110 then may display webpage 106 on a computer screen of computing
device 118. Webpage 106 may contain webpage objects 114, such as
text, icons, images, links, fields, hypertext markup language
(HTML) code, extensible markup language (XML) code, document object
models (DOMs) or the like, or any combination thereof.
[0024] A client agent 116 may capture client data 122 associated
with webpage 106 during web sessions with users 120. Client data
122 may comprise mouse clicks, loaded webpages 106, text, control
events, viewing times for webpage 106, viewing times for webpage
objects 114, control events, or any other user input or state that
may be entered during the web session. Client agent 116 may send
captured client data 122 to content sever 130.
[0025] An operator 112 may comprise an employee of the enterprise
associated with website 104, or any other person who wants to view
usage information for webpage 106. A replay manager 150 may operate
on computing device 138 and replay previously captured web
sessions, and/or display usage information associated with webpage
106.
[0026] Replay manager 150 may replay web page information within a
web browser 140. For example, relay manager 150 may render webpage
106 previously loaded into web browser 110 during the original web
session. Replay manager 150 then may apply captured client data 122
to the rendered webpage 106. For example, replay manager 150 may
display text entered into fields of webpage 106 during the original
application session and display icons previously selected by users
120 during the application sessions.
[0027] An analytics engine 134 may derive usage information for
webpage 106. For example, analytics engine 134 may determine a
conversion rate, a bounce rate, a number of mouse clicks, a
percentage of mouse clicks, an amount of time users 120 spend on
webpages 106, or the like, or any combination thereof. Replay
manager 150 may display the usage information in heat maps,
reports, or any other objects. For example, replay manager 150 may
display usage clusters 142 that identify mouse click locations on
associated webpage objects 114 and may display a usage report 136
that identifies a conversion rate for webpage 106.
[0028] Operator 112 may change a zoom level, size, and/or location
for webpage 106. For example, operator 112 may use a zoom
controller 128, such as a slider bar icon, to zoom into specific
areas of webpage 106. A zoom coordinator 152 may dynamically adjust
the zoom level of the usage information based on the zoom level of
webpage 106. For example, zoom coordinator 152 may dynamically
adjust a height, width, scale, and/or position of usage clusters
142 based on the new zoom level, size and/or location of webpage
objects 114.
[0029] Zoom coordinator 152 may maintain a same zoom level, size,
and/or location for other usage information independently of the
change for webpage 106. For example, zoom coordinator 152 may
maintain a same zoom level, size and/or location for usage report
136. However, zoom coordinator 152 may update the usage information
displayed within usage report 136 based on the change in webpage
106. In another example, zoom coordinator 152 may continue to
display the same usage information within usage report 136
independently of the changes to webpage 106.
[0030] For discussion purposes, any changes to webpage 106, webpage
objects 114, and/or a content layer containing webpage 106 and/or
webpage objects 114 including but not limited to changes in height,
width, scale, position, or the like, or any combination thereof
will be referred to below as a change in a zoom level.
[0031] FIG. 2 depicts a conceptual drawing of a content layer 144,
a scaled layer 146, and a fixed layer 148. Each layer 144, 146, and
148 represents an overlay for a different Z-index level of a HTML
stack. Webpage 106 may be contained within content layer 144 and
webpage objects 114 may be contained on incrementally higher
Z-index layers of content layer 144. However, webpage 106 and
webpage objects 114 are shown within a same content layer 144 for
illustrative purposes.
[0032] HTML may include Z-index properties for specifying a stack
order for HTML elements. Objects with a greater stack order are
displayed over objects with a lower stack order. For example,
objects contained within scaled overlay layer 146 may have a higher
z-index than objects located in content layer 144. HTML objects
within fixed layer 148 may have a higher Z-index than HTML objects
within content layer 144 and scaled layer 146.
[0033] Content layer 144 may consist of HTML inside a block-level
element such as a HTML Document Division Element (DIV) or an Inline
Frame (IFRAME). Scaled layer 146 may comprise a transparent IFRAME
that operates above content layer 144 and matches the width,
height, and position of content layer 144. Cascading style sheets 3
(CSS3) may transform the IFRAME based on changes in content layer
144. For example, changes in a zoom level 124 of content layer 144
may simultaneously cascade down to the CSS3 in scaled layer 146.
Scaled layer 146 may be sandboxed from content layer 144 to prevent
style errors. For example, objects in scaled layer 146 and fixed
layer 148 do not alter how webpage 106 is displayed in content
layer 144.
[0034] Scaled layer 146 or fixed layer 148 may display any usage
information associated with webpage 106. For example, scaled layer
146 may display heatmaps that identify the number of mouse clicks
on associated html webpage objects 114. In another example, scaled
layer 146 may contain attention maps that show how long users
viewed webpage objects 114. In yet another example, scaled layer
146 may display link analytics, such as pins and form fields
indicating a percentage of users clicking on the webpage
objects.
[0035] Fixed layer 148 may display reports that contain analytics
associate with the usage information. For example, the report may
display heatmap count associated with particular webpage objects.
Of course, replay manager 150 may display any other usage
information in scaled layer 146 or fixed layer 148. Fixed layer 148
also may display control elements such as a zoom controller or a
page navigator for varying the webpages and zoom levels of the
webpages.
[0036] Zoom coordinator 152 may operate in conjunction with replay
manager 150 and analytics engine 134 to coordinate the calculation
and display of usage information within scaled layer 146 and fixed
layer 148. For example, the operator may perform a zoom-in or
zoom-out operation that varies zoom level 124 of content layer 144.
Zoom coordinator 152 may dynamically vary a zoom level 126 of
scaled layer 146 based on zoom level 124. For example, zoom
coordinator 152 may vary a size, scale, and/or location of usage
clusters 142 to cover a same relative area and location over
associated webpage objects 114.
[0037] Zoom controller 152 may display the size, scale, and/or
location of objects within fixed layer 148 independently of zoom
level changes 124 and 126. For example, prior to an operator
initiated zoom operation, replay manager 150 may display usage
report 136 at a particular location and with a particular size
within fixed layer 148. The operator then may adjust zoom level 124
by either zooming-in or zooming-out content layer 144. Zoom
coordinator 152 may vary zoom level 126 of usage clusters 142
within scaled layer 146 to match zoom level 124. However, zoom
coordinator 152 may continue to display usage report 136 at the
same size, scale, and/or location within fixed layer 148
independently of the change in zoom levels 124 and 126.
[0038] In one example, zoom coordinator 152 in coordination with
analytics engine 134 and replay manager 150 may fix the zoom level
of usage report 136 while dynamically and automatically updating
the usage information displayed within usage report 136. For
example, usage report 136 may display hit rates for different
webpage objects 114 within webpage 106. The hit rates may indicate
the percentage of clicks on webpage objects 114.
[0039] The operator may change zoom level 124 and zoom coordinator
152 may vary zoom level 126 for scaled layer 146 to correspond with
zoom level 124. Zoom coordinator 152 also may dynamically update
the hit rate displayed in usage report 136 to correspond with the
different webpage objects 114 and associated usage clusters 142
displayed in the new zoom levels 124 and 126.
[0040] For example, a first zoom level 124 of content layer 144 may
display an entire webpage object 114 and a second zoomed-in level
124 of content layer 144 only may display a portion of the webpage
object. Zoom coordinator 152 may display a first hit rate in usage
report 136 for the entire webpage object 114 displayed in the first
zoom level 124. Zoom coordinator 152 then may display a new hit
rate in usage report 136 for the partial portion of the webpage
object 114 displayed in second zoom level 124.
[0041] Thus, zoom coordinator 152 in combination with replay
manager 150 and analytics engine 134 may display usage information
in scaled layer 144 over associated HTML objects in content layer
144. Zoom coordinator 152 also may dynamically zoom the usage
information, such as usage clusters 142, over associated HTML
webpage objects 114 in response to changes in zoom level 124.
[0042] Zoom coordinator 152 may display other usage information in
fixed layer 148 above scaled layer 146. Zoom coordinator 152 may
display usage information within fixed layer 148 at a particular
size and location independently of changes to zoom levels 124 and
126. However, zoom coordinator 152 may dynamically update
statistics for the usage information based on changes in zoom
levels 124 and 126.
[0043] FIG. 3 depicts an example process for implementing dynamic
zooming. In operation 160, the replay manager may create and/or
enable the zoom coordinator when a webpage is loaded. For example,
the replay manager may create an instance of the zoom coordinator
as described below in Table 1.0. This instance may exist at the
window level of the webpage document and may trigger other
operations when the replay manager activates overlays.
[0044] Table 1.0 shows one example of a zoom coordinator instance
for insertion into webpage HTTP code and interaction with replay
manager 150.
TABLE-US-00001 TABLE 1.0 var application = new cxzoom( );
[0045] The replay manager in operation 162 may create a DIV
container for the fixed layer. The replay manager may insert the
DIV container on top of the content layer and may configure the DIV
container with dimensions large enough to hold the content
layer.
[0046] The replay manager in operation 164 may create an IFRAME for
the scaled layer and operation 164 may inject the scaled layer
inside of the IFRAME above the content layer. Table 2.0 shows one
example of how the replay manager may append or inject a scaled
layer inside of the content layer. The code in Table 2.0 may
generate an IFRAME for scaled layer 146 that matches the size of
content layer 144.
TABLE-US-00002 TABLE 2.0 var scaledLayer =
document.createElement('iframe'); scaledLayer.src = 'overlay.html';
matchContentLayerSize(scaledLayer);
matchContentLayerPosition(scaledLayer);
contentLayer.contentWindow.document.body.appendChild(scaledLayer);
[0047] The replay manger in operation 168 may create a scaled layer
application instance. For example, the replay manager may create
objects inside of java script and pass the objects to the scaled
layer and the fixed layer. The scaled layer instance may be a
separate instance that enables two-way communication between the
fixed layer and the scaled layer.
[0048] Table 3.0 shows one example of code that creates a scaled
layer instance that enables the two-way communication between fixed
layer 148 and scaled layer 146.
TABLE-US-00003 TABLE 3.0 scaledLayer.onload = function( ) { var
instance = contentLayer.contentWindow.createInstance(application);
instance.fixedLayer = application; application.scaledLayer =
instance; };
[0049] Operation 170 may attach scaling overlays to the scaled
layer and operation 172 may attach non-scaling overlays to the
fixed layer. The replay manager may attach the overlays in response
to operator inputs. For example, the operator may direct the replay
manager to load specific overlays, such as form analytics. In
response to the operator input, the replay manager may attach
components for the associated form analytics to the scaled and
fixed layers. If the user then selects a heat map, the replay
manager may delete the form analytics components from the overlays
and attach the heat map components to the overlays.
[0050] FIG. 4 depicts one example of how the replay manager may
dynamically zoom usage information. In operation 180, the replay
manager may display objects in the content layer, scaled layer, and
fixed layer based on operator inputs. For example, the operator may
select a particular webpage and select a particular type of
analytics, such as a heat map. The replay manager then loads the
selected webpage into a computer device and load display objects
for the heat map into the webpage.
[0051] In operation 182, the zoom coordinator may detect a change
in zoom level of the content layer. For example, the operator may
zoom-in or zoom-out the webpage loaded by the replay manager. The
zoom coordinator may fire an event that updates the scaled and/or
fixed layer based on the new zoom level.
[0052] As described above, the zoom coordinator may handle the
event differently for the content layer and the scale layer. In
operation 184, the zoom coordinator may adjust the zoom level of
the scaled layer to correspond to the zoom level of the content
layer. For example, the operator may zoom-in on the loaded webpage.
The zoom coordinator may dynamically zoom-in the usage information
displayed in the scaled layer to correspond with the new zoom
level. For example, the zoom coordinator may enlarge usage clusters
in response to a zoom-in operation to cover a same relative
location and portion of associated webpage objects.
[0053] In operation 186, the zoom coordinator may update the usage
information displayed in the fixed layer to correspond to the zoom
level for the content layer and scaled layer. For example, the zoom
coordinator may update the usage information displayed in the fixed
layer to correspond with the different portions of the webpage in
the content layer and usage information in the scaled layer
displayed after the zoom level change. However, the zoom
coordinator may not vary the zoom level of control elements in the
fixed layer or the zoom level of reports displaying usage
information in the fixed layer.
[0054] Table 4.0 shows example code for a redraw function that
executes after a zoom event. The operator may trigger the redraw
function by changing the zoom level with the zoom controller
displayed within the fixed layer.
TABLE-US-00004 TABLE 4.0 var redraw = function( ) {
contentLayer.css({ 'transform': 'scale(' + getZoomLevel( ) + ')',
'transform-origin': getOrigin( ), 'margin': getMargin( ) }); };
[0055] FIG. 5 depicts an example webpage displayed within a screen
154 of computing device 138 during a replay session. The replay
manager may display webpage 106 and webpage objects 114A-114G
within content layer 144. The replay manager may display usage
clusters 142A-142D within scaled layer 146 over associated webpage
objects 114A-114D, respectively, and may display other usage
information (not shown) in fixed layer 148 over content layer 144
and scaled layer 146.
[0056] Content layer 144 is shown in dotted lines and scaled layer
146 is shown extending over content layer 144. For illustrative
purposes, an outside perimeter of scaled layer 146 extends out
beyond an outside perimeter of content layer 144. However, the
objects within scaled layer 146 may generally be dynamically zoomed
to a same zoom level as webpage 106 and webpage objects 114 within
content layer 144. Fixed layer 148 is shown with an outside
perimeter that extends beyond the outside perimeters of content
layer 144 and fixed layer 146.
[0057] The replay manager may display scaled layer 146 in a
transparent color. For example, the replay manager may display
usage clusters 142 in semi-transparent colors so the operator may
view associated underlying webpage objects 114. As mentioned above,
usage clusters 142 may represent places on webpage 106 where users
performed mouse clicks, selections, entered data, etc. In one
example, the replay manager may display usage clusters 142 with
different colors or shades based on the number of associated user
events. For example, the replay manager may use darker colors for
the usage clusters 142 associated with more mouse clicks.
[0058] The replay manager may display zoom controller 128 within
fixed layer 148. The operator may select zoom controller 128 with
cursor 190 to change a zoom level of the objects within content
layer 144. For example, the operator may drag a selector displayed
on zoom controller 128 upwards to zoom-in webpage 106 and may drag
the selector downwards to zoom-out webpage 106.
[0059] In another example, the replay manager may vary a size of
webpage 106 in response to the operator selecting and dragging a
corner of webpage 106 inward or outward. In another example, the
replay manager may display a different portion of webpage 160 in
response to the operator using cursor 190 to display a different
portion of another webpage 106. The replay manager may dynamically
zoom and/or move objects in scaled layer 146 and update usage
information displayed within scaled layer 146 and fixed layer 148
based on the operator selections.
[0060] FIG. 6 depicts one example of how the replay manager may
dynamically zoom the scaled layer. In this example, the operator
may have zoomed-out webpage 106 reducing the size of webpage
objects 114A-114G and revealing additional webpage object 114H.
[0061] The replay manager may automatically change the zoom level
of objects within scaled layer 146 to match the zoom level of
webpage 106. For example, the replay manager may adjust the size,
scale, and position of usage clusters 142A-142D to maintain a same
relative size, scale, and position over associated zoomed-out
webpage objects 114A-114D, respectively. The replay manager also
may update usage information displayed within scaled layer 146
based on the operator input. For example, the replay manager may
dynamically display new usage clusters 142H associated with newly
displayed webpage object 114.
[0062] FIG. 7 depicts an example of how the replay system may
display usage information within the fixed layer. The fixed layer
may include an object displaying usage report 136. As mentioned
above, the fixed layer also may include an object displaying zoom
controller 128. The replay manager may display usage report 136 in
response to the operator selecting one of tabs 192, or selecting or
hovering over one of webpage objects 114 or usage clusters 142. The
replay manager may obtain the usage information displayed in usage
report 136 from the analytics manager.
[0063] The display manager may display any type of usage
information within usage report 136. For example, as mentioned
above usage report 136 may display a number of views for webpage
106, a number of hits on specific webpage objects 114. a bounce
rate percentage for webpage 106, or the like, or any combination
thereof. In another example, usage report 136 may identify when
users clicked on webpage objects 114, the percentage of mouse
clicks resulting in purchases, demographic information for the
users associated with usage clusters 142, or the like, or any
combination thereof.
[0064] Fields 194A-194C in usage report 136 may identify hit rates
for different webpage objects 114A, 114B, and 114D, respectively.
For example, the analytic system may count the number of times
different users accessed webpage 106 over a given time period and
count the total number of times each webpage object 114 was
selected. Fields 194A-194C then may display the hit rates for
webpage objects 114A, 114B, and 114D, respectively.
[0065] In one example, the replay manager may not display usage
clusters 142 over certain portions of webpage 106. For example, the
number of user clicks for webpage object 114E may be too small to
display an associated usage cluster 142. The replay manager still
may display analytic data by moving cursor 190 over webpage object
114E. The replay manager may detect the mouseover and display a
popup report (not shown) identifying a number of mouse clicks, or
any other usage information, associated with webpage object 114E.
The object displaying popup report may be located within fixed
layer 148 or scaled layer 146.
[0066] The replay manager may highlight one of webpage objects 114
in response to selection of one of fields 194. For example, the
operator may select field 194C to provide a visual indicator of the
associated webpage object 114D. In response to selection of field
194, the replay manager may insert an object within scaled layer
146 generating a transparent or translucent image 196 over webpage
object 114D and usage cluster 142D. For example, a first object
within fixed layer 148 may display usage repot 136. The first
object may active a second object within scaled layer 146 that
activates image 196.
[0067] FIG. 8 depicts one example of how the replay manager may
display objects within fixed layer after a zoom operation. In this
example, the replay manager may zoom-out webpage 106 in response to
the operator moving the slider-bar on zoom controller 128. The
replay manager may reduce the size of webpage 106 and webpage
objects 114 and display additional webpage object 114H.
[0068] The replay manager may again dynamically zoom-out scaled
layer 146 to match the zoom level of content layer 146. For
example, the replay manager may reduce the size of usage clusters
142 proportionally with the reduced size of associated webpage
objects 114. The replay manager also may reduce the size of
highlighted image 196 to match the reduced size of webpage object
114D.
[0069] The replay manager may continue to display usage information
and control information within fixed layer 148 independently of the
zoom level of content layer 144 and scaled layer 146. For example,
the replay manager may display usage report 136 and the usage
information within fields 194A-194C at the same size and location
as displayed prior to the zoom operation. The replay manager also
may display the zoom controller 152 at a same size and location
within fixed layer 148 as displayed before the zoom operation.
[0070] FIG. 9 depicts another example of how the replay manager may
dynamically zoom usage information. The replay manager may display
webpage 200 and webpage objects 204 and 208 within content layer
144. The replay manager may display usage clusters 206A-206D within
scaled layer 146 over associated webpage object 204. The replay
manager also may display usage clusters 210A-210D within scaled
layer 146 over associated with webpage object 208.
[0071] The replay manager may display zoom controller 128, an
analysis box 202, and a usage report 212 within fixed layer 148. A
first object within scaled layer 146 may count the usage
information within the boundary of analysis box 202. The first
object then may pass the count value to a second object within
fixed layer 148 that displays the count in usage report 212.
[0072] For example, analysis box 202 may extend over usage clusters
206C and 206D. The replay manager may count the number user clicks
associated with usage clusters 206C and 206D and display the count
number in usage report 212. For example, usage report 212 may
identify 20 data points selected for usage clusters 206C and
206D.
[0073] FIG. 10 depicts an example of how the display manager may
update usage information in the fixed layer. The operator may
change the zoom level of content layer 144 displayed in FIG. 9 by
moving the slider on zoom controller 128 with cursor 190. In this
example, the operator may zoom-out content layer layer 144 reducing
the size of webpage 200 and revealing an additional webpage 214.
The replay manager may reduce the size of webpage objects 204 and
208 in response to the zoom-out operation. The replay manager also
may change the zoom level of usage clusters 206 and 219 within
scaled layer 146 to match the new zoom level of content layer
144.
[0074] Analysis box 202 may cover a different group of usage
clusters after the change in the zoom level of content layer 144.
For example, analysis box 202 now may cover usage clusters 206A and
210A. The first object within scaled layer 146 associated with
analysis box 202 may recount the number of data points associated
with usage clusters 206A and 210A.
[0075] The first object may send the count number to the second
object within fixed layer 148 displaying analysis box 202. The
second object then displays the new count number in usage report
212. Thus, the replay manager may dynamically vary the usage
information displayed in analytic box 202 based on the zoom level
or movement of objects within content layer 144 and scaled layer
146.
[0076] The replay manager may display analytic box 202 at a default
size and location. The operator may use cursor 190 to resize and/or
reposition analytic box 202. The analytic engine may supply an
original set of data points to the replay manager. The replay
manager then may scale the number of data points and apply an
offset to the data points to determine what count value to display
within analytic box 202.
[0077] FIG. 11 depicts an example of a link analytics overlay. The
replay manager may display pin icons 222A-222C next to associated
HTML webpage objects 204, 208, and 209, respectively. The replay
manager also may display form fields 224A-224C next to associated
pin icons 222A-22C, respectively. The replay manager may display
pin icons 222 for the most highly selected webpage objects. For
example, the top selection rates may comprise 37.2% for webpage
object 204, 15.2% for webpage object 208, and 1.5% for webpage
object 209. The replay manager may display the selection rates in
associated form fields 224A-224C, respectively. The replay manager
may attach a first object to scaled layer 146 that displays pin
icons 222 and associated form fields 224.
[0078] The first object within scaled layer 146 may communicate
with a second object within fixed layer 148. The second object may
display a dialog box 220. The operator may select or hover over one
of pin icons 222, such as pin icon 222A. The first object within
scaled layer 146 may activate the second object within fixed layer
148 to display dialog box 220.
[0079] The first object also may send the selection rate for the
selected pin icon 222A to the second object. The second object then
may display the selection rate in dialog box 220. The second object
may display additional usage information. For example, dialog box
220 may identify both the 37.5% click rate for webpage object 204
and identify the total number of clicks or user selections for
webpage object 204.
[0080] FIG. 12 depicts an example of how the replay manager may
dynamically zoom the links analytics overlay. The operator may
zoom-out webpage 200 in response to a new zoom level selected by
the operator via zoom controller 128. Since pin icons 222 and
associated form fields 224 are located within scaled layer 146, the
replay manager may simultaneously zoom-out pin icons 222 and form
fields 224 with webpage 200.
[0081] Since dialog box 220 is located within fixed layer 148, the
replay manager may continue to display dialog box 220 and the usage
information within dialog box 220 at the same size and location
within fixed layer 148 independently of the new zoom level. The
first object within scaled layer 146 may continue to pass the
selection rate information to the second object within fixed layer
148. Thus, dialog box 220 continues to display the selection rate
information as form field 224A independently of the smaller size of
pin icon 222A, form field 224A, and the usage information within
form field 224A.
[0082] The dynamic zooming described above may be helpful when
displaying usage information for application sessions with mobile
devices. The mobile devices may have relatively small screens
compared with the screens on personal computers. Thus, an operator
may need to zoom-in and/or move the smaller electronic pages
associated with the mobile devices to view associated usage
information. Dynamic zooming allows an operator to zoom-in to
different specific locations with the electronic pages still
clearly see associated usage information.
Hardware and Software
[0083] FIG. 13 shows a computing device 1000 that may be used for
operating the dynamic zooming system discussed above. The computing
device 1000 may operate in the capacity of a server or a client
machine in a server-client network environment, or as a peer
machine in a peer-to-peer (or distributed) network environment. In
other examples, computing device 1000 may be a personal computer
(PC), a tablet, a Personal Digital Assistant (PDA), a cellular
telephone, a smart phone, a web appliance, or any other machine or
device capable of executing instructions 1006 (sequential or
otherwise) that specify actions to be taken by that machine.
[0084] While only a single computing device 1000 is shown, the
computing device 1000 may include any collection of devices or
circuitry that individually or jointly execute a set (or multiple
sets) of instructions to perform any one or more of the operations
discussed above. Computing device 1000 may be part of an integrated
control system or system manager, or may be provided as a portable
electronic device configured to interface with a networked system
either locally or remotely via wireless transmission.
[0085] Processors 1004 may comprise a central processing unit
(CPU), a graphics processing unit (GPU), programmable logic
devices, dedicated processor systems, micro controllers, or
microprocessors that may perform some or all of the operations
described above. Processors 1004 may also include, but may not be
limited to, an analog processor, a digital processor, a
microprocessor, multi-core processor, processor array, network
processor, etc.
[0086] Some of the operations described above may be implemented in
software and other operations may be implemented in hardware. One
or more of the operations, processes, or methods described herein
may be performed by an apparatus, device, or system similar to
those as described herein and with reference to the illustrated
figures.
[0087] Processors 1004 may execute instructions or "code" 1006
stored in any one of memories 1008, 1010, or 1020. The memories may
store data as well. Instructions 1006 and data can also be
transmitted or received over a network 1014 via a network interface
device 1012 utilizing any one of a number of well-known transfer
protocols.
[0088] Memories 1008, 1010, and 1020 may be integrated together
with processing device 1000, for example RAM or FLASH memory
disposed within an integrated circuit microprocessor or the like.
In other examples, the memory may comprise an independent device,
such as an external disk drive, storage array, or any other storage
devices used in database systems. The memory and processing devices
may be operatively coupled together, or in communication with each
other, for example by an I/O port, network connection, etc. such
that the processing device may read a file stored on the
memory.
[0089] Some memory may be "read only" by design (ROM) by virtue of
permission settings, or not. Other examples of memory may include,
but may be not limited to, WORM, EPROM, EEPROM, FLASH, etc. which
may be implemented in solid state semiconductor devices. Other
memories may comprise moving parts, such a conventional rotating
disk drive. All such memories may be "machine-readable" in that
they may be readable by a processing device.
[0090] "Computer-readable storage medium" (or alternatively,
"machine-readable storage medium") may include all of the foregoing
types of memory, as well as new technologies that may arise in the
future, as long as they may be capable of storing digital
information in the nature of a computer program or other data, at
least temporarily, in such a manner that the stored information may
be "read" by an appropriate processing device. The term
"computer-readable" may not be limited to the historical usage of
"computer" to imply a complete mainframe, mini-computer, desktop,
wireless device, or even a laptop computer. Rather,
"computer-readable" may comprise storage medium that may be
readable by a processor, processing device, or any computing
system. Such media may be any available media that may be locally
and/or remotely accessible by a computer or processor, and may
include volatile and non-volatile media, and removable and
non-removable media.
[0091] Computing device 1000 can further include a video display
1016, such as a liquid crystal display (LCD) or a cathode ray tube
(CRT)) and a user interface 1018, such as a keyboard, mouse, touch
screen, etc. All of the components of computing device 1000 may be
connected together via a bus 1002 and/or network.
[0092] For the sake of convenience, operations may be described as
various interconnected or coupled functional blocks or diagrams.
However, there may be cases where these functional blocks or
diagrams may be equivalently aggregated into a single logic device,
program or operation with unclear boundaries.
[0093] Having described and illustrated the principles of a
preferred embodiment, it should be apparent that the embodiments
may be modified in arrangement and detail without departing from
such principles. Claim is made to all modifications and variation
coming within the spirit and scope of the following claims.
* * * * *