Skip to content
Contact us
  • There are no suggestions because the search field is empty.

Embedded Website

Learn when to use Embedded Website study type, and how to set it up in RealEye to gather aggregated eye-tracking data directly on live websites.

What Are Embedded Website Tests?

Embedded Website Tests allow you to study user behavior on a live webpage, without redirecting them to a separate test environment. Instead, participants interact with the actual website as it is, embedded in an iframe. This method provides insights that are closer to real-world browsing behavior.

 

When to Use Embedded Website Studies:

  • To test live, functioning websites
  • To observe natural user interactions like clicking buttons, or navigating menus
  • To see how users engage with dynamic elements (e.g., popups, dropdowns, sticky headers)

 

Useful links:

  1. Embedded Website SDK
  2. Example website with embedded SDK

 

line_RealEye_long-1


STEP 1: Prepare Your Tested Website

  1. Ensure that your tested website allows iframe embedding: the tested site must permit being loaded via an HTML <iframe> element, which means the page should not block embedding via X-Frame-Options or similar security headers.

  2. Embed the RealEye testRunnerEmbeddable JavaScript SDK to your website: refer to the Exemplary Website and API Documentation for detailed setup instructions.

  3. Map AOIs properly using data-re-aoi-name attributes: for any HTML element you want to track, add a data-re-aoi-name="AOI-Name" attribute. This allows RealEye to identify and aggregate gaze data based on these Areas of Interest (AOIs).

    You can create AOIs for the following types of dynamic content:
    • Rotating galleries – such as image sliders or carousels;
    • Sticky video elements – videos that remain fixed to the top or bottom of the screen while scrolling (including picture-in-picture modes);
    • Modals or popups – content that opens in overlay layers;
    • Elements added/removed dynamically from the DOM – for example, components loaded via JavaScript or user interaction.

❗Important Note: Horizontal scrolling is currently not supported.

 

💡Tips (learn more in API Documentation):

  • Use exposure numbers to track multiple states of the same page (e.g., before/after ad plays or on user interaction). This enables filtering by state when analyzing heatmaps.
  • Due to differences in participants' internet connections and device capabilities, HTML elements may load at varying times. This is particularly important when working with videos, as a video might not be fully loaded even if the page appears ready. To ensure accurate synchronization and data consistency, we strongly recommend listening for the video’s readiness before triggering any new exposures or data events.

 


line_RealEye_long-1

 

STEP 2: Set Up an Embedded Website Study in RealEye

  1. Create a new study: choose the "Embedded Website" study type and click OK.



  2. Set up your study: allow participation from Desktop / Smartphones / Tablets and configure other relevant settings.

  3. Add Study Items:

    In an Embedded Website study, your primary study items will typically be Page URLs, but you can also include Images and Videos. Each item becomes part of the study flow and can be analyzed individually:

    - Page URLs:
    • Main Pages: Add the URL of the webpage(s) you want to test as a separate stimulus (main page) and click Add Page URL
    • Subpages: If your main page includes links to other pages, and you want to track gaze data when participants navigate to them, you must add each of those subpage URLs as well - when adding a Subpage, check the "Link as a Subpage" checkbox and then, click Add Page URL



    - Images & Videos: You can also add static images or videos (e.g., ads or product demos) as study items - like main pages, these are treated as individual stimuli 

  4. Set up your content: Set the instruction before the stimulus, add a Survey, set the Display time, and Separator time. When you're finished, click Select Participants to run your study and start collecting data.


    ❗Important Note: The analyses in RealEye are performed using a screenshot of the provided website. While the platform automatically creates an initial screenshot of your site, you can update it at any time by navigating to Contents Setup (you may need to switch to Draft mode first) and clicking the Replace image icon in the top-left corner of the stimulus preview:



line_RealEye_long-1

 

STEP 3: Create mapping AOIs in RealEye Heatmap Dashboard

  1. In your study dashboard, go to Results, select the item you want to create AOIs for and click Heatmaps.
  2. Use the AOI tool to draw rectangular shapes over all the elements for which  HTML attributes were set. AOIs can be used for sticky elements, modals, rotating banners, etc., as long as they’re marked with the proper data-re-aoi-name in your HTML. In the AOI name field, enter the exact name matching the data-re-aoi-name attribute used in your website's HTML (see STEP 1.3).

❗Important Notes:

  • All AOIs must be single, rectangular figures - polygonal and multipart AOIs are not supported.
  • Keep in mind that AOIs in RealEye do not include an element’s CSS margin. Only the visible area defined by the element’s content and padding (the green + blue box in browser inspect tools) will be part of the AOI. If your HTML elements are positioned using margins, that’s perfectly fine - just remember that the margin itself won’t be tracked as part of the AOI. To check what area will be covered by an AOI, right-click the element in your browser and choose Inspect. The blue (content) and green (padding) area shown is what RealEye considers for the AOI.



line_RealEye_long-1

 

Examples

 

 


💌 If you have any further questions, feel free to reach out to our team at support@realeye.io