BG-1007: Fix errors caused by third party scripts (#2608)

error must've been caused by trying to hide intercom launcher ## Explanation of the solution * since intercom launcher is fixed in bottom corner, attach observer to `<Footer/>` that will trigger hiding of launcher * use `.intercom` class to hide intercom ### others - move third party scripts to own file ### future - we could use [partytown](https://partytown.builder.io/) so that our scripts don't all load along side our web-app. I tried using it but dev server becomes slower. created ticket to use this tech once its stable / or we upgraded our tooling ## Instructions on making this work - run `yarn` or `yarn install` to install npm dependencies - run `yarn run test --watchAll` to verify all tests still pass - (optional) run `yarn run build` to verify the build passes - run `yarn start` to start the webapp - ## UI changes for review When major UI changes are introduced with a PR, please include links to URLS to compare or screenshots demonstrating the difference and notify on design changes
AngelProtocolFinance · Dec 22, 2023 · 90f7a66 · 90f7a66
1 parent 9768a0c
commit 90f7a66
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 226 deletions.
diff --git a/public/index.html b/public/index.html
@@ -30,229 +30,13 @@
   <body class="grid min-h-screen">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="grid min-h-screen"></div>
-    <!-- Twitter conversion tracking base code -->
-    <script>
-      !(function (e, t, n, s, u, a) {
-        e.twq ||
-          ((s = e.twq =
-            function () {
-              s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
-            }),
-          (s.version = "1.1"),
-          (s.queue = []),
-          (u = t.createElement(n)),
-          (u.async = !0),
-          (u.src = "https://static.ads-twitter.com/uwt.js"),
-          (a = t.getElementsByTagName(n)[0]),
-          a.parentNode.insertBefore(u, a));
-      })(window, document, "script");
-      twq("config", "oehvo");
-    </script>
-    <!-- End Twitter conversion tracking base code -->
-    <!-- Hotjar Tracking Code -->
-    <script>
-      (function (h, o, t, j, a, r) {
-        h.hj =
-          h.hj ||
-          function () {
-            (h.hj.q = h.hj.q || []).push(arguments);
-          };
-        h._hjSettings = { hjid: 3374479, hjsv: 6 };
-        a = o.getElementsByTagName("head")[0];
-        r = o.createElement("script");
-        r.async = 1;
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-        a.appendChild(r);
-      })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
-    </script>
-    <!-- END HotJar Tracking Code -->
-    <!-- Meta Pixel Code -->
-    <script>
-      !(function (f, b, e, v, n, t, s) {
-        if (f.fbq) return;
-        n = f.fbq = function () {
-          n.callMethod
-            ? n.callMethod.apply(n, arguments)
-            : n.queue.push(arguments);
-        };
-        if (!f._fbq) f._fbq = n;
-        n.push = n;
-        n.loaded = !0;
-        n.version = "2.0";
-        n.queue = [];
-        t = b.createElement(e);
-        t.async = !0;
-        t.src = v;
-        s = b.getElementsByTagName(e)[0];
-        s.parentNode.insertBefore(t, s);
-      })(
-        window,
-        document,
-        "script",
-        "https://connect.facebook.net/en_US/fbevents.js"
-      );
-      fbq("init", "717089233225873");
-      fbq("track", "PageView");
-    </script>
-    <noscript
-      ><img
-        height="1"
-        width="1"
-        style="display: none"
-        src="https://www.facebook.com/tr?id=717089233225873&ev=PageView&noscript=1"
-    /></noscript>
-    <!-- End Meta Pixel Code -->
-    <!-- START SmartLook script -->
-    <script type="text/javascript">
-      if ("%REACT_APP_APP_TYPE%" === "AST") {
-        window.smartlook ||
-          (function (d) {
-            var o = (smartlook = function () {
-                o.api.push(arguments);
-              }),
-              h = d.getElementsByTagName("head")[0];
-            var c = d.createElement("script");
-            o.api = new Array();
-            c.async = true;
-            c.type = "text/javascript";
-            c.charset = "utf-8";
-            c.src = "https://web-sdk.smartlook.com/recorder.js";
-            h.appendChild(c);
-          })(document);
-        smartlook("init", "b78ba41db4f7ae0715167b9d19f512c878c22c2c", {
-          region: "eu",
-        });
-      }
-    </script>
-    <!-- END SmartLook script -->
-    <!-- LinkedIn Tracking Script -->
-    <script type="text/javascript">
-      _linkedin_partner_id = "4969890";
-      window._linkedin_data_partner_ids =
-        window._linkedin_data_partner_ids || [];
-      window._linkedin_data_partner_ids.push(_linkedin_partner_id);
-    </script>
-    <script type="text/javascript">
-      (function (l) {
-        if (!l) {
-          window.lintrk = function (a, b) {
-            window.lintrk.q.push([a, b]);
-          };
-          window.lintrk.q = [];
-        }
-        var s = document.getElementsByTagName("script")[0];
-        var b = document.createElement("script");
-        b.type = "text/javascript";
-        b.async = true;
-        b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
-        s.parentNode.insertBefore(b, s);
-      })(window.lintrk);
-    </script>
-    <noscript>
-      <img
-        height="1"
-        width="1"
-        style="display: none"
-        alt=""
-        src="https://px.ads.linkedin.com/collect/?pid=4969890&fmt=gif"
-      />
-    </noscript>
-    <!-- END LinkedIn Tracking Script -->
-    <!-- Intercom code -->
-    <script>
-      window.intercomSettings = {
-        api_base: "https://api-iam.intercom.io",
-        app_id: "fh3v40sb",
-      };
-    </script>
-    <script>
-      (function () {
-        if ("%REACT_APP_APP_TYPE%" !== "AST") {
-          var w = window;
-          var ic = w.Intercom;
-          if (typeof ic === "function") {
-            ic("reattach_activator");
-            ic("update", w.intercomSettings);
-          } else {
-            var d = document;
-            var i = function () {
-              i.c(arguments);
-            };
-            i.q = [];
-            i.c = function (args) {
-              i.q.push(args);
-            };
-            w.Intercom = i;
-            var l = function () {
-              var s = d.createElement("script");
-              s.type = "text/javascript";
-              s.async = true;
-              s.onload = async function () {
-                const offset = 100;
-                const initDelay = 200;
-                const debounceTime = 200;
-                //wait a bit to initialize launcher after loading script
-                await new Promise((r) => setTimeout(r, initDelay));
-                const launcher = document.querySelector(".intercom-launcher");
-
-                function debounce(callback) {
-                  let timeout;
-                  const debounced = (args) => {
-                    if (timeout) {
-                      window.clearTimeout(timeout);
-                    }
-                    timeout = window.setTimeout(() => {
-                      callback.apply(null, args);
-                    }, debounceTime);
-                  };
-                  return debounced;
-                }
-                const intercomHandleScroll = debounce(function () {
-                  launcher.style.display =
-                    window.innerHeight + window.scrollY >=
-                    document.body.offsetHeight - offset
-                      ? "none"
-                      : "block";
-                });
-                window.addEventListener("scroll", intercomHandleScroll, {
-                  passive: true,
-                });
-              };
-              s.src = "https://widget.intercom.io/widget/fh3v40sb";
-              var x = d.getElementsByTagName("script")[0];
-              x.parentNode.insertBefore(s, x);
-            };
-
-            if (document.readyState === "complete") {
-              l();
-            } else if (w.attachEvent) {
-              w.attachEvent("onload", l);
-            } else {
-              w.addEventListener("load", l, false);
-            }
-          }
-        }
-      })();
-    </script>
-    <!-- END Intercom code -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-Z2YP33XHHD"
-    ></script>
+    <script src="%PUBLIC_URL%/scripts/intercom.js"></script>
+    <script src="%PUBLIC_URL%/scripts/twitter-conversion-tracking.js"></script>
+    <script src="%PUBLIC_URL%/scripts/hotjar-tracking.js"></script>
+    <script src="%PUBLIC_URL%/scripts/meta-pixel.js"></script>
+    <script src="%PUBLIC_URL%/scripts/linkedin-tracking.js"></script>
     <!-- AP: Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-PWW5LK3ZN7"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      "%REACT_APP_APP_TYPE%" === "AST"
-        ? gtag("config", "G-PWW5LK3ZN7")
-        : gtag("config", "G-Z2YP33XHHD");
-    </script>
+    <script src="https://www.googletagmanager.com/gtag/js?id=G-Z2YP33XHHD"></script>
+    <script src="%PUBLIC_URL%/scripts/gtag-init.js"></script>
   </body>
 </html>
diff --git a/public/scripts/gtag-init.js b/public/scripts/gtag-init.js
@@ -0,0 +1,5 @@
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag("config", "G-Z2YP33XHHD");
diff --git a/public/scripts/hotjar-tracking.js b/public/scripts/hotjar-tracking.js
@@ -0,0 +1,13 @@
+(function (h, o, t, j, a, r) {
+  h.hj =
+    h.hj ||
+    function () {
+      (h.hj.q = h.hj.q || []).push(arguments);
+    };
+  h._hjSettings = { hjid: 3374479, hjsv: 6 };
+  a = o.getElementsByTagName("head")[0];
+  r = o.createElement("script");
+  r.async = 1;
+  r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+  a.appendChild(r);
+})(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
diff --git a/public/scripts/intercom.js b/public/scripts/intercom.js
@@ -0,0 +1,39 @@
+//Set your APP_ID
+var APP_ID = "fh3v40sb";
+
+window.intercomSettings = {
+  app_id: APP_ID,
+};
+(function () {
+  var w = window;
+  var ic = w.Intercom;
+  if (typeof ic === "function") {
+    ic("reattach_activator");
+    ic("update", w.intercomSettings);
+  } else {
+    var d = document;
+    var i = function () {
+      i.c(arguments);
+    };
+    i.q = [];
+    i.c = function (args) {
+      i.q.push(args);
+    };
+    w.Intercom = i;
+    var l = function () {
+      var s = d.createElement("script");
+      s.type = "text/javascript";
+      s.async = true;
+      s.src = "https://widget.intercom.io/widget/" + APP_ID;
+      var x = d.getElementsByTagName("script")[0];
+      x.parentNode.insertBefore(s, x);
+    };
+    if (document.readyState === "complete") {
+      l();
+    } else if (w.attachEvent) {
+      w.attachEvent("onload", l);
+    } else {
+      w.addEventListener("load", l, false);
+    }
+  }
+})();
diff --git a/public/scripts/linkedin-tracking.js b/public/scripts/linkedin-tracking.js
@@ -0,0 +1,18 @@
+_linkedin_partner_id = "4969890";
+window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+window._linkedin_data_partner_ids.push(_linkedin_partner_id);
+
+(function (l) {
+  if (!l) {
+    window.lintrk = function (a, b) {
+      window.lintrk.q.push([a, b]);
+    };
+    window.lintrk.q = [];
+  }
+  var s = document.getElementsByTagName("script")[0];
+  var b = document.createElement("script");
+  b.type = "text/javascript";
+  b.async = true;
+  b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+  s.parentNode.insertBefore(b, s);
+})(window.lintrk);
diff --git a/public/scripts/meta-pixel.js b/public/scripts/meta-pixel.js
@@ -0,0 +1,23 @@
+!(function (f, b, e, v, n, t, s) {
+  if (f.fbq) return;
+  n = f.fbq = function () {
+    n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
+  };
+  if (!f._fbq) f._fbq = n;
+  n.push = n;
+  n.loaded = !0;
+  n.version = "2.0";
+  n.queue = [];
+  t = b.createElement(e);
+  t.async = !0;
+  t.src = v;
+  s = b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t, s);
+})(
+  window,
+  document,
+  "script",
+  "https://connect.facebook.net/en_US/fbevents.js"
+);
+fbq("init", "717089233225873");
+fbq("track", "PageView");
diff --git a/public/scripts/twitter-conversion-tracking.js b/public/scripts/twitter-conversion-tracking.js
@@ -0,0 +1,15 @@
+!(function (e, t, n, s, u, a) {
+  e.twq ||
+    ((s = e.twq =
+      function () {
+        s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
+      }),
+    (s.version = "1.1"),
+    (s.queue = []),
+    (u = t.createElement(n)),
+    (u.async = !0),
+    (u.src = "https://static.ads-twitter.com/uwt.js"),
+    (a = t.getElementsByTagName(n)[0]),
+    a.parentNode.insertBefore(u, a));
+})(window, document, "script");
+twq("config", "oehvo");
diff --git a/src/App/Footer/Footer.tsx b/src/App/Footer/Footer.tsx
@@ -8,8 +8,23 @@ import Socials from "./Socials";
 type Props = { linkGroups: LinkGroup[]; socials: SocialMediaLink[] };
 
 function Footer({ linkGroups, socials }: Props) {
+  function ref(node: HTMLElement | null) {
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        const intercom = document.querySelector(".intercom-launcher");
+        intercom?.classList.toggle("hidden", e.isIntersecting);
+      },
+      { threshold: [0.5] }
+    );
+    observer.observe(node);
+  }
+
   return (
-    <footer className="flex flex-col items-center text-white bg-blue dark:bg-blue-d3">
+    <footer
+      ref={ref}
+      className="flex flex-col items-center text-white bg-blue dark:bg-blue-d3"
+    >
       <section className="padded-container flex flex-col gap-8 items-center justify-center w-full pt-8 pb-10 lg:flex-row lg:items-start lg:justify-between lg:gap-0 lg:pb-16">
         <Links groups={linkGroups} />
         <Newsletter />

diff --git a/src/App/__tests__/App.test.tsx b/src/App/__tests__/App.test.tsx
@@ -27,8 +27,6 @@ jest.mock("services/aws/leaderboard", () => ({
   }),
 }));
 
-//test comment 3
-
 const heroText = /BETTER GIVING REDEFINES/i;
 const marketLink = /marketplace/i;
 const regLink = /register/i;