Patent Publication Number: US-7584435-B2

Title: Web usage overlays for third-party web plug-in content

Description:
CROSS-REFERENCE TO RELATED APPLICATIONS 
     The present application claims priority from U.S. Provisional patent application Ser. No. 60/688,274, for “Applying A Web Usage Overlay To Output Of Third-Party Web Plug-Ins,” filed Jun. 6, 2005, the disclosure of which is incorporated herein by reference. 
     The present invention is a continuation-in-part of U.S. Utility patent application Ser. No. 10/794,809, for “Associating Website Clicks with Links on a Web Page,” filed Mar. 3, 2004, the disclosure of which is incorporated herein by reference. 
    
    
     FIELD OF THE INVENTION 
     The present invention relates generally to tracking website usage, and more particularly to monitoring and tracking user interaction with third-party web plug-ins and related content. 
     BACKGROUND OF THE INVENTION  
     Web analytics refers to the analysis of data created by website usage. For instance, web analytics can be used to mine visitor traffic data. A variety of visitor traffic data is measured such as what browser is being used, what links on a given web page were selected, whether a product was purchase, etc. A number of web analytics tools are presently available, such as Site Catalyst version 11 from Omniture of Orem, Utah. These tools are able to capture data on website usage, and responsive to a user&#39;s request display a variety of different metrics on website usage such fallout/conversion, A/B testing, and the like. 
     In an on-line environment, website usage and other customer behavior may be tracked by a website server, or by another server such as a data collection server (also known as a data collector), which may be remotely located. The data collection server is notified of activity on a website so that it can monitor and track the activity. One method of achieving this notification is through the use of a request for embedded content. 
     Embedded content is part of a web page, such as an image, that is requested as a separate file from the file containing the web page. The separate file may be requested from the website server or from a remote server, such as a remote content server or data collection server. For example, when a user requests a web page from a website server, the website server sends the web page file to the user&#39;s client. The client, such as a web browser, then attempts to render the file as a viewable web page. However, upon rendering the web page file, the client may find a reference to a separate file located on the website server or a remote server. After the content is located and sent to the client, the client renders the separate file containing the embedded content along with the original web page. 
     A web beacon (also known as a web bug) is a particular type of embedded content where the content itself is irrelevant, but the request for content carries useful information. For example, a web beacon is often a transparent image having very small dimensions, such as 1 pixel by 1 pixel. This image is small enough to be invisible to the user. When a client is rendering a web page that includes a web beacon, the web beacon causes the client to send a resource request to a server such as a data collection server. The web beacon may include a script (or other code) that causes the client to include, in the resource request, additional information about the user and the user&#39;s environment. The additional information can include the data from a cookie, or other information about the client&#39;s operating environment or status. Where the server indicated by the web beacon code is a data collection server, the data collection server may, in response to the request, cause the client to set an additional cookie for identification for tracking purposes. In this manner, the web beacon request can be used to indicate to a data collection server that a particular web page is being rendered. 
     One method for including the request is to write the request as a static image tag in Hypertext Markup Language (HTML). The following is an example of an image tag in HTML: 
     &lt;img src=“http://example.com/tracker.exe?AID=14658&amp;PID=259294&amp;banner=0.gif” width=1 height=1 border=0&gt; 
     Here, the term “ad.datacollectionserver.com” refers to the address of the data collection server. 
     Another common method of including the request is to use a scripting language such as JavaScript so as to cause the browser to dynamically generate a request to the data collection server. One advantage of using a script instead of a static image tag is that the script can cause the browser to perform other functions including gathering additional data and sending it along with the request. In either case, the result is a request sent to the data collection server upon the occurrence of an event, such as the loading and rendering of a web page. 
     Once the request has been sent to the data collection server, the data collection server can perform various types of tracking functions. For example, the data collection server can count the number of requests associated with a web page so as to monitor traffic on the web page. By counting the number of times the web beacon element has been requested from the data collection server, the server can determine the number of times a particular page was viewed. By using JavaScript to dynamically construct the request for the web beacon and encode additional information, other identifying information can be obtained for further analysis. 
     Other types of website usage tracking are also well known, such as for example log file analysis. In such an approach, statistical analysis is performed on server logs in order to detect and analyze website traffic and usage patterns. 
     One mechanism for presenting website usage and traffic data, as described in related U.S. Utility patent application Ser. No. 10/794,809, for “Associating Website Clicks with Links on a Web Page,” filed Mar. 3, 2004, is to superimpose color-coded indications on a representation of a web page (or other online resource). Different colors can be used to represent different levels of activity for the various portions of the web page. For example, on-screen links that experience heavy traffic can be overlaid with one color, while links that experience less traffic can be overlaid with another color. A legend can be provided for explanatory purposes with respect to each of the colors. 
     For example, referring now to  FIG. 2 , there is shown an example of a page analysis report  201 , displayed alongside an image of the web page  102  being analyzed. In one embodiment, report  201  is provided to a site administrator or owner interacting with data collection server  106 . 
     In the example of  FIG. 2 , report  201  includes identification  202  of the website and web page being analyzed; report date  203 ; report options and settings  204 ; page metrics  205 ; and links  206  to related reports. In addition, variable levels and shades of color density are superimposed on the displayed view of web page  102 , in order to visually represent the relative number of clicks each item  208  or screen region has received. Color key  207  is a legend to indicate the meaning of various superimposed colors. 
     It is desirable to generate web usage overlays to areas of a web page that are occupied by or rendered by web plug-ins, including plug-ins provided by a third party, so as to provide a graphical display of user behavior with respect to content provided by such plug-ins. For example, it may be desirable to display a color-coded overlay showing user interactions with various elements of an interactive Flash movie, Java applet, or the like. In order to display an overlay having visual characteristics that align with the underlying elements (for example, to color-code various user interface elements), it is necessary to ascertain the dimensions of each of the underlying elements. 
     What is needed, therefore, is a technique for determining the dimensions of elements within plug-in content, even when such content was provided by a third party. What is further needed is a technique for generating a web usage overlay for such plug-in content. 
     SUMMARY OF THE INVENTION 
     The present invention provides a mechanism for determining the dimensions of elements within plug-in resources (such as content and/or applications), so as to enable generation of web usage overlays for areas of a web page occupied by such plug-ins. 
     According to one aspect of the invention, an element within the plug-in resources is moved to one or more corners of the output region of the plug-in resource. Changes in dimensions of the output region are detected, and the dimensions of the element are calculated. The element is then restored to its original position. The information regarding changes in dimensions is generally available from third-party plug-in applications and can be readily extracted therefrom. 
     Once the dimensions of the element are known, an overlay can be generated that visually aligns with the plug-in resource. Thus, when the overlay is presented, color-coding and other visual features are properly positioned and sized within the overall display. 
     The present invention can be used for overlay generation for any type of plug-in content, such as for example a movie presentation, whether interactive or non-interactive. One example of such a movie presentation is that provided by an application such as Flash, provided by Macromedia of San Francisco, Calif. For example, it may be desirable to provide a color-coded overlay indicating related popularity and/or traffic for various interactive components (such as buttons) in a Flash movie. One skilled in the art will recognize that the techniques described herein can also be applied to other types of plug-ins, including for example QuickTime movies, Java applets, and the like. 
     The present invention can also be used for generating other types of usage reports, including for example hard copy output, text or graphical reports, and the like. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
       The accompanying drawings illustrate several embodiments of the invention and, together with the description, serve to explain the principles of the invention. 
         FIG. 1  is a block diagram depicting an architecture for website traffic data collection according to one embodiment of the present invention. 
         FIG. 2  is a screen shot depicting an example of a page analysis report according to one embodiment. 
         FIGS. 3A through 3D  depict an example of a method for determining the dimensions of an element of a plug-in resource, according to one embodiment. 
         FIG. 4A  is a flowchart depicting a method for determining the dimensions of a component of a plug-in resource, where the origin of the element is not necessarily in the center of the element, according to one embodiment. 
         FIG. 4B  is a flowchart depicting a method for determining the dimensions of a component of a plug-in resource, where the origin of the element is in the center of the element, according to one embodiment. 
         FIG. 5  is a block diagram depicting an architecture for modifying a third-party plug-in resource so as to provide usage tracking functionality according to one embodiment. 
         FIG. 6  is a flowchart depicting a method for modifying a third-party plug-in resource so as to provide usage tracking functionality according to one embodiment. 
         FIG. 7  is a flowchart depicting a method for generating a usage overlay for a plug-in resource, according to one embodiment. 
         FIG. 8  is a screen shot depicting an example of an overlay report on a third-party plug-in resource. 
     
    
    
     One skilled in the art will recognize that these Figures are merely examples of the operation of the invention according to one embodiment, and that other architectures and modes of operation can be used without departing from the essential characteristics of the invention. 
     DETAILED DESCRIPTION OF THE EMBODIMENTS 
     The present invention is now described more fully with reference to the accompanying Figures, in which several embodiments of the invention are shown. The present invention may be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. Rather these embodiments are provided so that this disclosure will be complete and will fully convey the invention to those skilled in the art. 
     For illustrative purposes, the invention is described with respect to interactive elements (such as buttons) within a plug-in resource such as content to be displayed within a web page. One example of such a plug-in resource is a content item interpreted and displayed by the Flash plug-in, available from Macromedia, Inc. of San Francisco, Calif.; the Flash plug-in works in conjunction with a conventional web browser such as Internet Explorer, available from Microsoft Corporation of Redmond, Wash. The Flash plug-in provides tools for presentation of video and interactive content within the context of a web page. One skilled in the art will recognize that the present invention can be used for determining dimensions of elements in other contexts as well, and that the present invention can be used in connection with other types of plug-in resources. 
     Architecture 
     Referring now to  FIG. 1 , there is shown a block diagram depicting a system  100  for website traffic data collection according to one embodiment of the present invention. User  112  interacts with client machine  107 , which runs a software application such as browser  110  for accessing and displaying web pages. Client machine  107  may be an ordinary personal computer, including well-known components such as a CPU running an operating system such as Microsoft Windows, a keyboard, mouse, display screen, and Internet connection (not shown). Client machine  107  may run various software applications in addition to browser  110 . Browser  110  includes scripting engine  116 , such as JavaScript, as is commonly found in commercially available browsers. In response to a user  112  action such as clicking on a link or typing in a URL, client machine  107  issues a web page request  111  that is transmitted via the Internet to content server  101 . In response to request  111 , content server  101  transmits web page  102  (in the form of HTML code, for example) to client machine  107 . Browser  110  displays the requested web page  102  on client machine  107 . 
     Web page  102  includes beacon code, which in one embodiment is a pointer to a beacon (such as a 1 pixel by 1 pixel transparent image). The beacon is typically invisible to the user, such as a transparent one-pixel image. For purposes of the following description, a beacon is any element that is embedded in a web page  102  which is loaded automatically by browser  110  that references an external server  106  and is used to monitor traffic. The beacon code can be provided as a script (such as a JavaScript script) to be executed by scripting engine  116 . The beacon code causes client machine  107  to generate resource requests  105  to data collection server  106 . These resource requests  105  are usually dynamically generated according to the script instructions. Data collection server  106  records such requests in a log  108 , and can also record additional information associated with the request (such as the date and time, and possibly some identifying information that may be encoded in the resource request). Thus, tracking server  106  records the occurrence of a “hit” to web page  102 . Tracking server  106  also transmits the requested one-pixel image to client machine  107  so that the resource request is satisfied. 
     Analysis module  113  retrieves stored tracking data from log  108 , filters the data, and outputs reports  114  to a web administrator  115 . Reports  114  may be provided in hard copy, or via a display screen (not shown), or by some other means. Reports  114  include, for example, overviews and statistical analyses describing the relative frequency with which various site paths are being followed through the website. Examples of such reports are described below. 
     Module  113  may be implemented in software running on server  106  or on another computer that can access log  108 . 
     In one embodiment, communications between client machine  107 , content server  101 , and data collection server  106  are accomplished using well known network protocols, such as TCP/IP and HTTP, for communication across the Internet. Other communication methodologies and protocols can also be used. 
     For example, referring now to  FIG. 2 , there is shown an example of a page analysis report  201 , displayed alongside an image of the web page  102  being analyzed. In one embodiment, report  201  is provided to a site administrator or owner interacting with data collection server  106 . 
     In the example of  FIG. 2 , report  201  includes identification  202  of the website and web page being analyzed; report date  203 ; report options and settings  204 ; page metrics  205 ; and links  206  to related reports. In addition, variable levels and shades of color density are superimposed on the displayed view of web page  102 , in order to visually represent the relative number of clicks each item  208  or screen region has received. Color key  207  is a legend to indicate the meaning of various superimposed colors. According to the techniques described herein, an overlay report such as shown in  FIG. 2  can be generated for areas of the screen occupied by plug-in content, including third-party plug-in content. 
       FIG. 8  shows an example of an overlay report  800  for a web page that includes third-party plug-in content such as areas  801 . In this example, areas  801  represent Flash content that occupies a portion of the web page. Certain portions  802  of content areas  801  are highlighted in different colors to denote the traffic levels. Additional information regarding web traffic is shown in overlapping windows  803 . 
     In order to track user interaction with plug-in content, tracking code is integrated into the plug-in code. Referring now to  FIG. 6 , there is shown a flowchart depicting a method for modifying a third-party plug-in resource so as to provide usage tracking functionality according to one embodiment. Referring also to  FIG. 5 , there is shown a block diagram depicting an architecture for modifying a third-party plug-in resource so as to provide usage tracking functionality according to one embodiment. Plug-in application  501  represents an application, such as Flash, for displaying and presenting plug-in content. 
     Client machine  107  sends a web page request  111  to content server  101 . In response, content server  101  provides plug-in content  502  to client machine  107 . In one embodiment, prior to providing content  502 , content server  101  inserts tracking code. This tracking code includes code for identifying and reporting on user interaction with various elements of the plug-in resource. The tracking code replaces and/or supplements at least one method within the received plug-in content, so as to enable transmission of user behavior to a tracking component. 
     The method begins  600 . Browser  110  runs  604  the modified plug-in content  502 . Browser  110  displays web page output  506  including plug-in output. User actions with respect to tracked elements (such as a user clicking on a button or otherwise interacting with an element) are detected  605 . Usage/behavior data  507  is sent  606  to data collection server  106  according to techniques described herein; the data is stored in log  108 . Analysis module  113  uses the collected data is then used for generating reports  607 ; in one embodiment, analysis module  113  includes web overlay generation module  507  for generating overlay reports  508 , which are then output. Reports  607  can thus indicate patterns of aggregate user behavior with respect to plug-in content. The method then ends  608 . 
     Referring now to  FIG. 7 , there is shown a method for generating a usage overlay for a plug-in resource containing interactive elements, according to one embodiment. In one embodiment, analysis module  113  as shown in  FIG. 1  performs the steps of  FIG. 7 ; in other embodiments, these steps can be performed by any component of a web analysis tracking system. 
     The method begins  700 . First, the locations and dimensions of elements are determined  701 . In one embodiment, the locations (in terms of x,y coordinates) of elements are readily available, and the dimensions are determined using techniques described in more detail herein. Data describing user interaction with these elements is received  702 ; in one embodiment, this step involves retrieved data from log  108  containing records of user interactions. In one embodiment, this data is aggregated so that the generated report indicates overall behavior trends for a large group of users. Based on the determined locations and dimensions of elements, and based on the aggregated data describing user behavior, an overlay is generated  703 . In one embodiment the overlay is a visual representation of relative levels of activity for various areas within the plug-in resource; for example, high-activity areas can be shown in one color, and lower-activity areas can be shown in a different color. Since the component generating the overlay is aware of the positions and dimensions of the elements, the positions and dimensions colored areas of the overlay can be made to match those of the elements to which they refer. The resulting report, output in step  704 , shows a representation of the plug-in content, with a color-coded overlay indicating relative activity for various elements within the plug-in content. The method then ends  708 . 
     Referring now to  FIGS. 4A and 4B , there are shown two methods for determining the dimensions of an element of a plug-in resource such as a component of a Flash movie.  FIG. 4A  depicts a method where the origin of the element is not necessarily in the center of the element (it may be at a corner, or at some other location). Referring also to  FIGS. 3A through 3D , there is shown an example of the method.  FIG. 4B  depicts a method where the origin of the element is known to be in the center of the element. 
     Although in  FIGS. 3A through 3D , the element is shown at various positions within the output region, the steps herein are performed without displaying these moved elements to the user; thus the method is done transparently without redrawing the plug-in resource. Output to the user is therefore not disrupted by the use of the method described herein. 
       FIG. 3A  shows element  302  in its original position, with an origin point  303 . X c  and Y c  are the unknown dimensions of element  302 . Output region  301  represents an area, for example within a web page, for the display of web plug-in content. 
     Referring now to  FIG. 4A , the method starts  400 . The overall dimensions X orig , Y orig  of output region  301  are noted  409 . Then, element  302  is moved  401  so that its origin point  303  is at the top left corner of output region  301  ( FIG. 3B ). In one embodiment, existing methods within the plug-in application are used to move element  302 ; for example, the Macromedia Flash plug-in contains methods that en-able movement of elements and other objects. 
     Many plug-in applications automatically resize their output regions to account for elements and objects that have moved beyond the original region. For example, the Macromedia Flash plug-in automatically resizes the Flash content viewing area (output region) if it detects that an element has moved outside the viewing area. 
     Accordingly, since origin  303  is located within element  302 , movement of origin  303  to a corner causes some portion of element  302  to be located outside the original output region  301 . Once the plug-in code has automatically resized output region  301 , as shown in  FIG. 3B , the new dimensions of the overall Flash movie  301  are compared to the original dimensions X orig , Y orig    402 . The differential in both the X and Y dimensions is stored as X 1 , Y 1 ; this accounts for a first portion of the dimensions of element  302 . 
     Next, element  302  is moved  404  so that its origin  303  is at the bot-tom right corner of output region  301  ( FIG. 3C ). Again, the plug-in code automatically changes the dimensions of output region  301 ; this difference in dimensions is noted  405  as X 2 , Y 2 . This increase in X and Y dimensions provides the other portion of the X and Y coordinates. The original size of output region  301  is restored after the increased dimensions are determined. Element  302  is then moved back  406  to its original location ( FIG. 3D ). Element  302  dimensions are then calculated  407  as X c =X 1 +X 2  and Y c =Y 1 +Y 2 . The method then ends  408 . 
     Once element  302  dimensions are known, an overlay can be generated according to the techniques described above, and the overlay will have the correct location and the correct dimensions. 
     Referring now to  FIG. 4B , there is shown an embodiment where origin point  303  is known to be located at the center of element  302 . Here, steps  400 ,  409 ,  401 , and  402  are performed as above. However, element  302  need not be moved to a second corner; rather it is returned  406  to its original location. The values X 1  and Y 1 , are each doubled  420  to provide the total X and Y dimensions of element  302 . Thus X c =2*X 1  and Y c =2*Y 1 . The method then ends  408 . 
     One skilled in the art will recognize that the above-described technique can be applied in any situation where it is desirable to display an overlay over a portion of a web page occupied by plug-in content. This can apply, for example, to Java applets, Windows Media Player items, Quicktime movies, or the like. 
     In the above description, for purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the invention. It will be apparent, however, to one skilled in the art that the invention can be practiced without these specific details. In other instances, structures and devices are shown in block diagram form in order to avoid obscuring the invention. 
     In particular, one skilled in the art will recognize that other architectures and analysis and processing techniques and mechanisms may be used, and that the present invention can be implemented using mechanisms other than those described above. 
     Reference in the specification to “one embodiment” or “an embodiment” means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the invention. The appearances of the phrase “in one embodiment” in various places in the specification are not necessarily all referring to the same embodiment. 
     Some portions of the detailed description are presented in terms of algorithms and symbolic representations of operations on data bits within a computer memory. These algorithmic descriptions and representations are the means used by those skilled in the data processing arts to most effectively convey the substance of their work to others skilled in the art. An algorithm is here, and generally, conceived to be a self-consistent sequence of steps leading to a desired result. The steps are those requiring physical manipulations of physical quantities. Usually, though not necessarily, these quantities take the form of electrical or magnetic signals capable of being stored, transferred, combined, compared, and otherwise manipulated. It has proven convenient at times, principally for reasons of common usage, to refer to these signals as bits, values, elements, symbols, characters, terms, numbers, or the like. 
     It should be borne in mind, however, that all of these and similar terms are to be associated with the appropriate physical quantities and are merely convenient labels applied to these quantities. Unless specifically stated otherwise as apparent from the discussion, it is appreciated that throughout the description, discussions utilizing terms such as “processing” or “computing” or “calculating” or “determining” or “displaying” or the like, refer to the action and processes of a computer system, or similar electronic computing device, that manipulates and transforms data represented as physical (electronic) quantities within the computer system&#39;s registers and memories into other data similarly represented as physical quantities within the computer system memories or registers or other such information storage, transmission or display devices. 
     The present invention also relates to an apparatus for performing the operations herein. This apparatus may be specially constructed for the required purposes, or it may comprise a general-purpose computer selectively activated or reconfigured by a computer program stored in the computer. Such a computer program may be stored in a computer readable storage medium, such as, but is not limited to, any type of disk including floppy disks, optical disks, CD-ROMs, and magnetic-optical disks, read-only memories (ROMs), random access memories (RAMs), EPROMs, EEPROMs, magnetic or optical cards, or any type of media suitable for storing electronic instructions, and each coupled to a computer system bus. 
     The algorithms and modules presented herein are not inherently related to any particular computer or other apparatus. Various general-purpose systems may be used with programs in accordance with the teachings herein, or it may prove convenient to construct more specialized apparatuses to perform the method steps. The required structure for a variety of these systems will appear from the description below. In addition, the present invention is not described with reference to any particular programming language. It will be appreciated that a variety of programming languages may be used to implement the teachings of the invention as described herein. Furthermore, as will be apparent to one of ordinary skill in the relevant art, the modules, features, attributes, methodologies, and other aspects of the invention can be implemented as software, hardware, firmware or any combination of the three. Of course, wherever a component of the present invention is implemented as software, the component can be implemented as a standalone program, as part of a larger program, as a plurality of separate programs, as a statically or dynamically linked library, as a kernel loadable module, as a device driver, and/or in every and any other way known now or in the future to those of skill in the art of computer programming. Additionally, the present invention is in no way limited to implementation in any specific operating system or environment. 
     It will be understood by those skilled in the relevant art that the above-described implementations are merely exemplary, and many changes can be made without departing from the true spirit and scope of the present invention. Therefore, it is intended by the appended claims to cover all such changes and modifications that come within the true spirit and scope of this invention.