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.