Commit progress on adding a google provider

Author: paulpopus

demo/.gitignore

@@ -2,3 +2,5 @@ node_modules
 media
 
 .env
+
+ga_credentials.json

demo/src/payload.config.ts

@@ -6,20 +6,29 @@ import Tags from "./collections/Tags";
 import Users from "./collections/Users";
 import Media from "./collections/Media";
 import Homepage from "./globals/Homepage";
-import payloadDashboardAnalytics from "../../src/index";
-import { PlausibleProvider } from "../../src/types/providers";
+import dashboardAnalytics from "../../src/index";
+import { PlausibleProvider, GoogleProvider } from "../../src/types/providers";
 
 const PLAUSIBLE_API_KEY = process.env.PLAUSIBLE_API_KEY;
 const PLAUSIBLE_HOST = process.env.PLAUSIBLE_HOST;
 const PLAUSIBLE_SITE_ID = process.env.PLAUSIBLE_SITE_ID;
 
+const GOOGLE_PROPERTY_ID = process.env.GOOGLE_PROPERTY_ID;
+const GOOGLE_CREDENTIALS_FILE = process.env.GOOGLE_CREDENTIALS_FILE;
+
 const plausibleProvider: PlausibleProvider = {
   source: "plausible",
   apiSecret: PLAUSIBLE_API_KEY,
   siteId: PLAUSIBLE_SITE_ID,
   host: PLAUSIBLE_HOST,
 };
 
+const googleProvider: GoogleProvider = {
+  source: "google",
+  credentials: GOOGLE_CREDENTIALS_FILE,
+  propertyId: GOOGLE_PROPERTY_ID,
+};
+
 export default buildConfig({
   serverURL: "http://localhost:3000",
   admin: {
@@ -51,8 +60,8 @@ export default buildConfig({
     schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
   },
   plugins: [
-    payloadDashboardAnalytics({
-      provider: plausibleProvider,
+    dashboardAnalytics({
+      provider: googleProvider,
       access: (user: any) => {
         return Boolean(user);
       },

package.json

@@ -24,9 +24,11 @@
   "license": "MIT",
   "peerDependencies": {
     "payload": "^1.6.16",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@google-analytics/data": "^3.2"
   },
   "devDependencies": {
+    "@google-analytics/data": "^3.2.1",
     "@types/react-router-dom": "^5.3.3",
     "payload": "^1.6.26",
     "react": "^18",

src/extendWebpackConfig.ts

@@ -1,11 +1,38 @@
 import type { Config } from "payload/config";
 import path from "path";
 import type { Configuration as WebpackConfig } from "webpack";
+import type { Provider } from "./types";
 
 const mockModulePath = path.resolve(__dirname, "mocks/serverModule.js");
 
+/* Some providers may need their own list of mocked modules to avoid react errors and bundling of node modules */
+const aliasMap: Record<Provider["source"], any> = {
+  google: {
+    [path.resolve(__dirname, "./providers/google/client")]: mockModulePath,
+    [path.resolve(__dirname, "./providers/google/getLiveData")]: mockModulePath,
+    "@google-analytics/data": mockModulePath,
+    url: mockModulePath,
+    querystring: mockModulePath,
+    fs: mockModulePath,
+    os: mockModulePath,
+    stream: mockModulePath,
+    child_process: mockModulePath,
+    util: mockModulePath,
+    net: mockModulePath,
+    tls: mockModulePath,
+    assert: mockModulePath,
+    request: mockModulePath,
+  },
+  plausible: {
+    [path.resolve(__dirname, "./providers/plausible/client")]: mockModulePath,
+  },
+};
+
 export const extendWebpackConfig =
-  (config: Config): ((webpackConfig: WebpackConfig) => WebpackConfig) =>
+  (
+    config: Config,
+    provider: Provider["source"]
+  ): ((webpackConfig: WebpackConfig) => WebpackConfig) =>
   (webpackConfig) => {
     const existingWebpackConfig =
       typeof config.admin?.webpack === "function"
@@ -21,9 +48,7 @@ export const extendWebpackConfig =
             ? existingWebpackConfig.resolve.alias
             : {}),
           express: mockModulePath,
-          [path.resolve(__dirname, "./providers/plausible/client")]:
-            mockModulePath,
-          /* [path.resolve(__dirname, "./routes/")]: mockModulePath, */
+          ...aliasMap[provider],
         },
       },
     };

src/index.ts

@@ -20,7 +20,7 @@ import {
   DashboardWidgetMap,
 } from "./utilities/widgetMaps";
 
-const payloadDashboardAnalytics =
+const dashboardAnalytics =
   (incomingConfig: DashboardAnalyticsConfig) =>
   (config: PayloadConfig): PayloadConfig => {
     const { admin, collections, globals } = config;
@@ -67,7 +67,7 @@ const payloadDashboardAnalytics =
             ],
           }),
         },
-        webpack: extendWebpackConfig(config),
+        webpack: extendWebpackConfig(config, provider.source),
       },
       endpoints: [
         ...endpoints,
@@ -137,4 +137,4 @@ const payloadDashboardAnalytics =
     return processedConfig;
   };
 
-export default payloadDashboardAnalytics;
+export default dashboardAnalytics;

src/providers/google/client.ts

@@ -0,0 +1,23 @@
+import type { GoogleProvider } from "../../types/providers";
+import type { Metrics, Properties } from "../../types/widgets";
+import { BetaAnalyticsDataClient } from "@google-analytics/data";
+import { MetricMap, PropertyMap } from "./utilities";
+
+type ClientOptions = {
+  endpoint: string;
+  timeframe?: string;
+  metrics?: Metrics[];
+  property?: Properties;
+};
+
+function client(provider: GoogleProvider, options: ClientOptions) {
+  const analyticsDataClient = new BetaAnalyticsDataClient({
+    keyFilename: provider.credentials,
+  });
+
+  return {
+    run: analyticsDataClient,
+  };
+}
+
+export default client;

src/providers/google/getLiveData.ts

@@ -0,0 +1,36 @@
+import type { GoogleProvider } from "../../types/providers";
+import type { LiveDataOptions } from "..";
+import type { LiveData } from "../../types/data";
+import client from "./client";
+
+async function getLiveData(provider: GoogleProvider, options: LiveDataOptions) {
+  const googleClient = client(provider, {
+    endpoint: "/stats/realtime/visitors",
+  });
+
+  const request = {
+    property: `properties/${provider.propertyId}`,
+    dateRanges: [
+      {
+        startDate: "2023-03-05",
+        endDate: "today",
+      },
+    ],
+    /* dimensions: [{ name: "country" }], */
+    metrics: [{ name: "activeUsers" }],
+  };
+
+  const data = await googleClient.run
+    .runRealtimeReport(request)
+    .then((data) => data[0].rows?.[0].metricValues?.[0]?.value);
+
+  console.log("data rows", data);
+
+  const processedData: LiveData = {
+    visitors: data ? parseInt(data) : 0,
+  };
+
+  return processedData;
+}
+
+export default getLiveData;

src/providers/google/getPageAggregateData.ts

@@ -0,0 +1,48 @@
+import type { GoogleProvider } from "../../types/providers";
+import type { PageAggregateOptions } from "..";
+import type { AggregateData } from "../../types/data";
+import { getMetrics } from "./utilities";
+import client from "./client";
+
+async function getPageAggregateData(
+  provider: GoogleProvider,
+  options: PageAggregateOptions
+) {
+  const googleClient = client(provider, {
+    endpoint: "/stats/realtime/visitors",
+  });
+
+  const { metrics } = options;
+
+  const usedMetrics = getMetrics(metrics);
+
+  console.log("usedMetrics", usedMetrics);
+
+  const request = {
+    property: `properties/${provider.propertyId}`,
+    dateRanges: [
+      {
+        startDate: "2023-03-05",
+        endDate: "today",
+      },
+    ],
+    dimensions: [{ name: "pagePath" }],
+    metrics: usedMetrics.map((metric) => {
+      return {
+        name: metric,
+      };
+    }),
+  };
+
+  const data = await googleClient.run.runReport(request).then((data) => data);
+
+  console.log("data rows", data);
+
+  const processedData: AggregateData = {
+    visitors: 0,
+  };
+
+  return processedData;
+}
+
+export default getPageAggregateData;

src/providers/google/index.ts

@@ -0,0 +1,43 @@
+import type { GoogleProvider } from "../../types/providers";
+/* import getGlobalAggregateData from "./getGlobalAggregateData";
+import getGlobalChartData from "./getGlobalChartData";
+import getPageChartData from "./getPageChartData"; */
+import getPageAggregateData from "./getPageAggregateData";
+import getLiveData from "./getLiveData";
+/* import getReportData from "./getReportData"; */
+import type {
+  ApiProvider,
+  GlobalAggregateOptions,
+  GlobalChartOptions,
+  PageChartOptions,
+  PageAggregateOptions,
+  LiveDataOptions,
+  ReportDataOptions,
+} from "..";
+
+import { MetricMap } from "./utilities";
+
+const google = (provider: GoogleProvider): ApiProvider => {
+  return {
+    getGlobalAggregateData: async (options: GlobalAggregateOptions) =>
+      await new Promise(() => "test"),
+    /* await getGlobalAggregateData(provider, options), */
+    getGlobalChartData: async (options: GlobalChartOptions) =>
+      await new Promise(() => "test"),
+    /* await getGlobalChartData(provider, options), */
+    getPageChartData: async (options: PageChartOptions) =>
+      await new Promise(() => "test"),
+    /* await getPageChartData(provider, options), */
+    getPageAggregateData: async (options: PageAggregateOptions) =>
+      await getPageAggregateData(provider, options),
+    /* await getPageAggregateData(provider, options), */
+    getLiveData: async (options: LiveDataOptions) =>
+      await getLiveData(provider, options),
+    getReportData: async (options: ReportDataOptions) =>
+      await new Promise(() => "test"),
+    /* await getReportData(provider, options), */
+    metricsMap: MetricMap,
+  };
+};
+
+export default google;

src/providers/google/utilities.ts

@@ -0,0 +1,50 @@
+import type { MetricsMap, PropertiesMap } from "../../types/data";
+
+export const MetricMap: MetricsMap = {
+  views: {
+    label: "Views",
+    value: "screenPageViews",
+  },
+  visitors: { label: "Visitors", value: "activeUsers" },
+  bounceRate: { label: "Bounce rate", value: "bounceRate" },
+  sessionDuration: { label: "Avg. duration", value: "averageSessionDuration" },
+  sessions: { label: "Sessions", value: "sessions" },
+};
+
+export const PropertyMap: PropertiesMap = {
+  page: {
+    label: "Page",
+    value: "pagePath",
+  },
+  country: {
+    label: "Country",
+    value: "country",
+  },
+  /* entryPoint: {
+    label: "Pages",
+    value: "landingPagePlusQueryString",
+  },
+  exitPoint: {
+    label: "Pages",
+    value: "event:page",
+  }, */
+  source: {
+    label: "Source",
+    value: "source",
+  },
+};
+
+export const getMetrics = (metrics: Array<keyof MetricsMap>) => {
+  const myMetrics: string[] = [];
+  const availableMetrics = Object.entries(MetricMap);
+
+  metrics?.forEach((metric) => {
+    const foundMetric = availableMetrics.find((mappedMetric) => {
+      return mappedMetric[0] === metric;
+    });
+
+    if (foundMetric) myMetrics.push(foundMetric[1].value);
+  });
+
+  return myMetrics;
+};