TW-1082: Update external links activity event (#1000)

* added new tracked urls, refactor

* moved url check to background script, regex fixes

* polling

* added new links

* fix link

src/contentScript.ts

@@ -6,7 +6,9 @@ import { serealizeError } from 'lib/intercom/helpers';
 import { TempleMessageType, TempleResponse } from 'lib/temple/types';
 
 import { ContentScriptType } from './lib/constants';
-import { checkMatchByUrl } from './lib/utils/check-url';
+
+const WEBSITES_ANALYTICS_ENABLED = 'WEBSITES_ANALYTICS_ENABLED';
+const TRACK_URL_CHANGE_INTERVAL = 5000;
 
 enum BeaconMessageTarget {
   Page = 'toPage',
@@ -19,8 +21,6 @@ enum LegacyPageMessageType {
   ErrorResponse = 'THANOS_PAGE_ERROR_RESPONSE'
 }
 
-const WEBSITES_ANALYTICS_ENABLED = 'WEBSITES_ANALYTICS_ENABLED';
-
 interface LegacyPageMessage {
   type: LegacyPageMessageType;
   payload: any;
@@ -38,41 +38,30 @@ type BeaconMessage =
     };
 type BeaconPageMessage = BeaconMessage | { message: BeaconMessage; sender: { id: string } };
 
-let isUserEnableWebsitesAnalytics = false;
-browser.storage.local.get(WEBSITES_ANALYTICS_ENABLED).then(storage => {
-  isUserEnableWebsitesAnalytics = storage[WEBSITES_ANALYTICS_ENABLED];
-});
+// Prevents the script from running in an Iframe
+if (window.frameElement === null) {
+  browser.storage.local.get(WEBSITES_ANALYTICS_ENABLED).then(storage => {
+    if (storage[WEBSITES_ANALYTICS_ENABLED]) {
+      let oldHref = '';
 
-const observeUrlChange = () => {
-  let oldHref = '';
-  const body = document.querySelector('body');
+      const trackUrlChange = () => {
+        if (oldHref !== window.parent.location.href) {
+          oldHref = window.parent.location.href;
 
-  if (!body) {
-    return;
-  }
+          browser.runtime.sendMessage({
+            type: ContentScriptType.ExternalLinksActivity,
+            url: window.parent.location.href
+          });
+        }
+      };
 
-  const observer = new MutationObserver(() => {
-    if (oldHref !== document.location.href) {
-      oldHref = document.location.href;
+      trackUrlChange();
 
-      if (checkMatchByUrl(document.location.href)) {
-        browser.runtime.sendMessage({ type: ContentScriptType.ExternalLinksActivity, url: document.location.href });
-      }
+      // Track url changes without page reload
+      setInterval(trackUrlChange, TRACK_URL_CHANGE_INTERVAL);
     }
   });
-
-  observer.observe(body, { childList: true, subtree: true });
-};
-
-let isContentLoadedBefore = false;
-
-window.onload = () => {
-  if (!isContentLoadedBefore && isUserEnableWebsitesAnalytics) {
-    isContentLoadedBefore = true;
-
-    observeUrlChange();
-  }
-};
+}
 
 const SENDER = {
   id: browser.runtime.id,

src/lib/temple/back/main.ts

@@ -5,13 +5,13 @@ import { BACKGROUND_IS_WORKER } from 'lib/env';
 import { encodeMessage, encryptMessage, getSenderId, MessageType, Response } from 'lib/temple/beacon';
 import { clearAsyncStorages } from 'lib/temple/reset';
 import { TempleMessageType, TempleRequest, TempleResponse } from 'lib/temple/types';
+import { getTrackedUrl } from 'lib/utils/url-track/get-tracked-url';
 
 import { ContentScriptType } from '../../constants';
 import * as Actions from './actions';
 import * as Analytics from './analytics';
 import { intercom } from './defaults';
 import { store, toFront } from './store';
-import { modifyTrackedUrl } from './utils';
 
 const frontStore = store.map(toFront);
 
@@ -246,8 +246,11 @@ const processRequest = async (req: TempleRequest, port: Runtime.Port): Promise<T
 
 browser.runtime.onMessage.addListener(msg => {
   if (msg?.type === ContentScriptType.ExternalLinksActivity) {
-    const modifiedUrl = modifyTrackedUrl(msg.url);
-    Analytics.client.track('External links activity', { url: modifiedUrl });
+    const url = getTrackedUrl(msg.url);
+
+    if (url) {
+      Analytics.client.track('External links activity', { url });
+    }
   }
 
   if (msg?.type === E2eMessageType.ResetRequest) {