Embedded Website tests for aggregated results

When to use it?

The "Embedded Website" study is great for collecting how users notice certain Areas of Interest (AOIs) in a live website while browsing.

The website could be an e-commerce, landing page, or interactive (HTML) mockup.

The website is being shown to the eye-tracking test participant as a stimulus.

Thanks to the AOI mapping mechanism, you can then analyze the aggregated data.

Examples

1. Example website.

2. Example eye-tracking test of that website.

3. Example heatmaps.

Main requirements

1. The tested website must allow RealEye to embed it via HTML iframe element.

2. The tested website must include the latest RealEye "testRunnerEmbeddable" JS SDK.

3. The tested website must have AOIs mapped as shown on the example page.

How to set up the "Embedded Website" study?

1. Create a study type "Embedded Website".

2. Add the "Page URL" item with the URL of a website you want to test.

3. (optional) upload your own website screenshot, that you want to aggregate the data on (by clicking the "replace" button on the item

4. Make sure the stimulus/item name is the tested website URL.

5. (optional) Add more websites if you want to test more than one. Each sub-page has to be added as another item.

6. Run the study. Go to website heatmap view and create AOIs with the names you've used on your website's `data-re-aoi-name` HTML element attribute.

7. Invite participants to test the website.

8. Analyze the aggregated data.

How to map AOIs?

1. Make sure your website utilizes the latest RealEye "testRunnerEmbeddable" JS SDK.

2. Make sure your website has AOIs (HTML elements) mapped as shown on the example page. AOIs MUST have `data-re-aoi-name` HTML attributes.

3. Use RealEye Heatmap Dashboard to create AOIs with the same names as used in `data-re-aoi-name` HTML attributes.

4. Make sure AOIs created in RealEye do NOT include HTML element margin.

You can map the following dynamic elements as AOIs:

• rotating galleries

• sticky video - a video is "stuck," i.e., to the top or bottom of the page while scrolling - also for picture in picture

• modal - opens a popup window

• HTML elements can be dynamically added and removed from DOM tree.

If you name the AOI incorrectly, you can rename it, and the values will be recalculated. Adding an AOI, deleting an AOI, and renaming an AOI results in:

• retrying the AOI mapping from the AOI data page in our system,

• recalculation of eye-tracking data according to the new AOI location data.

How to start with "dispatching page" and collect data for multiple websites?

If you want to test several pages or subpages of the same website, you must add every single one of them as another stimulus. The URL of the tested page MUST match the URL provided as a stimulus in RealEye - otherwise the eye-tracking data won't get stored. If the URL changes when a participant clicks somewhere, you have to make sure there's a Stimulus/Item in the study dashboard for that URL.

Having the URLs and AOI names, the system knows on what item and AOI it should map the gaze.

NOTE:

You can use the exposure number feature to set another exposure on the same page on some event, i.e., when the displayed ad/video changes or on user click. That can make your analysis easier, as you can filter heatmaps by the exposure number.

NOTE2:

You can cast data from one stimulus to another. For example, participants will see item B, but you want to have the gazes collected on item A. To do so, you have to set the target stimulus (A) Id in the stimulus B URI.

Known Limitations

1. An individual recording does not reflect website layout 1:1 (coming soon)

2. Mouse position data is not mapped into aggregated view (heatmap) (coming soon)

3. Heatmap Dashboard AOI must be made of single part.

4. Horizontal scrolls are not supported yet.