add iframe dashcards tracking (metabase#48382)

* track iframe creation * Update Loki Snapshots * Update frontend/src/metabase/visualizations/visualizations/IFrameViz/utils.unit.spec.ts Co-authored-by: Anton Kulyk <kuliks.anton@gmail.com> --------- Co-authored-by: Metabase Automation <github-automation@metabase.com> Co-authored-by: Anton Kulyk <kuliks.anton@gmail.com>
ttanay · Oct 8, 2024 · 291384d · 291384d
1 parent 5fd75e0
commit 291384d
Show file tree

Hide file tree

Showing 22 changed files with 262 additions and 17 deletions.
diff --git a/...erence/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_Default.png b/...erence/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_Default.png
diff --git a/...laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png b/...laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png
diff --git a/...rEmbeddedDashboardView_filters_Dark_Theme_Date_Filter_Quarter_Year_Dropdown.png b/...rEmbeddedDashboardView_filters_Dark_Theme_Date_Filter_Quarter_Year_Dropdown.png
diff --git a/...ublicOrEmbeddedDashboardView_filters_Dark_Theme_Parameter_Search_With_Value.png b/...ublicOrEmbeddedDashboardView_filters_Dark_Theme_Parameter_Search_With_Value.png
diff --git a/...ptop_embed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Text_With_Value.png b/...ptop_embed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Text_With_Value.png
diff --git a/...ed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Month_Year.png b/...ed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Month_Year.png
diff --git a/...EmbeddedDashboardView_filters_Light_Theme_Date_Filter_Quarter_Year_Dropdown.png b/...EmbeddedDashboardView_filters_Light_Theme_Date_Filter_Quarter_Year_Dropdown.png
diff --git a/...p_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Range.png b/...p_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Range.png
diff --git a/..._embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Single.png b/..._embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Single.png
diff --git a/.loki/reference/chrome_laptop_viz_BarChart_Default.png b/.loki/reference/chrome_laptop_viz_BarChart_Default.png
diff --git a/.loki/reference/chrome_laptop_viz_SmartScalar_Default.png b/.loki/reference/chrome_laptop_viz_SmartScalar_Default.png
diff --git a/e2e/test/scenarios/dashboard/dashboard.cy.spec.js b/e2e/test/scenarios/dashboard/dashboard.cy.spec.js
@@ -19,6 +19,7 @@ import {
   collectionOnTheGoModal,
   commandPalette,
   commandPaletteButton,
+  createDashboard,
   createDashboardWithTabs,
   createQuestionAndDashboard,
   dashboardHeader,
@@ -326,18 +327,6 @@ describe("scenarios > dashboard", () => {
       });
 
       describe("iframe cards", () => {
-        it("should be possible to add an iframe card", () => {
-          editDashboard();
-          addIFrameWhileEditing("https://example.com");
-          cy.findByTestId("dashboardcard-actions-panel").should("not.exist");
-          cy.button("Done").click();
-          getDashboardCards().eq(0).realHover();
-          cy.findByTestId("dashboardcard-actions-panel").should("be.visible");
-          validateIFrame("https://example.com");
-          saveDashboard();
-          validateIFrame("https://example.com");
-        });
-
         it("should handle various iframe and URL inputs", () => {
           const testCases = [
             {
@@ -1151,6 +1140,28 @@ describeWithSnowplow("scenarios > dashboard", () => {
     expectNoBadSnowplowEvents();
   });
 
+  it("should be possible to add an iframe card", () => {
+    createDashboard({ name: "iframe card" }).then(({ body: { id } }) => {
+      visitDashboard(id);
+
+      editDashboard();
+      addIFrameWhileEditing("https://example.com");
+      cy.findByTestId("dashboardcard-actions-panel").should("not.exist");
+      cy.button("Done").click();
+      getDashboardCards().eq(0).realHover();
+      cy.findByTestId("dashboardcard-actions-panel").should("be.visible");
+      validateIFrame("https://example.com");
+      saveDashboard();
+      validateIFrame("https://example.com");
+
+      expectGoodSnowplowEvent({
+        event: "new_iframe_card_created",
+        dashboard_id: id,
+        domain_name: "example.com",
+      });
+    });
+  });
+
   it("saving a dashboard should track a 'dashboard_saved' snowplow event", () => {
     visitDashboard(ORDERS_DASHBOARD_ID);
     editDashboard();

diff --git a/frontend/src/metabase-types/analytics/dashboard.ts b/frontend/src/metabase-types/analytics/dashboard.ts
@@ -8,6 +8,7 @@ type DashboardEventSchema = {
   section_layout?: string | null;
   full_width?: boolean | null;
   dashboard_accessed_via?: string | null;
+  domain_name?: string | null;
 };
 
 type ValidateEvent<
@@ -72,6 +73,12 @@ export type NewActionCardCreatedEvent = ValidateEvent<{
   dashboard_id: number;
 }>;
 
+export type NewIFrameCardCreatedEvent = ValidateEvent<{
+  event: "new_iframe_card_created";
+  dashboard_id: number;
+  domain_name: string | null;
+}>;
+
 export type CardSetToHideWhenNoResultsEvent = ValidateEvent<{
   event: "card_set_to_hide_when_no_results";
   dashboard_id: number;
@@ -132,6 +139,7 @@ export type DashboardEvent =
   | NewHeadingCardCreatedEvent
   | NewLinkCardCreatedEvent
   | NewActionCardCreatedEvent
+  | NewIFrameCardCreatedEvent
   | CardSetToHideWhenNoResultsEvent
   | DashboardPdfExportedEvent
   | CardMovedToTabEvent

diff --git a/frontend/src/metabase-types/api/dashboard.ts b/frontend/src/metabase-types/api/dashboard.ts
@@ -101,6 +101,7 @@ export type DashboardCardLayoutAttrs = {
 export type DashCardVisualizationSettings = {
   [key: string]: unknown;
   virtual_card?: VirtualCard;
+  iframe?: string;
 };
 
 export type BaseDashboardCard = DashboardCardLayoutAttrs & {

diff --git a/frontend/src/metabase/dashboard/actions/save.js b/frontend/src/metabase/dashboard/actions/save.js
@@ -14,7 +14,11 @@ import { trackDashboardSaved } from "../analytics";
 import { getDashboardBeforeEditing } from "../selectors";
 
 import { setEditingDashboard } from "./core";
-import { hasDashboardChanged, haveDashboardCardsChanged } from "./utils";
+import {
+  hasDashboardChanged,
+  haveDashboardCardsChanged,
+  trackAddedIFrameDashcards,
+} from "./utils";
 
 export const UPDATE_DASHBOARD_AND_CARDS =
   "metabase/dashboard/UPDATE_DASHBOARD_AND_CARDS";
@@ -96,6 +100,8 @@ export const updateDashboardAndCards = createThunkAction(
           .map(async dc => CardApi.update(dc.card)),
       );
 
+      trackAddedIFrameDashcards(dashboard);
+
       const dashcardsToUpdate = dashboard.dashcards
         .filter(dc => !dc.isRemoved)
         .map(dc => ({

diff --git a/frontend/src/metabase/dashboard/actions/utils.ts b/frontend/src/metabase/dashboard/actions/utils.ts
@@ -1,6 +1,7 @@
 import { t } from "ttag";
 import _ from "underscore";
 
+import { getIframeDomainName } from "metabase/visualizations/visualizations/IFrameViz/utils";
 import type {
   DashCardId,
   Dashboard,
@@ -10,7 +11,8 @@ import type {
 } from "metabase-types/api";
 import type { StoreDashboard, StoreDashcard } from "metabase-types/store";
 
-import { isActionDashCard } from "../utils";
+import { trackIFrameDashcardsSaved } from "../analytics";
+import { isActionDashCard, isIFrameDashCard } from "../utils";
 
 export function getExistingDashCards(
   dashboards: Record<DashboardId, StoreDashboard>,
@@ -83,3 +85,21 @@ export const getDashCardMoveToTabUndoMessage = (dashCard: StoreDashcard) => {
       return t`Card moved`;
   }
 };
+
+export const trackAddedIFrameDashcards = (dashboard: Dashboard) => {
+  try {
+    const newIFrameDashcards = dashboard.dashcards.filter(
+      dashcard =>
+        "isAdded" in dashcard && dashcard.isAdded && isIFrameDashCard(dashcard),
+    );
+
+    newIFrameDashcards.forEach(dashcard => {
+      const domainName = getIframeDomainName(
+        dashcard.visualization_settings?.iframe,
+      );
+      trackIFrameDashcardsSaved(dashboard.id, domainName);
+    });
+  } catch {
+    console.error("Could not track added iframe dashcards", dashboard);
+  }
+};
diff --git a/frontend/src/metabase/dashboard/analytics.ts b/frontend/src/metabase/dashboard/analytics.ts
@@ -80,6 +80,17 @@ export const trackCardCreated = (type: CardTypes, dashboardId: DashboardId) => {
   }
 };
 
+export const trackIFrameDashcardsSaved = (
+  dashboardId: DashboardId,
+  domainName: string | null,
+) => {
+  trackSchemaEvent("dashboard", {
+    event: "new_iframe_card_created",
+    dashboard_id: getDashboardId(dashboardId),
+    domain_name: domainName,
+  });
+};
+
 export const trackSectionAdded = (
   dashboardId: DashboardId,
   sectionId: SectionId,

diff --git a/frontend/src/metabase/dashboard/utils.ts b/frontend/src/metabase/dashboard/utils.ts
@@ -119,6 +119,12 @@ export function isLinkDashCard(
   return getVirtualCardType(dashcard) === "link";
 }
 
+export function isIFrameDashCard(
+  dashcard: BaseDashboardCard,
+): dashcard is VirtualDashboardCard {
+  return getVirtualCardType(dashcard) === "iframe";
+}
+
 export function isNativeDashCard(dashcard: QuestionDashboardCard) {
   // The `dataset_query` is null for questions on a dashboard the user doesn't have access to
   return dashcard.card.dataset_query?.type === "native";

diff --git a/frontend/src/metabase/lib/analytics.ts b/frontend/src/metabase/lib/analytics.ts
@@ -18,7 +18,7 @@ const VERSIONS: Record<SchemaType, SchemaVersion> = {
   browse_data: "1-0-0",
   cleanup: "1-0-0",
   csvupload: "1-0-3",
-  dashboard: "1-1-5",
+  dashboard: "1-1-6",
   database: "1-0-1",
   downloads: "1-0-0",
   embed_flow: "1-0-2",

diff --git a/frontend/src/metabase/visualizations/visualizations/IFrameViz/utils.ts b/frontend/src/metabase/visualizations/visualizations/IFrameViz/utils.ts
@@ -95,6 +95,33 @@ const normalizeUrl = (trimmedUrl: string) => {
   return trimmedUrl;
 };
 
+const isIframeString = (iframeOrUrl: string) =>
+  iframeOrUrl.startsWith("<iframe");
+
+export const getIframeDomainName = (
+  iframeOrUrl: string | undefined,
+): string | null => {
+  if (!iframeOrUrl) {
+    return null;
+  }
+  const trimmedInput = iframeOrUrl.trim();
+
+  try {
+    const url = isIframeString(trimmedInput)
+      ? parseUrlFromIframe(trimmedInput)
+      : normalizeUrl(trimmedInput);
+
+    if (!url) {
+      return null;
+    }
+
+    const urlObject = new URL(url);
+    return urlObject.hostname;
+  } catch {
+    return null;
+  }
+};
+
 export const getIframeUrl = (
   iframeOrUrl: string | undefined,
 ): string | null => {
@@ -104,7 +131,7 @@ export const getIframeUrl = (
 
   const trimmedInput = iframeOrUrl.trim();
 
-  if (trimmedInput.startsWith("<iframe")) {
+  if (isIframeString(trimmedInput)) {
     return parseUrlFromIframe(trimmedInput);
   }
 

diff --git a/frontend/src/metabase/visualizations/visualizations/IFrameViz/utils.unit.spec.ts b/frontend/src/metabase/visualizations/visualizations/IFrameViz/utils.unit.spec.ts
@@ -1,4 +1,4 @@
-import { getIframeUrl } from "./utils";
+import { getIframeDomainName, getIframeUrl } from "./utils";
 
 describe("getIframeUrl", () => {
   describe("share to embed link transformation", () => {
@@ -122,3 +122,34 @@ describe("getIframeUrl", () => {
     expect(result).toBeNull();
   });
 });
+
+describe("getIframeDomainName", () => {
+  it("should return the domain name for a valid URL", () => {
+    const result = getIframeDomainName("https://example.com/path/to/page");
+    expect(result).toBe("example.com");
+  });
+
+  it("should return the domain name for a URL without protocol", () => {
+    const result = getIframeDomainName("www.example.com");
+    expect(result).toBe("www.example.com");
+  });
+
+  it("should return null for invalid URLs", () => {
+    expect(getIframeDomainName("not a url")).toBeNull();
+    expect(getIframeDomainName("https://example.com:asdf")).toBeNull();
+    expect(getIframeDomainName("")).toBeNull();
+    expect(getIframeDomainName(undefined)).toBeNull();
+  });
+
+  it("should extract domain name from iframe src", () => {
+    const input = '<iframe src="https://example.com/embed"></iframe>';
+    const result = getIframeDomainName(input);
+    expect(result).toBe("example.com");
+  });
+
+  it("should return null for iframe without src", () => {
+    const input = "<iframe></iframe>";
+    const result = getIframeDomainName(input);
+    expect(result).toBeNull();
+  });
+});