METHOD AND APPARATUS FOR USING PROXIES TO INTERACT WITH WEBPAGE ANALYTICS
An overlay may be displayed over a webpage for displaying different analytics, such as displayed with heatmaps. The webpage is parsed to identify webpage objects. Proxy objects are generated for the identified webpage objects and displayed on Z-index layers above the overlay. The proxy objects are configured to detect and react to events on behalf of associated webpage objects. A mobile device proxy server may send mobile device requests on behalf of a desktop computing device and modify received webpages so the desktop computing device renders the webpages in substantially a same manner as a mobile device.
Latest TeaLeaf Technology, Inc. Patents:
- DYNAMIC ZOOMING OF CONTENT WITH OVERLAYS
- SYSTEM FOR CAPTURING AND REPLAYING SCREEN GESTURES
- CAPTURING AND REPLAYING APPLICATION SESSIONS USING RESOURCE FILES
- METHOD AND APPARATUS FOR CUSTOMER EXPERIENCE SEGMENTATION BASED ON A WEB SESSION EVENT VARIATION
- METHOD AND APPARATUS FOR USING PROXIES TO INTERACT WITH WEBPAGE ANALYTICS
The present application claims priority to U.S. Provisional Patent Application Ser. No. 61/545,105, entitled: PROCESS FOR DISPLAYING OVERLAY ANALYTICS AND TESTING FOR MOBILE SITES, filed Oct. 7, 2011, which is herein incorporated by reference in its entirety.
The present application is also a continuation-in-part of co-pending U.S. patent application Ser. No. 13/401,725, entitled: ON-PAGE MANIPULATION AND REAL-TIME REPLACEMENT OF CONTENT, filed Feb. 21, 2012, which claims priority to U.S. Provisional patent Application Ser. No. 61/445,528, entitled: USING RICH INTERNET APPLICATIONS FOR ON-PAGE MANIPULATION OF UNDERLYING CONTENT AND REAL-TIME CONTENT REPLACEMENT, filed Feb. 22, 2011 which are both herein incorporated by reference in their entirety.
The present application is also a continuation-in-part of co-pending U.S. patent application Ser. No. 12/750,607, entitled: VISUALIZATION OF WEBSITE ANALYTICS, filed Mar. 30, 2010, which claims priority to U.S. Provisional Application 61/165,084, entitled: VISUALIZATION OF WEBSITE ANALYTICS, filed Mar. 31, 2009, which are both herein incorporated by reference in their entirety.FIELD
This application relates generally to data processing and, more specifically, to overlaying information on webpages.BACKGROUND
A client monitoring system may detect events, such as mouse clicks, selections, keystroke entries, etc. for different locations within a webpage. An analyses system may count the number of events for the different locations within the webpage and generate usage clusters. The usage clusters are visually displayed in a heatmap and show where the events happened within the webpage and the number of events at the different locations. For example, a darker usage cluster may represent more events in the associated webpage location and a lighter usage cluster may represent fewer events in the associated webpage location. In another example, usage clusters may be displayed in different colors to indicate different events or different numbers of events.
The heatmap may comprise an overlay displayed over the webpage and the usage clusters displayed within the overlay. The usage clusters may be aligned with associated webpage objects within the underlying webpage. This allows a user to visually associate the information provided by the usage clusters with associated underlying webpage objects. However, the overlay may block interaction with objects within the underlying webpage. For example, the overlay may be located at a higher Z-index level of the webpage and prevent lower level webpage objects from detecting events, such as mouseovers, mouse clicks, etc. Thus, the overlay may prevent or restrict user interaction with underlying webpages.
Computing device 90 may conduct web sessions with a web application operating on a website. The web application may support any type of online session such as online purchases or online financial services. Of course, these are just examples, and any type of electronic web based transaction or online activity may be performed in the web session between computing device 90 and the website.
Computing device 90 may communicate with the website over a network connection. The network connection may comprise any combination of connections over an Internet network, a wireless network, a telephone network, Public Services Telephone Network (PSTN), a cellular network, a Wi-Fi network, a cable network, a Wide Area Network (WAN), a Local Area Network (LAN), or the like, or any combination thereof.
During the web session, the website may send webpage 100 to computing device 90. Webpage 100 may contain multiple different webpage objects 128A-128H. For example, a tool bar 110 within webpage 100 may contain a webpage object 128A comprising text that identifies an Internet domain name for the website. A webpage object 128B may comprise a link to another webpage containing additional information regarding the website. A webpage object 128C may comprise another link to another webpage containing additional information regarding the website. A webpage object 128D may comprise a link to another webpage for signing up to the website.
A main body 128I of webpage 100 may include a webpage object 128E comprising a first block of text and a webpage object 128F comprising a second block of text. A webpage object 128G may comprise an icon and text that when selected link to yet another webpage for the website. A webpage object 128H may comprise an image representing additional information related to the website. Webpage objects 128 are just examples and any type of content and/or items that may be contained within webpage 100.
Tags may be attached to webpage objects 128 to detect different events. For example, Hyper-Text Markup Language (HTML) DIV tags may be used to define a division or a selection of objects within an HTML document. HTML DIV tags are just one example, and any objects may be used where events can be attached. For example, other objects may comprise, but are not limited to, an img, a span, an HTML tag “object”, a Java object, a Silver Light object, a Flash object, or the like, or any combination thereof.
A user may move a cursor 132 over webpage object 128G and click a left mouse button or enter a keystroke on a keyboard of computing device 90. The DIV tag may detect selection of webpage object 128G and send an associated Hyper-Text Transfer Protocol (HTTP) request to the website (see
Overlay 124 may comprise an HTML object having a size configured to cover webpage 100. Overlay 124 may be displayed in a transparent color so underlying webpage objects 128 can be viewed in association with usage clusters 150. For example, a usage cluster 150A may indicate a number of mouse clicks for some defined time on underlying webpage object 128B during different user web sessions.
HTML comprises a Z-index property that specifies a stack order of HTML elements. An element with a greater stack order may be displayed in front of an element with a lower stack order. The object associated with overlay 124 may be located in a Z-index level above webpage 100 and may block access to webpage objects 128.
An operator may move cursor 132 over overlay 124 and may want to click on one of webpage objects 128. For example, the operator may want to open a pop-up window to view more detailed analytic information related to the selected webpage object 128. Since overlay 124 completely covers webpage 100 and is located at a higher Z-index layer, webpage objects 128 may not be able to detect and/or react to the user selection. Thus, overlay 124 disables user interaction with underlying webpage elements 128 and heatmap usage clusters 150.
Analytics obtained from previously monitored web sessions may be generated and displayed as usage clusters 150 within a heatmap displayed over webpage 100. A proxy object generator 190 may generate an overlay 124 that contains the heatmap or may display overlay 124 over the heatmap. To enable operator interaction with webpage objects 128, proxy object generator 190 generates proxy objects 204 on Z-index layers above webpage 100 and overlay 124. Proxy objects 204 may be configured to act as proxies for detecting and reacting to events associated with underlying webpage objects 128. For example, proxy objects 204 can be configured to detect mouseovers and initiate actions, such as displaying pop-up windows associated with underlying webpage objects 128. Thus, proxy objects 204 convert previously static heatmaps into interactive overlays that can now detect and respond to operator initiated events.
Proxy object generator 190 may parse through the HTML Document Object Model (DOM) for webpage 100 and identify webpage objects 128. Proxy objects 204 are generated for the identified webpage objects 128. For example, a proxy object 204A may be generated for webpage object 128A, proxy object 204E may be generated for webpage object 128E, and proxy object 204F may be generated for webpage object 128F.
Proxy object generator 190 may identify a location and size of webpage objects 128 and create proxy objects 204 with corresponding sizes and locations. For example, proxy object generator 190 may identify a size and location of webpage object 128F within webpage 100. Proxy object generator 190 may create an associated proxy object 204F with substantially a same size and a same relative location as object 128F. Proxy object generator 190 then may display proxy object 204F as a box above overlay 124 that outlines webpage object 128F.
Each proxy object 204 may be located at a different Z-index layer 200 above overlay 124. However, for illustrative purposes some of proxy objects 204 in
Proxy objects 204E and 204F correspond to objects 128E and 128F, respectively, and are shown in Z-index layer 200D. However, each of proxy objects 204E and 204F also may be located in different Z-index layers. Proxy objects 204G and 204H correspond to objects 128G and 128H, respectively, and are shown in Z-index layer 200E, but again may be located in different Z-index layers.
In another example, a server may render webpage 100 as an image and supply the rendered image and coordinates for objects contained in webpage 100 to a client operating on a desktop computer. For example, the server may render a static JPEG or PNG image of webpage 100 using a browser engine, such as Chrome®. The server may generate a list of DOM objects within web page 100 and calculate locations and sizes of the DOM objects at the time of rendering. Generating lists of DOM objects for webpages is described in more detail below.
The image of the webpage and a list of objects and their X,Y properties and locations within the webpage may be sent from the server to the client operating on the desktop computer. The client computer may use the list of X,Y coordinates to position usability date such as heatmaps, link analytics, form analytics, etc. The client desktop computer may then display the usability data at the listed X,Y locations on one or more separate layers over the static webpage image. The client computer may generate and display other proxy objects including overlay 124 and proxy objects 204 over image 100 based on the X,Y coordinates provided by the server.
Rendering web page 100 and identifying associated objects on the server allows the server to operate in the browser environment used during the original web session. The client computer can then use a different web browser, or a different version of the web browser, to display the webpage image and associated proxy objects and analytic data.
Proxy objects 204 enable an operator to interact on behalf underlying webpage objects 128. For example, cursor 132 may be moved over webpage object 128G and associated proxy object 204G. Previously, events associated with webpage object 128G could not be detected due to blocking by overlay object 124. However, proxy object 204G is located in the Z-index stack above overlay 124 and can therefore detect movement of cursor 132 over associated webpage object 128G. Proxy objects 204 can detect any event previously detectable by webpage objects 128 and can provide any action that may have previously been initiated by webpage object 128.
For example, an analytics engine may generate analytics for webpage 100 and for individual webpage objects 128 within webpage 100. The on-page analytics engine may use Rich Internet Application (RIA) based, for example, on HTML 5, Adobe Flash or Microsoft Silverlight. In one example, the analytics engine may be implemented and operate as described in co-pending U.S. patent application Ser. No. 12/750,607, entitled: VISUALIZATION OF WEBSITE ANALYTICS, filed Mar. 30, 2010 which is incorporated by reference in its entirety.
Overlay 124 may operate in conjunction with the analytics engine for viewing, changing, and/or reporting the analytics information. For example, proxy object 204G may display a usage report 220 in response to detecting cursor 132 hovering or clicking on webpage object 128G. Report 220 can display information associated with webpage 100 and/or webpage object 1280. For example, report 220 may display a number of views for webpage 100, a number of clicks on webpage object 128G, a bounce rate percentage for webpage 100, or the like, or any combination thereof.
In one example, report 220 may provide more specific information associated with a usage cluster 150B displayed over webpage object 128G. For example, report 220 may indicate when the clicks associated with usage cluster 150B were detected, the number of clicks in usage cluster 150B that resulted in purchases, demographic information for the users associated with heat usage cluster 150B, or the like, or any combination thereof.
In another example, usage clusters 150 may not be displayed over certain portions of webpage 100. For example, the number of clicks on webpage object 128F may have been too small to generate a usage cluster 150. A user can still view analytic data associated with webpage object 128F by moving cursor 132 over associated proxy object 204F. Proxy object 204F may detect the mouseover and display a report identifying a number of mouse clicks and other analytic information associated with underlying webpage object 128F.
Proxy object generator 190 may also improve layouts for underlying webpages. For example, some webpages may have overlapping webpage objects where the image for the DIV of a first object uses a first area of the webpage and the image for the DIV of a second object uses a second larger area that overlaps some portion of the first object. The first object is at a lower Z-index level and may not be able to detect the events in the area overlapped by the second object.
Proxy object generator 190 may sort webpage objects 128 according to size and compensate for overlapping objects. For example, proxy objects 204 generated for larger sized webpage objects 128 may be located at lower Z-index levels than proxy objects 204 generated for smaller webpage objects 128. This may prevent larger proxy objects 204 from covering smaller proxy objects 204.
In another example, proxy object generator 190 may generate proxy objects 204 with reduced sizes or realigned positions compared with the associated webpage objects 128. This may provide clearer demarcations within overlay 124 between different underlying webpage objects 128. For example, a large webpage object 128 may fully or partially overlap one or more adjacent webpage objects 128. Proxy object generator 190 may generate a proxy object 204 having a smaller size than the associated larger webpage object 128. The proxy object 204 may be centered at a center location of associated larger webpage object 128. This may reduce an amount the proxy object 204 overlaps with adjacent proxy objects.
In yet another example, two webpage objects 128 may substantially overlap each other. Proxy object generator 190 may attach a DIV tag to a first proxy object 128 associated with a top one of the two overlapping webpage objects 204. The DIV tag may send detected events to the second underlying one of the proxy objects 204 associated with the bottom one of the two overlapping webpage objects 128 after the cursor hovers over the first overlying proxy object 204 for more than a predetermined time.
In operation 252, the Document Object Model (DOM) for the webpage may be parsed and the webpage objects identified in a list. The proxy object generator may start at a top of the webpage DOM and produce a list comprising unique identifiers for each webpage object associated with one of the identified tag types. In operation 254, locations of the webpage objects are identified. For example, X-Y locations are identified for a particular corner for each of the identified webpage objects within webpage 100. In operation 256, a size of webpage objects 128 are identified in the HTLM of webpage 100.
In operation 258, the webpage objects identified in the list may be reordered based on particular criteria. The list of webpage objects may originally be in the order they exist within the DOM of the webpage. Accordingly, the Z-indices for the list of webpage objects may be in the same order. The list may be reordered according to object size, tag types, etc. For example, larger webpage objects may be relocated in the list before smaller webpage objects. The proxy object generator may generate the proxy objects according to the order of the associated webpage objects in the list. Thus, a proxy object associated with a larger webpage object will be located at a lower Z-index level and not cover a proxy object associated with a smaller webpage object.
In another example, the webpage objects may be further reordered in the list according to tag types. For example, after reordering according to size, the list may be reordered so that anchor tags are located before DIV tags. The reordering may be performed automatically based on preconfigured user settings or may be manually reordered by the operator. Thus, proxy objects associated with DIV tags may be located on higher Z-index levels than proxy objects associated with anchor tags.
In operation 260, representations may be generated for the proxy objects. For example, box outlines similar to those shown in
The proxy objects may be generated in any programming language, such as Flash or HTML5. For example, HTML5 for the proxy objects may comprise a DIV to display the proxy object within the overlay and include an event for detecting an on MouseOver or onClick operation.
In operation 262, the proxy objects are displayed above the overlay and may detect any corresponding events. For example, the proxy objects may detect any associated mouseover or mouse click in a designated region of the overlay and may generate an associated response, such as displaying an associated report as shown in
Container 284 may include an overlay 286 and a proxy object 288. Container 284 may start at a next Z-index level above HTML document 282. Overlay 286 may comprise a canvas object 286 for drawing a heatmap that resides at a next higher Z-index layer above container 284. Drawing and SVG graphics 292 for canvas object 286 may be implemented using Java Script. Proxy object 288 may be located at a next higher Z-index layer above canvas object 286 and may comprise HTML code for displaying the proxy object and any attachments for detecting events.
Canvas object 286 is just one example of any possible object that may create a blocking condition in a desktop or mobile DOM. A Div is just one example of proxy object 288 and may by any object in a desktop or mobile DOM where an event can be attached. For example, the blocking objects and/or the proxy objects may be a DIV, an img, a span, an HTML tag “object”, a Java object, a Silver Light object, a Flash object, or the like, or any combination thereof.
A conceptual Z-index 296 for webpage 280 shows HTML document 282 at a bottom layer of Z-index 296, canvas 290 at a next higher Z-index layer above HTML document 282, and proxy object 288 at a next higher Z-index layer above canvas 290. Accordingly, any events 298 entered by an operator 300 can be detected by proxy object 288 and will not be blocked by canvas 290.
The proxy objects inserted into webpage 280 may be less intrusive than other interactive schemes for displaying information in conjunction with webpage elements. For example, other schemes may inject additional display objects within HTML document 282 adjacent to associated webpage objects. Adding just one additional display object into the middle of HTML code may change how subsequent objects in the HTML code are displayed. For example, the added display objects may change where original webpage objects are displayed within HTML document 282 or may collide with other displayed webpage objects. Proxy object 288 is located above the Z-index levels for webpage objects in HTML document 282. This prevents the proxy objects from changing how the webpage objects are displayed in the original webpage.
In another example, the proxy object generator may be used for generating variations of webpage 280. For example, original webpage objects with webpage 280 may be displayed as proxy objects above the overlay. The overlay may cover and blank out the underlying original webpage objects and display images of the same webpage objects as proxy objects within the overlay. The operator may reposition, edit, remove, and/or add to the proxy objects above the overlay. After modifying the proxy objects above the overlay, the same changes may automatically be made to the HTML of the underlying webpage.
In another example, individual webpage objects may be imported into the overlay as proxy objects. A particular webpage object within the underlying webpage may be blanked out by the overlay. A proxy object associated with the imported webpage object may be displayed within the overlay over the blanked out underlying webpage object. Other webpage objects within the underlying webpage may be viewed through the overlay. The operator can edit, move, and/or replace the proxy object and view how the modified proxy object appears in combination with the other underlying webpage objects. After editing the proxy object, the HTML code for the modified proxy object may be inserted into the underlying webpage replacing the HTML code for the corresponding underlying webpage object.
In one example, mobile device 320 may run a mobile software application for accessing mobile web application 342. In one example, the mobile software application may comprise a mobile web browser. However, any type of mobile software application may be operated on mobile device 320. A user of mobile device 320 may be a customer or subscriber of the enterprise operating website 338. The mobile software application may send headers in a request 330 identifying a particular model of mobile device 320. Web application 342 may send a response 332 back to mobile device 320 comprising HTML data. The mobile application or browser operating on mobile device 320 may render the HTML data as an electronic page 322 on screen 321.
An operator may be a person employed by the enterprise operating website 338 to manage content provided by web application 342. The operator may modify objects 324 in the electronic page 322 provided by mobile web application 342 to increase sales for products sold on website 338. For example, one of elements 324 may comprise an icon that a user selects when purchasing an item. The operator may want to change the color of the icon from green to red with the hope of causing more users to select the icon and purchase more associated items. In another example, the operator may want to redirect user activity to different webpages for website 338 or add new content for new products or services. The operator also may want to view analytics associated with electronic page 322. For example, the operator may want to view heatmaps showing user activity for different page objects 324.
A variant manager may operate on desktop computing device 90. The variant manager may open user interface 122 on computing device 90 and download electronic page 322 from web server 340. The variant manager also may display an overlay over electronic page 322 as described above. The overlay may be a transparent, semitransparent and/or opaque rendering and may allow the operator to see and manipulate objects 324 contained within electronic page 322 and/or view heatmaps associated with electronic page 322.
However, the size of screen 92 on desktop computing device 90 may be different from the size of screen 321 on mobile device 320. For example, computing device 90 may be a personal computer with a screen size of 1024×1080 pixels and mobile device 320 may be a smart phone with a screen size of 640×320 pixels. Desktop computing device 90 may operate a web browser that renders electronic page 322 over the entire user interface 122 and mobile device 320 may operate a mobile web browser that renders electronic page 322 over the entire screen 321.
Accordingly, the rendering of electronic page 322 on mobile device 320 may be different from the rendering of electronic page 322 on desktop computing device 90. The different renderings may prevent the operator on desktop computing device 90 from making accurate or optimal changes to electronic page 322. For example, one of objects 324 may be displayed clearly within user interface 122 of desktop computing device 90 but may be blurry or hard to decipher when displayed within screen 321 of mobile device 320.
A mobile device proxy server 350 provides the same rendering of electronic page 322 on mobile device 320 and on desktop computing device 90. For example, the operator may access electronic page 322 through a web browser/user interface 122. User interface 122 may send a HTTP request 356 to mobile web application 342 via mobile device proxy server 350. Mobile device proxy server 350 may forward a modified request 352 to web application 342. Modified request 352 may include mobile device tags similar to those sent by mobile device 320 in request 330. Web application 342 sends a response 354 back to proxy server 350 comprising the HTML and any other electronic data associated with mobile electronic page 322.
Mobile device proxy server 350 modifies electronic page 322 to provide a same mobile format rendered by mobile device 320 and returns the modified electronic page as response 358 back to desktop computing device 90. For example, HTML may not explicitly call out displaying electronic data page 322 in a 640×320 pixel format. However, the mobile browser operating on mobile device 320 may automatically render electronic page 322 in the 640×320 pixel format.
Mobile device proxy server 350 may modify HTML, Cascade Styling Sheets (CSS), etc., in electronic page 322 so that desktop computing device 90 provides the same rendering of electronic page 322 as mobile device 320. For example, mobile device proxy server 350 may modify the HTML within electronic page 332 to specifically call out a max_width=640 pixels and a max_height=320 pixels. The modified HTML may render electronic page 322 within desktop computing device 90 at the same size as electronic page 322 within mobile device 320. This allows the operator to more effectively observe and modify electronic page 322 on desktop computing device 90.
In one example, unused space within user interface 122 may be used for displaying other information associated with viewing or modifying electronic page 322. For example, the operator may move a cursor 360 over one of the objects 324 within electronic page 322 and click a mouse button or enter a keystroke. User interface 122 may display a window 362 identifying analytics for electronic page 322. For example, window 362 may identify a number of page views over some predefined time period or may identify a number of clicks on the selected object 324.
The mobile device proxy server 350 may operate in combination with the proxy object generator 190 described in
In operation 404, the proxy server may parse through the electronic page received back from the website. The proxy server then may modify HTML, Java Script, XHTML, XML, CSS, or the like, or any combination thereof, so the desktop computing device renders the electronic page in substantially the same format as the mobile device. For example, maximum vertical and horizontal pixel widths for the electronic page may be defined to replicate a same screen size as the mobile device.
In operation 406, the modified electronic page is sent to the desktop computing device. The modified mobile page then may be rendered by the user interface on desktop browser in substantially the same format and size as rendered by the mobile browser operating on the mobile device.
The example computer system 1000 includes an engine or multiple engines 1002 (e.g., a central processing unit (CPU), a graphics processing unit (GPU), or both), and a main memory 1004 and a static memory 1006, which communicate with each other via a bus 1008. The computer system 1000 can further include a video display unit 1010 (e.g., a liquid crystal displays (LCD) or a cathode ray tube (CRT)). The computer system 1000 also includes an alphanumeric input device 1012 (e.g., a keyboard), a cursor control device 1014 (e.g., a mouse), a disk drive unit 1016, a signal generation device 1018 (e.g., a speaker) and a network interface device 1020.
The disk drive unit 1016 includes a computer-readable medium 1022 on which is stored one or more sets of instructions and data structures (e.g., instructions 1024) embodying or utilized by any one or more of the methodologies or functions described herein. The instructions 1024 can also reside, completely or at least partially, within the main memory 1004 and/or within the engines 1002 during execution thereof by the computer system 1000. The main memory 1004 and the engines 1002 also constitute machine-readable media.
The instructions 1024 can further be transmitted or received over a network 1026 via the network interface device 1020 utilizing any one of a number of well-known transfer protocols (e.g., Hyper Text Transfer Protocol (HTTP), CAN, Serial, Modbus).
While the computer-readable medium 1022 is shown in an example embodiment to be a single medium, the term “computer-readable medium” should be taken to include a single medium or multiple media (e.g., a centralized or distributed database, and/or associated caches and servers) that store the one or more sets of instructions. The term “computer-readable medium” shall also be taken to include any medium that is capable of storing, encoding, or carrying a set of instructions for execution by the machine and that causes the machine to perform any one or more of the methodologies of the present application, or that is capable of storing, encoding, or carrying data structures utilized by or associated with such a set of instructions. The term “computer-readable medium” shall accordingly be taken to include, but not be limited to, solid-state memories, optical and magnetic media. Such media can also include, without limitation, hard disks, floppy disks, flash memory cards, digital video disks, random access memory (RAMs), read only memory (ROMs), and the like.
The example embodiments described herein can be implemented in an operating environment comprising computer-executable instructions (e.g., software) installed on a computer, in hardware, or in a combination of software and hardware. The computer-executable instructions can be written in a computer programming language or can be embodied in firmware logic. If written in a programming language conforming to a recognized standard, such instructions can be executed on a variety of hardware platforms and for interfaces to a variety of operating systems. Although not limited thereto, computer software programs for implementing the present method can be written in any number of suitable programming languages such as, for example, Hyper text Markup Language (HTML), Dynamic HTML, Extensible Markup Language (XML), Extensible Stylesheet Language (XSL), Document Style Semantics and Specification Language (DSSSL), Cascading Style Sheets (CSS), Synchronized Multimedia Integration Language (SMIL), Wireless Markup Language (WML), Java™, Jini™, C, C++, Perl, UNIX Shell, Visual Basic or Visual Basic Script, Virtual Reality Markup Language (VRML), ColdFusion™ or other compilers, assemblers, interpreters or other computer languages or platforms.
Thus, systems and methods for page setup and real-time content replacement in A/B testing have been described. Although embodiments have been described with reference to specific example embodiments, it will be evident that various modifications and changes can be made to these example embodiments without departing from the broader spirit and scope of the present application. Accordingly, the specification and drawings are to be regarded in an illustrative rather than a restrictive sense.
The detailed description includes references to the accompanying drawings, which form a part of the detailed description. The drawings show illustrations in accordance with example embodiments. These example embodiments, which are also referred to herein as “examples,” are described in enough detail to enable those skilled in the art to practice the present subject matter. The embodiments can be combined, other embodiments can be utilized, or structural, logical and electrical changes can be made without departing from the scope of what is claimed. The following detailed description is, therefore, not to be taken in a limiting sense, and the scope is defined by the appended claims and their equivalents.
In this document, the terms “a” or “an” are used, as is common in patent documents, to include one or more than one. In this document, the term “or” is used to refer to a nonexclusive “or,” such that “A or B” includes “A but not B,” “B but not A,” and “A and B,” unless otherwise indicated. Furthermore, all publications, patents, and patent documents referred to in this document are incorporated by reference herein in their entirety, as though individually incorporated by reference. In the event of inconsistent usages between this document and those documents so incorporated by reference, the usage in the incorporated reference(s) should be considered supplementary to that of this document; for irreconcilable inconsistencies, the usage in this document controls.
Having described and illustrated the principles of various examples, it should be apparent that the examples may be modified in arrangement and detail without departing from such principles. Claim is made to all modifications and variations coming within the spirit and scope of the following claims.
1. A method, comprising:
- identifying webpage objects within a webpage;
- generating proxy objects associated with the webpage objects;
- displaying an overlay over the webpage; and
- displaying the proxy objects over the overlay.
2. The method of claim 1, further comprising configuring the proxy objects to detect and react to events on behalf of the associated webpage objects.
3. The method of claim 1, further comprising:
- identifying locations for the webpage objects; and
- locating the proxy objects over the locations of the associated webpage objects.
4. The method of claim 1, further comprising:
- identifying sizes for the webpage objects; and
- generating the proxy objects at substantially the sizes of the associated webpage objects.
5. The method of claim 1, further comprising:
- displaying the overlay at a Z-index level above the webpage; and
- displaying the proxy objects at Z-index levels above the Z-index level of the overlay.
6. The method of claim 1, further comprising:
- generating a list of the webpage objects in an order according to size; and
- generating the proxy objects on Z-index levels according the order of the webpage objects in the list.
7. The method of claim 1, further comprising:
- identifying Hyper Text Markup Language (HTML) tags for the webpage objects; and
- generating the proxy objects based on the HTML tags.
8. The method of claim 1, further comprising:
- displaying a heatmap within the overlay over the webpage; and
- displaying the proxy objects over the heatmap.
9. The method of claim 1, further comprising:
- identifying a first one of the webpage objects overlapping a second one of the webpage objects;
- identifying a first size of the first one of the webpage objects; and
- generating one of the proxy objects associated with the first one of the webpage objects at a second size smaller than the first size.
10. The method of claim 1, further comprising:
- detecting an event with a first one of the proxy objects overlapping a second one of the proxy objects;
- responding to the event with the first one of the proxy objects when the event is detected for a first time duration; and
- sending the event to the second one of the proxy objects when the event is detected for a second longer time duration.
11. The method of claim 1, further comprising:
- detecting modifications to an identified one of the proxy objects; and
- making similar modifications to one of the webpage objects associated with the identified one of the proxy objects.
12. The method of claim 1, further comprising:
- receiving a request from a desktop computing device for the webpage, wherein the webpage is configured for displaying on a mobile device;
- sending a mobile device request on behalf of the desktop computing device for the webpage;
- receiving back the webpage;
- modifying the webpage to render on the desktop computing device in substantially a same manner as on the mobile device; and
- sending the modified mobile webpage to the desktop computing device.
13. The method of claim 12, wherein modifying the webpage comprises specifying a maximum width and maximum height for the webpage corresponding to a width and height of a screen on the mobile device.
14. The method of claim 1, further comprising:
- rendering an image of the webpage on a server; and
- sending a list of the webpage objects and an image of the webpage to a client for generating the proxy objects.
15. An apparatus, comprising:
- a memory configured to store a webpage;
- logic circuitry configured to: identify webpage elements for the webpage; generate proxy objects associated with the webpage elements; display an overlay object over the webpage; and display the proxy objects over the overlay object.
16. The apparatus of claim 15, wherein the logic circuitry is further configured to:
- display the overlay so the webpage can be viewed through the overlay; and
- display the proxy objects above the overlay and in alignment with the associated webpage elements.
17. The apparatus of claim 15, wherein the proxy objects comprise outlines that surround outside edges of the associated webpage elements.
18. The apparatus of claim 15, wherein the logic circuitry is further configured to:
- detect events with the proxy objects;
- initiate actions for the associated webpage elements in response to detecting the events.
19. The apparatus of claim 18, wherein the actions comprise displaying analytics for the associated webpage elements.
20. The apparatus of claim 15, wherein the logic circuitry is further configured to:
- hide the webpage elements on the webpage;
- display images of the webpage elements as the proxy objects;
- detect changes in the proxy objects; and
- modify the webpage elements to reflect the changes in the proxy objects.
21. The apparatus of claim 15, further comprising:
- a server configured to:
- render an image of the webpage;
- generate a list of the webpage elements; and
- send the image of the webpage and the list of the webpage elements to a client operating on the logic circuitry.
22. An apparatus, comprising:
- logic circuitry configured to:
- receive a request from a desktop computing device for an electronic page, wherein the electronic page is configured for displaying on a mobile device;
- send a mobile device request for the electronic page to a website on behalf of the desktop computing device;
- receive back the electronic page;
- modify the electronic page to render on the desktop computing device in substantially a same manner as on the mobile device; and
- send the modified electronic page to the desktop computing device.
23. The apparatus of claim 22, wherein the electronic page is modified by specifying a maximum display width and a maximum display height corresponding to a width and height of a screen on the mobile device.
24. The apparatus of claim 22, wherein the logic circuitry is further configured to:
- parse a Document Object Model (DOM) for the electronic page for page elements;
- generate proxy objects for elements in the electronic page;
- display an overlay over the electronic page;
- display the proxy objects over the overlay; and
- configure the proxy objects to detect events and initiate actions on behalf of the associated elements in response to the detecting the events.