feat: Install Appcues (#181)

mbta · Dec 2, 2024 · 0add271 · 0add271
1 parent 8e69723
commit 0add271
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 6 deletions.
diff --git a/config/config.exs b/config/config.exs
@@ -2,6 +2,7 @@ import Config
 
 # Application config
 config :orbit,
+  appcues_enabled?: false,
   allow_test_data?: false,
   ecto_repos: [Orbit.Repo],
   generators: [timestamp_type: :utc_datetime],

diff --git a/config/dev.secret.example.exs b/config/dev.secret.example.exs
@@ -3,10 +3,15 @@
 # Copy the template to dev.secret.exs, then uncomment and fill in any sections you need.
 import Config
 
+# Appcues
+# config :orbit,
+#   appcues_enabled?: true,
+#   appcues_id: "SOME_ID"
+
 # FullStory
 # Only turn this on if you're testing sending data to FullStory, not for regular use.
-config :orbit,
-  full_story_org_id: ""
+# config :orbit,
+#   full_story_org_id: ""
 
 # Sentry
 # Only turn this on if you're testing sending events to Sentry, not for regular use.

diff --git a/config/prod.exs b/config/prod.exs
@@ -4,6 +4,7 @@ import Config
 
 config :orbit,
   # loaded at compile time
+  appcues_enabled?: true,
   release: System.get_env("RELEASE")
 
 config :orbit, Orbit.Repo,

diff --git a/config/runtime.exs b/config/runtime.exs
@@ -11,6 +11,7 @@ if config_env() == :prod do
 
   config :orbit,
     allow_test_data?: System.get_env("ALLOW_TEST_DATA", "") == "yes",
+    appcues_id: System.get_env("APPCUES_ID"),
     environment: System.get_env("ENVIRONMENT"),
     full_story_org_id: System.get_env("FULLSTORY_ORG_ID")
 

diff --git a/config/test.exs b/config/test.exs
@@ -4,7 +4,6 @@ config :orbit,
   allow_test_data?: true,
   environment: "test",
   release: "test",
-  full_story_org_id: "RAWR",
   force_https?: false
 
 # Database config

diff --git a/js/components/app.tsx b/js/components/app.tsx
@@ -1,5 +1,6 @@
 import { reload } from "../browser";
 import { paths } from "../paths";
+import { AppcuesTrackPage } from "./appcues";
 import { Header } from "./header";
 import { Home } from "./home";
 import { HelpMenu, Menu } from "./menus";
@@ -49,6 +50,7 @@ const router = createBrowserRouter([
     errorElement: <ErrorBoundary />,
     element: (
       <>
+        <AppcuesTrackPage />
         <Header />
         <Outlet />
       </>

diff --git a/js/components/appcues.tsx b/js/components/appcues.tsx
@@ -0,0 +1,45 @@
+import { getMetaContent } from "../util/metadata";
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+declare global {
+  const Appcues: {
+    identify(
+      userId: string,
+      properties?: Record<string, string | number | boolean>,
+    ): void;
+    page(): void;
+  };
+}
+
+// React component, put inside react router
+export const AppcuesTrackPage = (): null => {
+  const email = getMetaContent("userEmail") ?? "";
+  const appcuesUserId = getMetaContent("appcuesUserId");
+  const location = useLocation();
+  const appcuesInitialized: boolean = Object.prototype.hasOwnProperty.call(
+    globalThis,
+    "Appcues",
+  );
+  useEffect(() => {
+    if (appcuesInitialized && appcuesUserId !== null) {
+      try {
+        Appcues.identify(appcuesUserId, {
+          email,
+        });
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+  }, [appcuesInitialized, email, appcuesUserId]);
+  useEffect(() => {
+    if (appcuesInitialized) {
+      try {
+        Appcues.page();
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+  }, [location, appcuesInitialized]);
+  return null;
+};
diff --git a/js/util/metadata.ts b/js/util/metadata.ts
@@ -1,4 +1,5 @@
 export type MetaDataKey =
+  | "appcuesUserId"
   | "csrf-token"
   | "fullStoryOrgId"
   | "sentryDsn"

diff --git a/lib/orbit_web/components/layouts/root.html.heex b/lib/orbit_web/components/layouts/root.html.heex
@@ -31,9 +31,17 @@
     <%= if @conn.assigns[:full_story_org_id] do %>
       <meta name="fullStoryOrgId" content={@full_story_org_id} />
     <% end %>
+    <%= if @conn.assigns[:appcues_uid] do %>
+      <meta name="appcuesUserId" content={@appcues_uid} />
+    <% end %>
 
     <title><%= assigns[:page_title] || "Orbit" %></title>
     <link rel="stylesheet" href={~p"/assets/app.css"} />
+
+    <%= if @conn.assigns[:appcues_enabled?] && @conn.assigns[:appcues_id] do %>
+      <script src={"//fast.appcues.com/#{@appcues_id}.js"}>
+      </script>
+    <% end %>
   </head>
   <body class="bg-white antialiased">
     <%= @inner_content %>

diff --git a/lib/orbit_web/controllers/react_app_controller.ex b/lib/orbit_web/controllers/react_app_controller.ex
@@ -6,9 +6,21 @@ defmodule OrbitWeb.ReactAppController do
     # so skip the default app layout.
     render(conn, :react_app,
       layout: false,
-      sentry_dsn: Application.get_env(:sentry, :dsn),
+      appcues_enabled?: Application.get_env(:orbit, :appcues_enabled?),
+      appcues_id: Application.get_env(:orbit, :appcues_id),
+      appcues_uid: appcues_uid(conn),
       environment: Application.get_env(:orbit, :environment),
-      full_story_org_id: Application.get_env(:orbit, :full_story_org_id)
+      full_story_org_id: Application.get_env(:orbit, :full_story_org_id),
+      sentry_dsn: Application.get_env(:sentry, :dsn)
     )
   end
+
+  # Use half a sha256 of the email address as user id.
+  # This is not secure! But we're eliminating randomness
+  #  while not being trivially overridable.
+  defp appcues_uid(conn) do
+    :crypto.hash(:sha3_256, conn.assigns[:email])
+    |> Base.encode16(case: :lower)
+    |> String.slice(0..32)
+  end
 end
diff --git a/lib/orbit_web/router.ex b/lib/orbit_web/router.ex
@@ -15,7 +15,7 @@ defmodule OrbitWeb.Router do
 
     plug :put_secure_browser_headers, %{
       "content-security-policy" =>
-        "default-src 'self'; connect-src 'self' *.sentry.io *.fullstory.com; script-src 'self' *.fullstory.com"
+        "default-src 'self'; connect-src 'self' *.sentry.io *.fullstory.com fast.appcues.com ws: api.appcues.net; script-src 'self' *.fullstory.com fast.appcues.com; style-src 'self' fast.appcues.com;"
     }
   end
 

diff --git a/test/orbit_web/controllers/react_app_controller_test.exs b/test/orbit_web/controllers/react_app_controller_test.exs
@@ -15,6 +15,9 @@ defmodule OrbitWeb.ReactAppControllerTest do
     })
 
     reassign_env(:sentry, :dsn, "https://example.com")
+    reassign_env(:orbit, :appcues_enabled?, true)
+    reassign_env(:orbit, :appcues_id, "APPKEWES")
+    reassign_env(:orbit, :full_story_org_id, "RAWR")
   end
 
   @tag :authenticated
@@ -27,6 +30,7 @@ defmodule OrbitWeb.ReactAppControllerTest do
     assert response =~ "<meta name=\"release\" content=\"test\">"
     assert response =~ "<meta name=\"userEmail\" content=\"user@example.com\">"
     assert response =~ "<meta name=\"userName\" content=\"Art Read\">"
+    assert response =~ "<script src=\"//fast.appcues.com/APPKEWES.js\">"
     assert response =~ "<meta name=\"sentryDsn\" content=\"https://example.com\">"
     assert response =~ "<meta name=\"environment\" content=\"test\">"
     assert response =~ "<meta name=\"fullStoryOrgId\" content=\"RAWR\">"