Fix #1203 - Add iframe for analytics during onboarding when participating in MetaMetrics

ui/pages/onboarding-flow/create-password/create-password.js

@@ -28,7 +28,11 @@ import {
 } from '../../../components/app/step-progress-bar';
 import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
-import { getFirstTimeFlowType, getCurrentKeyring } from '../../../selectors';
+import {
+  getFirstTimeFlowType,
+  getCurrentKeyring,
+  getMetaMetricsId,
+} from '../../../selectors';
 import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
@@ -56,6 +60,21 @@ export default function CreatePassword({
   const trackEvent = useContext(MetaMetricsContext);
   const currentKeyring = useSelector(getCurrentKeyring);
 
+  const shouldInjectMetametricsIframe = useSelector(
+    (state) => state.metamask.participateInMetaMetrics,
+  );
+  const metametricsId = useSelector(getMetaMetricsId);
+  const base64MetametricsId = Buffer.from(metametricsId ?? '').toString(
+    'base64',
+  );
+  const analyticsIframeQuery = {
+    mmi: base64MetametricsId,
+    env: 'production',
+  };
+  const analyticsIframeUrl = `https://start.metamask.io/${new URLSearchParams(
+    analyticsIframeQuery,
+  )}`;
+
   useEffect(() => {
     if (currentKeyring) {
       if (firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT) {
@@ -289,6 +308,13 @@ export default function CreatePassword({
           </Button>
         </form>
       </Box>
+      {shouldInjectMetametricsIframe ? (
+        <iframe
+          src={analyticsIframeUrl}
+          className="create-password__analytics-iframe"
+          data-testid="create-password-iframe"
+        />
+      ) : null}
     </div>
   );
 }

ui/pages/onboarding-flow/create-password/create-password.test.js

@@ -26,6 +26,7 @@ describe('Onboarding Create Password', () => {
     metamask: {
       identities: {},
       selectedAddress: '',
+      metaMetricsId: '0x00000000',
     },
   };
 
@@ -392,4 +393,38 @@ describe('Onboarding Create Password', () => {
       });
     });
   });
+
+  describe('Analytics IFrame', () => {
+    it('should inject iframe when participating in metametrics', () => {
+      const state = {
+        ...mockState,
+        metamask: {
+          ...mockState.metamask,
+          participateInMetaMetrics: true,
+        },
+      };
+      const mockStore = configureMockStore()(state);
+      const { queryByTestId } = renderWithProvider(
+        <CreatePassword />,
+        mockStore,
+      );
+      expect(queryByTestId('create-password-iframe')).toBeInTheDocument();
+    });
+
+    it('should not inject iframe when participating in metametrics', () => {
+      const state = {
+        ...mockState,
+        metamask: {
+          ...mockState.metamask,
+          participateInMetaMetrics: false,
+        },
+      };
+      const mockStore = configureMockStore()(state);
+      const { queryByTestId } = renderWithProvider(
+        <CreatePassword />,
+        mockStore,
+      );
+      expect(queryByTestId('create-password-iframe')).not.toBeInTheDocument();
+    });
+  });
 });

ui/pages/onboarding-flow/create-password/index.scss

@@ -46,4 +46,12 @@
       width: 100%;
     }
   }
+
+  &__analytics-iframe {
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
 }