Add product analytics (#4677)

* Product analytics

* Product analytics

* Product analytics

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/nasty-chefs-applaud.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Add product analytics on cloud

.github/workflows/deploy-cloud.yaml

@@ -19,6 +19,8 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       APPS_MARKETPLACE_API_URI: "https://apps.saleor.io/api/v2/saleor-apps"
       IS_CLOUD_INSTANCE: true
+      POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+      POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
     steps:
       - name: Check region
         if: ${{ !contains(fromJSON('["eu", "us"]'), env.REGION) }}

.github/workflows/deploy-master-staging.yaml

@@ -19,6 +19,8 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       APPS_MARKETPLACE_API_URI: "https://apps.staging.saleor.io/api/v2/saleor-apps"
       IS_CLOUD_INSTANCE: true
+      POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+      POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
     steps:
       - uses: actions/checkout@v2
       - name: Set custom version

.github/workflows/deploy-staging.yaml

@@ -33,6 +33,8 @@ jobs:
       APPS_MARKETPLACE_API_URI: "https://apps.staging.saleor.io/api/v2/saleor-apps"
       VERSION: ${{ github.event.inputs.git_ref || github.ref_name }}
       IS_CLOUD_INSTANCE: true
+      POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+      POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
     steps:
       - uses: actions/checkout@v2
         with:

.github/workflows/prepare-release.yml

@@ -53,6 +53,8 @@ jobs:
       APPS_MARKETPLACE_API_URI: "https://apps.staging.saleor.io/api/v2/saleor-apps"
       VERSION: ${{ github.event.inputs.git_ref || github.ref_name }}
       IS_CLOUD_INSTANCE: true
+      POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+      POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3

package.json

@@ -76,6 +76,7 @@
     "marked": "^4.0.17",
     "moment-timezone": "^0.5.32",
     "pixelmatch": "^5.3.0",
+    "posthog-js": "^1.105.9",
     "qs": "^6.10.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/ProductAnalytics/ProductAnalytics.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import { ProductAnalytics } from ".";
+
+jest.mock("posthog-js/react", () => ({
+  PostHogProvider: ({ children }: { children: React.ReactNode }) => (
+    <>{children} with posthog</>
+  ),
+}));
+
+describe("ProductAnalytics", () => {
+  const ENV_COPY = process.env;
+
+  beforeEach(() => {
+    jest.resetModules();
+    process.env = { ...ENV_COPY }; // Make a copy
+  });
+
+  afterAll(() => {
+    process.env = ENV_COPY; // Restore old environment
+  });
+
+  it("renders analytics when it is cloud instance and config was provided", async () => {
+    // Arrange
+    process.env.IS_CLOUD_INSTANCE = "true";
+    process.env.POSTHOG_KEY = "key";
+    process.env.POSTHOG_HOST = "host";
+
+    // Act
+    render(<ProductAnalytics>Test</ProductAnalytics>);
+
+    // Assert
+    await screen.findByText("Test with posthog");
+  });
+
+  it("does not renders analytics when there is no config", async () => {
+    // Arrange
+    process.env.IS_CLOUD_INSTANCE = "true";
+
+    // Act
+    render(<ProductAnalytics>Test</ProductAnalytics>);
+
+    // Assert
+    await screen.findByText("Test");
+  });
+
+  it("does not renders analytics it is not cloud instance", async () => {
+    // Act
+    render(<ProductAnalytics>Test</ProductAnalytics>);
+
+    // Assert
+    await screen.findByText("Test");
+  });
+});

src/components/ProductAnalytics/index.tsx

@@ -0,0 +1,47 @@
+import { PostHogProvider } from "posthog-js/react";
+import React from "react";
+
+const useConfig = () => {
+  const options = {
+    api_host: process.env.POSTHOG_HOST,
+  };
+  const apiKey = process.env.POSTHOG_KEY;
+  const isCloudInstance = process.env.IS_CLOUD_INSTANCE;
+  const canRenderAnalytics = () => {
+    if (!isCloudInstance) {
+      return false;
+    }
+
+    if (!options.api_host || !apiKey) {
+      return false;
+    }
+
+    return true;
+  };
+
+  return {
+    config: {
+      options,
+      apiKey,
+    },
+    canRenderAnalytics,
+  };
+};
+
+interface ProductAnalyticsProps {
+  children: React.ReactNode;
+}
+
+export const ProductAnalytics = ({ children }: ProductAnalyticsProps) => {
+  const { canRenderAnalytics, config } = useConfig();
+
+  if (!canRenderAnalytics()) {
+    return <>{children}</>;
+  }
+
+  return (
+    <PostHogProvider apiKey={config.apiKey} options={config.options}>
+      {children}
+    </PostHogProvider>
+  );
+};

src/index.tsx

@@ -39,6 +39,7 @@ import ErrorPage from "./components/ErrorPage";
 import ExitFormDialogProvider from "./components/Form/ExitFormDialogProvider";
 import { LocaleProvider } from "./components/Locale";
 import MessageManagerProvider from "./components/messages";
+import { ProductAnalytics } from "./components/ProductAnalytics";
 import { ShopProvider } from "./components/Shop";
 import { WindowTitle } from "./components/WindowTitle";
 import { DEMO_MODE, getAppMountUri, GTM_ID } from "./config";
@@ -121,7 +122,9 @@ const App: React.FC = () => (
                           <AppChannelProvider>
                             <ExitFormDialogProvider>
                               <DevModeProvider>
-                                <Routes />
+                                <ProductAnalytics>
+                                  <Routes />
+                                </ProductAnalytics>
                               </DevModeProvider>
                             </ExitFormDialogProvider>
                           </AppChannelProvider>

vite.config.js

@@ -43,6 +43,8 @@ export default defineConfig(({ command, mode }) => {
     CUSTOM_VERSION,
     FLAGS_SERVICE_ENABLED,
     LOCALE_CODE,
+    POSTHOG_KEY,
+    POSTHOG_HOST
   } = env;
 
   const base = STATIC_URL ?? "/";
@@ -65,6 +67,8 @@ export default defineConfig(({ command, mode }) => {
           APPS_TUNNEL_URL_KEYWORDS,
           IS_CLOUD_INSTANCE,
           LOCALE_CODE,
+          POSTHOG_KEY,
+          POSTHOG_HOST,
           injectOgTags:
             DEMO_MODE &&
             `
@@ -147,7 +151,9 @@ export default defineConfig(({ command, mode }) => {
         CUSTOM_VERSION,
         LOCALE_CODE,
         SENTRY_RELEASE,
-        STATIC_URL
+        STATIC_URL,
+        POSTHOG_KEY,
+        POSTHOG_HOST
       },
     },
     build: {