Completely replace hotjar with smartlook (#447)

* Replace hotjar with smartlook

* Remove duplicate event declaration

.env.example

@@ -4,9 +4,8 @@
 # Sentry
 APPSMITH_SENTRY_DSN=
 
-# Hotjar
+# Smart look
-APPSMITH_HOTJAR_HJID=
+APPSMITH_SMART_LOOK_ID=
-APPSMITH_HOTJAR_HJSV=
 
 # Google OAuth
 APPSMITH_OAUTH2_GOOGLE_CLIENT_ID=

app/client/docker/templates/nginx-linux.conf.template

@@ -18,8 +18,7 @@ server {
     location / {
         proxy_pass http://localhost:3000;
         sub_filter __APPSMITH_SENTRY_DSN__ '${APPSMITH_SENTRY_DSN}';
-        sub_filter __APPSMITH_APPSMITH_HOTJAR_HJID__ '${APPSMITH_HOTJAR_HJID}';
+        sub_filter __APPSMITH_SMART_LOOK_ID__ '${APPSMITH_SMART_LOOK_ID}';
-        sub_filter __APPSMITH_HOTJAR_HJSV__ '${APPSMITH_HOTJAR_HJSV}';
         sub_filter __APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__ '${APPSMITH_OAUTH2_GOOGLE_CLIENT_ID}';
         sub_filter __APPSMITH_OAUTH2_GITHUB_CLIENT_ID__ '${APPSMITH_OAUTH2_GITHUB_CLIENT_ID}';
         sub_filter __APPSMITH_MARKETPLACE_ENABLED__ '${APPSMITH_MARKETPLACE_ENABLED}';
@@ -86,8 +85,7 @@ server {
     location / {
         proxy_pass http://localhost:3000;
         sub_filter __APPSMITH_SENTRY_DSN__ '${APPSMITH_SENTRY_DSN}';
-        sub_filter __APPSMITH_HOTJAR_HJID__ '${APPSMITH_HOTJAR_HJID}';
+        sub_filter __APPSMITH_SMART_LOOK_ID__ '${APPSMITH_SMART_LOOK_ID}';
-        sub_filter __APPSMITH_HOTJAR_HJSV__ '${APPSMITH_HOTJAR_HJSV}';
         sub_filter __APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__ '${APPSMITH_OAUTH2_GOOGLE_CLIENT_ID}';
         sub_filter __APPSMITH_OAUTH2_GITHUB_CLIENT_ID__ '${APPSMITH_OAUTH2_GITHUB_CLIENT_ID}';
         sub_filter __APPSMITH_MARKETPLACE_ENABLED__ '${APPSMITH_MARKETPLACE_ENABLED}';

app/client/docker/templates/nginx-mac.conf.template

@@ -18,8 +18,7 @@ server {
     location / {
         proxy_pass http://host.docker.internal:3000;
         sub_filter __APPSMITH_SENTRY_DSN__ '${APPSMITH_SENTRY_DSN}';
-        sub_filter __APPSMITH_HOTJAR_HJID__ '${APPSMITH_HOTJAR_HJID}';
+        sub_filter __APPSMITH_SMART_LOOK_ID__ '${APPSMITH_SMART_LOOK_ID}';
-        sub_filter __APPSMITH_HOTJAR_HJSV__ '${APPSMITH_HOTJAR_HJSV}';
         sub_filter __APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__ '${APPSMITH_OAUTH2_GOOGLE_CLIENT_ID}';
         sub_filter __APPSMITH_OAUTH2_GITHUB_CLIENT_ID__ '${APPSMITH_OAUTH2_GITHUB_CLIENT_ID}';
         sub_filter __APPSMITH_MARKETPLACE_ENABLED__ '${APPSMITH_MARKETPLACE_ENABLED}';
@@ -87,8 +86,7 @@ server {
     location / {
         proxy_pass http://host.docker.internal:3000;
         sub_filter __APPSMITH_SENTRY_DSN__ '${APPSMITH_SENTRY_DSN}';
-        sub_filter __APPSMITH_HOTJAR_HJID__ '${APPSMITH_HOTJAR_HJID}';
+        sub_filter __APPSMITH_SMART_LOOK_ID__ '${APPSMITH_SMART_LOOK_ID};
-        sub_filter __APPSMITH_HOTJAR_HJSV__ '${APPSMITH_HOTJAR_HJSV}';
         sub_filter __APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__ '${APPSMITH_OAUTH2_GOOGLE_CLIENT_ID}';
         sub_filter __APPSMITH_OAUTH2_GITHUB_CLIENT_ID__ '${APPSMITH_OAUTH2_GITHUB_CLIENT_ID}';
         sub_filter __APPSMITH_MARKETPLACE_ENABLED__ '${APPSMITH_MARKETPLACE_ENABLED}';

app/client/netlify.toml

@@ -3,8 +3,6 @@
 #    REACT_APP_SENTRY_DSN=
 #    REACT_APP_SENTRY_ENVIRONMENT=
 #    REACT_APP_SENTRY_RELEASE=
-#    REACT_APP_HOTJAR_HJID=
-#    REACT_APP_HOTJAR_HJSV=
 #    REACT_APP_OAUTH2_GOOGLE_CLIENT_ID=
 #    REACT_APP_OAUTH2_GITHUB_CLIENT_ID=
 #    REACT_APP_SEGMENT_KEY=

app/client/package.json

@@ -104,6 +104,7 @@
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "shallowequal": "^1.1.0",
+    "smartlook-client": "^4.5.1",
     "styled-components": "^4.1.3",
     "styled-system": "^5.1.5",
     "tern": "^0.21.0",

app/client/public/index.html

@@ -20,7 +20,7 @@
     // INTERCOM SETUP
     const APP_ID = "%REACT_APP_INTERCOM_APP_ID%"
     const CLOUD_HOSTING = "%REACT_APP_CLOUD_HOSTING%"
-    if (APP_ID.length && CLOUD_HOSTING.length) {
+    if (APP_ID.length && APP_ID[0] !== "%" && CLOUD_HOSTING.length) {
       (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); } } })();
     }
   </script>
@@ -33,18 +33,6 @@
 
     gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%");
   </script>
-  <script type='text/javascript'>
-    // SMART LOOK SETUP
-    const SMART_LOOK_ID = "%REACT_APP_SMART_LOOK_ID%";
-    if (SMART_LOOK_ID.length && CLOUD_HOSTING.length) {
-      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://rec.smartlook.com/recorder.js';h.appendChild(c);
-      })(document);
-      smartlook('init', SMART_LOOK_ID);
-    }
-  </script>
 </head>
 
 <body>
@@ -87,9 +75,8 @@
         release: parseConfig("__APPSMITH_SENTRY_RELEASE__"),
         environment: parseConfig("__APPSMITH_SENTRY_ENVIRONMENT__"),
       },
-      hotjar: {
+      smartLook: {
-        id: parseConfig("__APPSMITH_HOTJAR_HJID__"),
+        id: parseConfig("__APPSMITH_SMART_LOOK_ID__"),
-        sv: parseConfig("__APPSMITH_HOTJAR_HJSV__"),
       },
       enableGoogleOAuth: parseConfig("__APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__").length > 0,
       enableGithubOAuth: parseConfig("__APPSMITH_OAUTH2_GITHUB_CLIENT_ID__").length > 0,

app/client/src/configs/index.ts

@@ -5,9 +5,8 @@ type INJECTED_CONFIGS = {
     release: string;
     environment: string;
   };
-  hotjar: {
+  smartLook: {
     id: string;
-    sv: string;
   };
   enableGoogleOAuth: boolean;
   enableGithubOAuth: boolean;
@@ -30,7 +29,6 @@ type INJECTED_CONFIGS = {
   };
   intercomAppID: string;
   mailEnabled: boolean;
-  smartLookKey: string;
 };
 declare global {
   interface Window {
@@ -52,9 +50,8 @@ const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
       release: process.env.REACT_APP_SENTRY_RELEASE || "",
       environment: capitalizeText(process.env.NODE_ENV),
     },
-    hotjar: {
+    smartLook: {
-      id: process.env.REACT_APP_HOTJAR_HJID || "",
+      id: process.env.REACT_APP_SMART_LOOK_ID || "",
-      sv: process.env.REACT_APP_HOTJAR_HJSV || "",
     },
     enableGoogleOAuth: process.env.REACT_APP_OAUTH2_GOOGLE_CLIENT_ID
       ? process.env.REACT_APP_OAUTH2_GOOGLE_CLIENT_ID.length > 0
@@ -95,7 +92,6 @@ const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
     mailEnabled: process.env.REACT_APP_MAIL_ENABLED
       ? process.env.REACT_APP_MAIL_ENABLED.length > 0
       : false,
-    smartLookKey: process.env.REACT_APP_SMART_LOOK_KEY || "",
   };
 };
 
@@ -144,13 +140,9 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
 
   // As the following shows, the config variables can be set using a combination
   // of env variables and injected configs
-  const hotjarId = getConfig(
+  const smartLook = getConfig(
-    ENV_CONFIG.hotjar.id,
+    ENV_CONFIG.smartLook.id,
-    APPSMITH_FEATURE_CONFIGS.hotjar.id,
+    APPSMITH_FEATURE_CONFIGS.smartLook.id,
-  );
-  const hotjarSV = getConfig(
-    ENV_CONFIG.hotjar.sv,
-    APPSMITH_FEATURE_CONFIGS.hotjar.sv,
   );
 
   const algoliaAPIID = getConfig(
@@ -173,10 +165,9 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
       release: sentryRelease.value,
       environment: sentryENV.value,
     },
-    hotjar: {
+    smartLook: {
-      enabled: hotjarId.enabled && hotjarSV.enabled,
+      enabled: smartLook.enabled,
-      id: hotjarId.value,
+      id: smartLook.value,
-      sv: hotjarSV.value, //parse as int?
     },
     segment: {
       enabled: segment.enabled,

app/client/src/configs/types.ts

@@ -5,11 +5,6 @@ export type SentryConfig = {
   environment: string;
 };
 
-export type HotjarConfig = {
-  id: string;
-  sv: string;
-};
-
 type Milliseconds = number;
 
 export enum FeatureFlagsEnum {}
@@ -30,10 +25,9 @@ export type AppsmithUIConfigs = {
     release: string;
     environment: string;
   };
-  hotjar: {
+  smartLook: {
     enabled: boolean;
     id: string;
-    sv: string;
   };
   segment: {
     enabled: boolean;

app/client/src/utils/AnalyticsUtil.tsx

@@ -1,6 +1,8 @@
 // Events
 import * as log from "loglevel";
 import FeatureFlag from "./featureFlags";
+import smartlookClient from "smartlook-client";
+import { getAppsmithConfigs } from "configs";
 
 export type EventName =
   | "LOGIN_CLICK"
@@ -27,15 +29,12 @@ export type EventName =
   | "PREVIEW_APP"
   | "EDITOR_OPEN"
   | "CREATE_API"
-  | "IMPORT_API"
-  | "IMPORT_API_CLICK"
   | "SAVE_API"
   | "SAVE_API_CLICK"
   | "RUN_API"
   | "RUN_API_CLICK"
   | "DELETE_API"
   | "DELETE_API_CLICK"
-  | "DUPLICATE_API_CLICK"
   | "IMPORT_API"
   | "EXPAND_API"
   | "IMPORT_API_CLICK"
@@ -85,20 +84,8 @@ function getApplicationId(location: Location) {
 
 class AnalyticsUtil {
   static user: any = undefined;
-  static initializeHotjar(id: string, sv: string) {
+  static initializeSmartLook(id: string) {
-    (function init(h: any, o: any, t: any, j: any, a?: any, r?: any) {
+    smartlookClient.init(id);
-      h.hj =
-        h.hj ||
-        function() {
-          (h.hj.q = h.hj.q || []).push(arguments); //eslint-disable-line prefer-rest-params
-        };
-      h._hjSettings = { hjid: id, hjsv: sv };
-      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, "//static.hotjar.com/c/hotjar-", ".js?sv=");
   }
 
   static initializeSegment(key: string) {
@@ -199,15 +186,9 @@ class AnalyticsUtil {
         userId: userId,
       });
     }
-    if (windowDoc.hj) {
+    const { smartLook } = getAppsmithConfigs();
-      windowDoc.hj("identify", userData.email, { email: userData.email });
+    if (smartLook.enabled) {
-    }
+      smartlookClient.identify(userData.email, { email: userData.email });
-    if (windowDoc.smartLook) {
-      windowDoc.smartlook("identify", userId, {
-        email: userData.email,
-        name: userData.name,
-        userId: userId,
-      });
     }
   }
 

app/client/src/utils/AppsmithUtils.tsx

@@ -32,9 +32,9 @@ export const appInitializer = () => {
   if (appsmithConfigs.sentry.enabled) {
     Sentry.init(appsmithConfigs.sentry);
   }
-  if (appsmithConfigs.hotjar.enabled) {
+  if (appsmithConfigs.smartLook.enabled) {
-    const { id, sv } = appsmithConfigs.hotjar;
+    const { id } = appsmithConfigs.smartLook;
-    AnalyticsUtil.initializeHotjar(id, sv);
+    AnalyticsUtil.initializeSmartLook(id);
   }
   if (appsmithConfigs.segment.enabled) {
     AnalyticsUtil.initializeSegment(appsmithConfigs.segment.apiKey);

app/client/yarn.lock

@@ -15385,6 +15385,11 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+smartlook-client@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/smartlook-client/-/smartlook-client-4.5.1.tgz#86884e19107fbd1ec284d96fb4273e209deb7cea"
+  integrity sha512-Y8zBr6rD9aE9/KockRlxNtAF4B+66CJzfPt8y27nrrkXqgC58lEqsWpTmy8opP5U2OprZHYI0Yh5LNKT7r4kRA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"

deploy/template/nginx_app.conf.sh

@@ -31,8 +31,7 @@ $NGINX_SSL_CMNT    server_name $custom_domain ;
         try_files $uri /index.html =404;
 
         sub_filter __APPSMITH_SENTRY_DSN__ '\''${APPSMITH_SENTRY_DSN}'\'';
-        sub_filter __APPSMITH_APPSMITH_HOTJAR_HJID__ '\''${APPSMITH_HOTJAR_HJID}'\'';
+        sub_filter __APPSMITH_SMART_LOOK_ID__ '\''${APPSMITH_SMART_LOOK_ID}'\'';
-        sub_filter __APPSMITH_HOTJAR_HJSV__ '\''${APPSMITH_HOTJAR_HJSV}'\'';
         sub_filter __APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__ '\''${APPSMITH_OAUTH2_GOOGLE_CLIENT_ID}'\'';
         sub_filter __APPSMITH_OAUTH2_GITHUB_CLIENT_ID__ '\''${APPSMITH_OAUTH2_GITHUB_CLIENT_ID}'\'';
         sub_filter __APPSMITH_MARKETPLACE_ENABLED__ '\''${APPSMITH_MARKETPLACE_ENABLED}'\'';
@@ -87,8 +86,7 @@ $NGINX_SSL_CMNT    location / {
 $NGINX_SSL_CMNT        try_files $uri /index.html =404;
 $NGINX_SSL_CMNT
 $NGINX_SSL_CMNT        sub_filter __APPSMITH_SENTRY_DSN__ '\''${APPSMITH_SENTRY_DSN}'\'';
-$NGINX_SSL_CMNT        sub_filter __APPSMITH_APPSMITH_HOTJAR_HJID__ '\''${APPSMITH_HOTJAR_HJID}'\'';
+$NGINX_SSL_CMNT        sub_filter __APPSMITH_SMART_LOOK_ID__ '\''${APPSMITH_SMART_LOOK_ID}'\'';
-$NGINX_SSL_CMNT        sub_filter __APPSMITH_HOTJAR_HJSV__ '\''${APPSMITH_HOTJAR_HJSV}'\'';
 $NGINX_SSL_CMNT        sub_filter __APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__ '\''${APPSMITH_OAUTH2_GOOGLE_CLIENT_ID}'\'';
 $NGINX_SSL_CMNT        sub_filter __APPSMITH_OAUTH2_GITHUB_CLIENT_ID__ '\''${APPSMITH_OAUTH2_GITHUB_CLIENT_ID}'\'';
 $NGINX_SSL_CMNT        sub_filter __APPSMITH_MARKETPLACE_ENABLED__ '\''${APPSMITH_MARKETPLACE_ENABLED}'\'';