Update ga4 endpoint to use analytics api. (#2765)

Update the analytics endpoint to consume the analytics api instead of cloud function. Endpoints : https://zesty-io.postman.co/workspace/0ccb3ba9-5e99-4e48-9730-505653f4da9a/documentation/23737451-ba1e4049-e456-4147-95f2-9bdccba29a51 Closes : #2760 --------- Co-authored-by: Nar -- <28705606+finnar-bin@users.noreply.github.com> Co-authored-by: Stuart Runyan <shrunyan@gmail.com> Co-authored-by: Andres Galindo <agalin920@gmail.com>
zesty-io · Aug 28, 2024 · ded9c19 · ded9c19
1 parent fa740c1
commit ded9c19
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 84 deletions.
diff --git a/cypress/e2e/content/analyticsDashboard.spec.js b/cypress/e2e/content/analyticsDashboard.spec.js
@@ -1,6 +1,6 @@
 describe("Analytics dashboard", () => {
   before(() => {
-    cy.waitOn("*getPropertyList*", () => {
+    cy.waitOn("*properties*", () => {
       cy.visit("/content");
     });
   });

diff --git a/cypress/e2e/content/singlePageAnalytics.spec.js b/cypress/e2e/content/singlePageAnalytics.spec.js
@@ -1,6 +1,6 @@
 describe("Single Page Analytics", () => {
   before(() => {
-    cy.waitOn("*getPropertyList*", () => {
+    cy.waitOn("*properties*", () => {
       cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/analytics");
     });
   });

diff --git a/src/apps/content-editor/src/app/views/Analytics/components/AnalyticsPropertySelector.tsx b/src/apps/content-editor/src/app/views/Analytics/components/AnalyticsPropertySelector.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Box, Button, Link, Skeleton } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { useGetAnalyticsPropertiesQuery } from "../../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPropertiesQuery } from "../../../../../../../shell/services/analytics";
 import { useGetInstanceSettingsQuery } from "../../../../../../../shell/services/instance";
 import { PropertiesDialog } from "./PropertiesDialog";
 

diff --git a/src/apps/content-editor/src/app/views/Analytics/components/AuthView.tsx b/src/apps/content-editor/src/app/views/Analytics/components/AuthView.tsx
@@ -29,7 +29,7 @@ export const AuthView = ({ validateAuth, isDashboard }: Props) => {
   const receiveMessage = (event: MessageEvent<Message>) => {
     if (
       // @ts-ignore
-      event.origin === CONFIG.CLOUD_FUNCTIONS_DOMAIN &&
+      event.origin === CONFIG.API_ANALYTICS &&
       event.data.source === "zesty"
     ) {
       if (event.data.status === 200) {
@@ -45,7 +45,7 @@ export const AuthView = ({ validateAuth, isDashboard }: Props) => {
     tabWindow?.close();
     tabWindow = window.open(
       // @ts-ignore
-      `${CONFIG.CLOUD_FUNCTIONS_DOMAIN}/authenticateGoogleAnalytics?user_id=${user.ID}&account_id=${instance.ID}`
+      `${CONFIG.API_ANALYTICS}/ga4/auth/connect?user_id=${user.ID}&account_id=${instance.ID}`
     );
   };
 

diff --git a/src/apps/content-editor/src/app/views/Analytics/components/PropertiesDialog.tsx b/src/apps/content-editor/src/app/views/Analytics/components/PropertiesDialog.tsx
@@ -32,7 +32,7 @@ import googleIcon from "../../../../../../../../public/images/googleIcon.svg";
 import {
   useDisconnectGoogleAnalyticsMutation,
   useGetAnalyticsPropertiesQuery,
-} from "../../../../../../../shell/services/cloudFunctions";
+} from "../../../../../../../shell/services/analytics";
 import {
   useCreateInstanceSettingsMutation,
   useGetInstanceSettingsQuery,
@@ -98,7 +98,7 @@ export const PropertiesDialog = ({ onClose }: Props) => {
   const receiveMessage = (event: MessageEvent<Message>) => {
     if (
       // @ts-ignore
-      event.origin === CONFIG.CLOUD_FUNCTIONS_DOMAIN &&
+      event.origin === CONFIG.API_ANALYTICS &&
       event.data.source === "zesty"
     ) {
       if (event.data.status === 200) {
@@ -114,7 +114,7 @@ export const PropertiesDialog = ({ onClose }: Props) => {
     tabWindow?.close();
     tabWindow = window.open(
       // @ts-ignore
-      `${CONFIG.CLOUD_FUNCTIONS_DOMAIN}/authenticateGoogleAnalytics?user_id=${user.ID}&account_id=${instance.ID}`
+      `${CONFIG.API_ANALYTICS}/ga4/auth/connect?user_id=${user.ID}&account_id=${instance.ID}`
     );
   };
 

diff --git a/src/apps/content-editor/src/app/views/Analytics/index.tsx b/src/apps/content-editor/src/app/views/Analytics/index.tsx
@@ -3,7 +3,7 @@ import { Box } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "@zesty-io/material";
 import { AuthView } from "./components/AuthView";
-import { useGetAnalyticsPropertiesQuery } from "../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPropertiesQuery } from "../../../../../../shell/services/analytics";
 import SinglePageAnalytics from "./views/SinglePageAnalytics";
 import AnalyticsDashboard from "./views/AnalyticsDashboard";
 import { ContentItem } from "../../../../../../shell/services/types";

diff --git a/...itor/src/app/views/Analytics/views/AnalyticsDashboard/ItemsTable/GainersLosersWrapper.tsx b/...itor/src/app/views/Analytics/views/AnalyticsDashboard/ItemsTable/GainersLosersWrapper.tsx
@@ -1,5 +1,5 @@
 import { Moment } from "moment-timezone";
-import { useGetAnalyticsPagePathsByFilterQuery } from "../../../../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPagePathsByFilterQuery } from "../../../../../../../../../shell/services/analytics";
 import { ItemsTableContent } from "./ItemsTable";
 
 type Props = {

diff --git a/...content-editor/src/app/views/Analytics/views/AnalyticsDashboard/ItemsTable/ItemsTable.tsx b/...content-editor/src/app/views/Analytics/views/AnalyticsDashboard/ItemsTable/ItemsTable.tsx
@@ -11,7 +11,7 @@ import { DataGridPro, GridRenderCellParams } from "@mui/x-data-grid-pro";
 import {
   useGetAnalyticsPropertiesQuery,
   useGetAnalyticsPropertyDataByQueryQuery,
-} from "../../../../../../../../../shell/services/cloudFunctions";
+} from "../../../../../../../../../shell/services/analytics";
 import { Moment } from "moment-timezone";
 import {
   findTopDimensions,

diff --git a/...editor/src/app/views/Analytics/views/AnalyticsDashboard/ItemsTable/MostPopularWrapper.tsx b/...editor/src/app/views/Analytics/views/AnalyticsDashboard/ItemsTable/MostPopularWrapper.tsx
@@ -1,5 +1,5 @@
 import { Moment } from "moment-timezone";
-import { useGetAnalyticsPropertyDataByQueryQuery } from "../../../../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPropertyDataByQueryQuery } from "../../../../../../../../../shell/services/analytics";
 import { findTopDimensions, generateDateRangesForReport } from "../../../utils";
 import { ItemsTableContent } from "./ItemsTable";
 

diff --git a/src/apps/content-editor/src/app/views/Analytics/views/AnalyticsDashboard/index.tsx b/src/apps/content-editor/src/app/views/Analytics/views/AnalyticsDashboard/index.tsx
@@ -22,7 +22,7 @@ import { AnalyticsDateFilter } from "../../components/AnalyticsDateFilter";
 import { useSelector } from "react-redux";
 import { AppState } from "../../../../../../../../shell/store/types";
 import { Metric } from "../../components/Metric";
-import { useGetAnalyticsPropertyDataByQueryQuery } from "../../../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPropertyDataByQueryQuery } from "../../../../../../../../shell/services/analytics";
 import {
   convertSecondsToMinutesAndSeconds,
   findValuesForDimensions,

diff --git a/src/apps/content-editor/src/app/views/Analytics/views/SinglePageAnalytics/index.tsx b/src/apps/content-editor/src/app/views/Analytics/views/SinglePageAnalytics/index.tsx
@@ -20,15 +20,15 @@ import {
 import { UsersBarChart } from "./UsersBarChart";
 import { useParams as useQueryParams } from "../../../../../../../../shell/hooks/useParams";
 import { useHistory, useParams } from "react-router-dom";
-import { useGetAnalyticsPropertyDataByQueryQuery } from "../../../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPropertyDataByQueryQuery } from "../../../../../../../../shell/services/analytics";
 import {
   convertSecondsToMinutesAndSeconds,
   findValuesForDimensions,
   generateReportRequests,
   getDateRangeAndLabelsFromParams,
 } from "../../utils";
 import { Metric } from "../../components/Metric";
-import { useGetAnalyticsPropertiesQuery } from "../../../../../../../../shell/services/cloudFunctions";
+import { useGetAnalyticsPropertiesQuery } from "../../../../../../../../shell/services/analytics";
 import instanceZUID from "../../../../../../../../utility/instanceZUID";
 import { NotFound } from "../../../../../../../../shell/components/NotFound";
 import WarningRoundedIcon from "@mui/icons-material/WarningRounded";

diff --git a/src/shell/app.config.js b/src/shell/app.config.js
@@ -8,6 +8,7 @@ module.exports = {
     API_METRICS: "https://metrics.api.zesty.io",
     API_INSTANCE: ".api.zesty.io/v1",
     API_INSTANCE_PROTOCOL: "https://",
+    API_ANALYTICS: "https://analytics.api.zesty.io",
 
     CLOUD_FUNCTIONS_DOMAIN: "https://us-central1-zesty-prod.cloudfunctions.net",
 
@@ -56,6 +57,7 @@ module.exports = {
     API_METRICS: "https://metrics.api.stage.zesty.io",
     API_INSTANCE: ".api.stage.zesty.io/v1",
     API_INSTANCE_PROTOCOL: "https://",
+    API_ANALYTICS: "https://analytics.api.stage.zesty.io",
 
     CLOUD_FUNCTIONS_DOMAIN:
       "https://us-central1-zesty-stage.cloudfunctions.net",
@@ -101,6 +103,7 @@ module.exports = {
     API_METRICS: "https://metrics.api.dev.zesty.io",
     API_INSTANCE: ".api.dev.zesty.io/v1",
     API_INSTANCE_PROTOCOL: "https://",
+    API_ANALYTICS: "https://analytics-api-m3rbwjxm5q-uc.a.run.app",
 
     CLOUD_FUNCTIONS_DOMAIN: "https://us-central1-zesty-dev.cloudfunctions.net",
 
@@ -147,6 +150,7 @@ module.exports = {
     API_ACCOUNTS: "//accounts.api.zesty.localdev:3022/v1",
     API_INSTANCE: ".api.zesty.localdev:3023/v1",
     API_INSTANCE_PROTOCOL: "http://",
+    API_ANALYTICS: "https://analytics-api-m3rbwjxm5q-uc.a.run.app",
 
     SERVICE_AUTH: "http://auth.api.zesty.localdev:3011",
     SERVICE_EMAIL: "",

diff --git a/src/shell/services/analytics.ts b/src/shell/services/analytics.ts
@@ -0,0 +1,85 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { getResponseData, prepareHeaders } from "./util";
+import instanceZUID from "../../utility/instanceZUID";
+
+//Define service using a base URL and expected endpoints
+export const analyticsApi = createApi({
+  reducerPath: "analyticsApi",
+  baseQuery: fetchBaseQuery({
+    // @ts-ignore
+    baseUrl: `${__CONFIG__.API_ANALYTICS}`,
+    prepareHeaders,
+  }),
+  endpoints: (builder) => ({
+    getAnalyticsPropertyDataByQuery: builder.query<any, any>({
+      query: (body) => {
+        return {
+          url: `ga4/reports`,
+          method: "POST",
+          body,
+          params: {
+            zuid: instanceZUID,
+          },
+        };
+      },
+    }),
+    getAnalyticsProperties: builder.query<any, void>({
+      query: () => {
+        return {
+          url: `ga4/properties`,
+          method: "GET",
+          params: {
+            zuid: instanceZUID,
+          },
+        };
+      },
+    }),
+    getAnalyticsPagePathsByFilter: builder.query<
+      string[],
+      {
+        filter: "popular" | "gainer" | "loser";
+        startDate: string;
+        endDate: string;
+        propertyId: string;
+        limit: number;
+        order: "asc" | "desc";
+      }
+    >({
+      query: ({ filter, startDate, endDate, propertyId, limit, order }) => {
+        return {
+          url: `ga4/page-paths`,
+          method: "GET",
+          params: {
+            q: filter,
+            date_start: startDate,
+            date_end: endDate,
+            property_id: propertyId,
+            limit,
+            order,
+            zuid: instanceZUID,
+          },
+        };
+      },
+    }),
+    disconnectGoogleAnalytics: builder.mutation<void, void>({
+      query: () => {
+        return {
+          url: `ga4/auth/disconnect`,
+          method: "DELETE",
+          params: {
+            zuid: instanceZUID,
+          },
+        };
+      },
+    }),
+  }),
+});
+
+// Export hooks for usage in functional components, which are
+// auto-generated based on the defined endpoints
+export const {
+  useGetAnalyticsPropertiesQuery,
+  useGetAnalyticsPropertyDataByQueryQuery,
+  useGetAnalyticsPagePathsByFilterQuery,
+  useDisconnectGoogleAnalyticsMutation,
+} = analyticsApi;
diff --git a/src/shell/services/cloudFunctions.ts b/src/shell/services/cloudFunctions.ts
@@ -23,77 +23,10 @@ export const cloudFunctionsApi = createApi({
         };
       },
     }),
-    getAnalyticsPropertyDataByQuery: builder.query<any, any>({
-      query: (body) => {
-        return {
-          url: `getPropertyDataByQuery`,
-          method: "POST",
-          body,
-          params: {
-            zuid: instanceZUID,
-          },
-        };
-      },
-    }),
-    getAnalyticsProperties: builder.query<any, void>({
-      query: () => {
-        return {
-          url: `getPropertyList`,
-          method: "GET",
-          params: {
-            zuid: instanceZUID,
-          },
-        };
-      },
-    }),
-    getAnalyticsPagePathsByFilter: builder.query<
-      string[],
-      {
-        filter: "popular" | "gainer" | "loser";
-        startDate: string;
-        endDate: string;
-        propertyId: string;
-        limit: number;
-        order: "asc" | "desc";
-      }
-    >({
-      query: ({ filter, startDate, endDate, propertyId, limit, order }) => {
-        return {
-          url: `getPagePathByFilter`,
-          method: "GET",
-          params: {
-            q: filter,
-            date_start: startDate,
-            date_end: endDate,
-            property_id: propertyId,
-            limit,
-            order,
-            zuid: instanceZUID,
-          },
-        };
-      },
-    }),
-    disconnectGoogleAnalytics: builder.mutation<void, void>({
-      query: () => {
-        return {
-          url: `disconnectGoogleAnalytics`,
-          method: "DELETE",
-          params: {
-            zuid: instanceZUID,
-          },
-        };
-      },
-    }),
   }),
 });
 
 // Export hooks for usage in functional components, which are
 // auto-generated based on the defined endpoints
-export const {
-  useRefreshCacheMutation,
-  useAiGenerationMutation,
-  useGetAnalyticsPropertiesQuery,
-  useGetAnalyticsPropertyDataByQueryQuery,
-  useGetAnalyticsPagePathsByFilterQuery,
-  useDisconnectGoogleAnalyticsMutation,
-} = cloudFunctionsApi;
+export const { useRefreshCacheMutation, useAiGenerationMutation } =
+  cloudFunctionsApi;
diff --git a/src/shell/store/index.js b/src/shell/store/index.js
@@ -39,6 +39,7 @@ import { mediaManagerApi } from "../services/mediaManager";
 import { metricsApi } from "../services/metrics";
 import { cloudFunctionsApi } from "../services/cloudFunctions";
 import { marketingApi } from "../services/marketing";
+import { analyticsApi } from "../services/analytics";
 
 // Middleware is applied in order of array
 const middlewares = [
@@ -56,6 +57,7 @@ const middlewares = [
   metricsApi.middleware,
   cloudFunctionsApi.middleware,
   marketingApi.middleware,
+  analyticsApi.middleware,
 ];
 
 /**
@@ -122,6 +124,7 @@ function createReducer(asyncReducers) {
     [metricsApi.reducerPath]: metricsApi.reducer,
     [cloudFunctionsApi.reducerPath]: cloudFunctionsApi.reducer,
     [marketingApi.reducerPath]: marketingApi.reducer,
+    [analyticsApi.reducerPath]: analyticsApi.reducer,
   };
 
   return combineReducers({