Report
List of steps to reproduce (step by step, including full links if applicable):
- Navigate to https://es.wikipedia.org/w/index.php?title=Spain&quicksurvey=perceived-performance-survey
What happens?:
No QuickSurveysInitiation{eventName="impression",surveyCodeName="perceived-performance-survey"} event is logged.
What should have happened instead?:
Such an event should be logged.
Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:
- Browser: Google Chrome (95.0.4638.69)
- OS: macOS Monteray (12.0.1)
Notes
After a survey has been selected, QuickSurveys inserts a panel (a <div>) with a spinner while the surveys messages are fetched and the survey is rendered. QuickSurveys also sets up an IntersectionObserver to detect when the survey has been seen by the user. However, when the survey is rendered using Vue.js, the original container element is destroyed as the component mounts.
Fortunately, when the component mounts, it resolves a promise with the element that Vue.js has rendered. QuickSurveys needs to be updated to use that element when setting up the IntersectionObserver here, i.e.:
module.render( $panel[ 0 ], survey, dismissSurvey, surveySessionToken, pageviewToken, isMobileLayout ).then( function ( el ) { // eslint-disable-next-line no-use-before-define reportWhenSeen( el, surveySessionToken, pageviewToken, survey.name ); } );
