2 files changed, 18 insertions, 1 deletions
diff --git a/app/assets/javascripts/surveys/merge_request_experience/app.js b/app/assets/javascripts/surveys/merge_request_experience/app.js
index ea5d8aef3c5..50b1c2c3f39 100644
--- a/app/assets/javascripts/surveys/merge_request_experience/app.js
+++ b/app/assets/javascripts/surveys/merge_request_experience/app.js
@@ -8,12 +8,17 @@ Vue.use(Translate);
 Vue.use(VueApollo);
 
 export const startMrSurveyApp = () => {
+  const mountEl = document.querySelector('#js-mr-experience-survey');
+  if (!mountEl) return;
+
   let channel = null;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
   });
 
+  const { accountAge } = mountEl.dataset;
+
   const app = new Vue({
     apolloProvider,
     data() {
@@ -24,6 +29,9 @@ export const startMrSurveyApp = () => {
     render(h) {
       if (this.hidden) return null;
       return h(MergeRequestExperienceSurveyApp, {
+        props: {
+          accountAge: Number(accountAge),
+        },
         on: {
           close: () => {
             channel?.postMessage('close');
@@ -37,7 +45,7 @@ export const startMrSurveyApp = () => {
     },
   });
 
-  app.$mount('#js-mr-experience-survey');
+  app.$mount(mountEl);
 
   if (window.BroadcastChannel) {
     channel = new BroadcastChannel('mr_survey');
diff --git a/app/assets/javascripts/surveys/merge_request_experience/app.vue b/app/assets/javascripts/surveys/merge_request_experience/app.vue
index 85eed6ae82a..4e4ef49b1c6 100644
--- a/app/assets/javascripts/surveys/merge_request_experience/app.vue
+++ b/app/assets/javascripts/surveys/merge_request_experience/app.vue
@@ -32,6 +32,12 @@ export default {
     tooltip: GlTooltipDirective,
   },
   mixins: [Tracking.mixin()],
+  props: {
+    accountAge: {
+      type: Number,
+      required: true,
+    },
+  },
   i18n: {
     survey: s__('MrSurvey|Merge request experience survey'),
     close: __('Close'),
@@ -68,6 +74,9 @@ export default {
       this.track('survey:mr_experience', {
         label: this.step.label,
         value: event,
+        extra: {
+          accountAge: this.accountAge,
+        },
       });
       this.stepIndex += 1;
       if (!this.step) {