TW-1506 Reimplement conversion tracking without using cookies

src/app/hooks/use-conversion-tracking.ts

@@ -1,36 +1,44 @@
 import { useEffect } from 'react';
 
-import axios from 'axios';
-
 import { dispatch } from 'app/store';
 import { setConversionTrackedAction } from 'app/store/settings/actions';
 import { useIsConversionTrackedSelector } from 'app/store/settings/selectors';
 import { AnalyticsEventCategory, useAnalytics } from 'lib/analytics';
-import { EnvVars } from 'lib/env';
-
-function fetchConversionInformation() {
-  return axios
-    .get<{ linkId: string; name: string }>(EnvVars.CONVERSION_VERIFICATION_URL, {
-      withCredentials: true
-    })
-    .then(response => response.data);
-}
 
 export const useConversionTracking = () => {
   const { trackEvent } = useAnalytics();
 
   const isConversionTracked = useIsConversionTrackedSelector();
 
   useEffect(() => {
-    if (!isConversionTracked) {
-      fetchConversionInformation().then(({ linkId, name }) => {
-        trackEvent('Conversion Info', AnalyticsEventCategory.General, {
-          conversionId: linkId,
-          conversionName: name
-        });
-      });
-
-      dispatch(setConversionTrackedAction());
+    if (isConversionTracked) {
+      return undefined;
     }
-  }, [trackEvent]);
+
+    const conversionIframeListener = (event: MessageEvent<any>) => {
+      try {
+        const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+
+        if (data.type !== 'trackLink') {
+          return;
+        }
+
+        dispatch(setConversionTrackedAction());
+        window.removeEventListener('message', conversionIframeListener);
+
+        if (data.link) {
+          const { linkId, name } = data.link;
+
+          trackEvent('Conversion Info', AnalyticsEventCategory.General, {
+            conversionId: linkId,
+            conversionName: name
+          });
+        }
+      } catch {}
+    };
+
+    window.addEventListener('message', conversionIframeListener);
+
+    return () => window.removeEventListener('message', conversionIframeListener);
+  }, [isConversionTracked, trackEvent]);
 };

src/app/pages/Home/Home.tsx

@@ -5,8 +5,10 @@ import { isDefined } from '@rnw-community/shared';
 import { useAppEnv } from 'app/env';
 import PageLayout from 'app/layouts/PageLayout';
 import { useMainnetTokensScamlistSelector } from 'app/store/assets/selectors';
+import { useIsConversionTrackedSelector } from 'app/store/settings/selectors';
 import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { TEZ_TOKEN_SLUG } from 'lib/assets';
+import { EnvVars } from 'lib/env';
 import { useAssetMetadata, getAssetSymbol } from 'lib/metadata';
 import { useAccount } from 'lib/temple/front';
 import { HistoryAction, navigate, useLocation } from 'lib/woozie';
@@ -37,6 +39,8 @@ const Home = memo<Props>(({ assetSlug }) => {
   const assetMetadata = useAssetMetadata(assetSlug || TEZ_TOKEN_SLUG);
   const assetSymbol = getAssetSymbol(assetMetadata);
 
+  const isConversionTracked = useIsConversionTrackedSelector();
+
   useLayoutEffect(() => {
     const usp = new URLSearchParams(search);
     if (assetSlug && usp.get('after_token_added') === 'true') {
@@ -63,6 +67,15 @@ const Home = memo<Props>(({ assetSlug }) => {
       attention={true}
       adShow
     >
+      {!isConversionTracked && (
+        <iframe
+          className="hidden"
+          width="320"
+          height="50"
+          src={`${EnvVars.CONVERSION_VERIFICATION_URL}/page`}
+          title="Conversion verification page"
+        />
+      )}
       {fullPage && (
         <div className="w-full max-w-sm mx-auto">
           <EditableTitle />