feat: Add utm parameters to embedded OSS Metabase footer link (#42968)

* Add utm params to  link

* Fix e2e, add url domain

* Fix e2e

e2e/test/scenarios/embedding/embedding-smoketests.cy.spec.js

@@ -192,7 +192,7 @@ describe("scenarios > embedding > smoke tests", { tags: "@OSS" }, () => {
           cy.findByRole("link")
             .should("have.text", "Powered by Metabase")
             .and("have.attr", "href")
-            .and("eq", "https://metabase.com/");
+            .and("contain", "https://www.metabase.com/powered-by-metabase");
         });
 
         cy.log(

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.tsx

@@ -51,7 +51,7 @@ import {
   Separator,
   TitleAndDescriptionContainer,
 } from "./EmbedFrame.styled";
-import LogoBadge from "./LogoBadge";
+import { LogoBadge } from "./LogoBadge";
 
 type ParameterValues = Record<ParameterId, ParameterValueOrArray>;
 

frontend/src/metabase/public/components/EmbedFrame/LogoBadge.tsx

@@ -5,23 +5,29 @@ import LogoIcon from "metabase/components/LogoIcon";
 import type { Variant } from "./LogoBadge.styled";
 import { MetabaseLink, MetabaseName, Message } from "./LogoBadge.styled";
 
-function LogoBadge({
+export const LogoBadge = ({
   dark,
   variant = "default",
 }: {
   dark: boolean;
   variant?: Variant;
-}) {
+}) => {
   const logoSize = variant === "large" ? 42 : 28;
+
+  const utmContentValue = `embedded_banner_${encodeURIComponent(
+    getHostAppUrlDomain(),
+  )}`;
+
   const Metabase = (
     // eslint-disable-next-line no-literal-metabase-strings -- This embedding badge which we don't want to show the whitelabeled name
     <MetabaseName key="metabase" isDark={dark} variant={variant}>
       Metabase
     </MetabaseName>
   );
+
   return (
     <MetabaseLink
-      href="https://metabase.com/"
+      href={`https://www.metabase.com/powered-by-metabase?utm_medium=referral&utm_source=product&utm_campaign=powered_by_metabase&utm_content=${utmContentValue}`}
       target="_blank"
       variant={variant}
     >
@@ -29,7 +35,16 @@ function LogoBadge({
       <Message variant={variant}>{jt`Powered by ${Metabase}`}</Message>
     </MetabaseLink>
   );
-}
+};
 
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default LogoBadge;
+function getHostAppUrlDomain() {
+  // based on https://stackoverflow.com/questions/3420004/access-parent-url-from-iframe
+  let referrerUrl =
+    parent !== window ? document.referrer : document.location.href;
+
+  // remove trailing slash
+  referrerUrl = referrerUrl.replace(/\/+$/, "");
+
+  // get domain value, based on https://stackoverflow.com/questions/569137/how-to-get-domain-name-from-url
+  return referrerUrl.replace(/.+\/\/|www.|\..+/g, "");
+}

frontend/src/metabase/public/components/EmbedFrame/LogoBadge.unit.spec.tsx

+import { screen, render } from "__support__/ui";
+
+import { LogoBadge } from "./LogoBadge";
+
+describe("LogoBadge", () => {
+  it("should render Powered by Metabase footer", () => {
+    setup();
+
+    expect(screen.getByText("Powered by")).toBeInTheDocument();
+    expect(screen.getByText("Metabase")).toBeInTheDocument();
+  });
+
+  it("should render a link with valid utm parameters", () => {
+    setup();
+
+    expect(screen.getByRole("link")).toHaveProperty(
+      "href",
+      "https://www.metabase.com/powered-by-metabase?utm_medium=referral&utm_source=product&utm_campaign=powered_by_metabase&utm_content=embedded_banner_localhost",
+    );
+  });
+});
+
+function setup() {
+  render(<LogoBadge dark={false} />);
+}