Dynamic AOIs example

This is a sample page that is mapped with RealEye tags to support "URL" Item tests. To start, just add the following attributes to your HTML page elements:


                        data-re-aoi-name="[AOI name from RealEye Heatmaps Dashboard]"

Please refer to the documentation to see how to implement this on your pages, have fun!

Go to Basic Subpage Go to Infinite Scroll Subpage

1. Embedding the script

Paste the code below to your <head> element:


                        <script type="module">
                        import EmbeddedPageSdk from "https://app.realeye.io/sdk/js/testRunnerEmbeddableSdk-1.6.js"
                        
                            /**
                            

                             * NOTICE: The SDK MUST be created when the UI is fully loaded and ready.
                            

                             * So, if you are using (modern) frontend framework please use its proper event to create the SDK when everything is ready and fully rendered, instead of the vanilla JS "DOMContentLoaded" event.
                            

                             */
                            

                            window.addEventListener("DOMContentLoaded", () => {

                               const debugMode = false;

                               const stimulusId = null; // Or Stimulus/Item UUID from RealEye Study, e.g. "61560b76-3d31-4f0e-b530-55bd8709aadb" 

                               const forceRun = false; 

                            

                               const reSdk = new EmbeddedPageSdk(debugMode, stimulusId, forceRun)

                        });
                        </script>

Your RealEye SDK is now fully operational, and it'll look for elements with attribute:


                        data-re-aoi-name="[AOI name from RealEye Heatmaps Dashboard]"

2. Finishing the test

Test can be easily finished before pre-defined time by calling finishEyeTrackingTest() on the EmbeddedPageSdk object

sample usage:

document.getElementById('button-finish-test').addEventListener("click", () => reSdk.finishEyeTrackingTest())

3. Synchronizing data

Participants can see elements in different moments, so in order to analyze e.g. video with ad, start new exposure when element is visible and loaded. Depending on your domain logic call startNextExposure().

sample usage:


                        const observer = new IntersectionObserver((entries, observer) => {
                        entries.forEach(entry => {
                        
   if (entry.intersectionRatio > 0) {
                              reSdk.startNextExposure();
                              observer.unobserve(document.getElementById('sticky-video'));
                        
   }
                        
})},
                        { rootMargin: '0px', threshold: 1.0 });
                        

                        

                        observer.observe(document.getElementById('sticky-video'));

Gallery

Modal

Sticky video

Click on the video to trigger picture in picture display mode.

Tips and recommendations

Creating virtual stimuli

We recommend creating virtual stimuli (items) for aggregating ET data for every subpage or page version. It can be created as regular item and then hide it from study flow (eye icon on study setup). This way is much easier to analyze and visualise data.

Ads displayed on page loaded

Depending on a participant internet connection and it's device capabilities, html elements may be loaded with different time offset. This inside is especially important with videos because it may be not fully loaded by the page is ready. To mitigate this effect we strongly recommend listening for video to be ready and then trigger new exposure to synchronize data.

Different versions of the page

In case you want to analyze different version of the same page (with the same url) you may need to indicate on which stimulus should data be collected. Use dedicated method setStimulusId on RealEye SDK object. For more details see documentation.

Questions?

In case you're struggling with the implementation, please feel free to drop us a line at tech@realeye.io