MRKT-182: Adds Google Analytics for Marketplace

.github/workflows/aws-hosting-deploy-published-release-newm-marketplace.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Deploy marketplace
         run: |
           npm install --prefix .github/workflows/cdk
-          APPNAME=marketplace APPID=Marketplace QUALIFIER=Studio NEXT_PUBLIC_ENV=production NEXT_PUBLIC_RECAPTCHA_SITE_KEY_PROD=${{ secrets.RECAPTCHA_SITE_KEY_PROD }} NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE=${{ secrets.DEXHUNTER_MARKETPLACE_PARTNER_CODE }} NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }} npm run --prefix .github/workflows/cdk cdk:deploy deploy -- --require-approval never
+          APPNAME=marketplace APPID=Marketplace QUALIFIER=Studio NEXT_PUBLIC_ENV=production NEXT_PUBLIC_RECAPTCHA_SITE_KEY_PROD=${{ secrets.RECAPTCHA_SITE_KEY_PROD }} NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE=${{ secrets.DEXHUNTER_MARKETPLACE_PARTNER_CODE }} NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }} NEXT_PUBLIC_GA_MARKETPLACE_ID=${{ secrets.GA_MARKETPLACE_ID }} npm run --prefix .github/workflows/cdk cdk:deploy deploy -- --require-approval never
 
       - name: Send update to slack
         id: slack

.github/workflows/aws-hosting-merge-deploy-newm-marketplace.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Deploy to Lambda Function
         run: |
           npm install --prefix .github/workflows/cdk
-          APPNAME=marketplace APPID=Marketplace QUALIFIER=Garage NEXT_PUBLIC_ENV=staging NEXT_PUBLIC_RECAPTCHA_SITE_KEY_STAGING=${{ secrets.RECAPTCHA_SITE_KEY_STAGING }} NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE=${{ secrets.DEXHUNTER_MARKETPLACE_PARTNER_CODE }} NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }} npm run --prefix .github/workflows/cdk cdk:deploy deploy -- --require-approval never
+          APPNAME=marketplace APPID=Marketplace QUALIFIER=Garage NEXT_PUBLIC_ENV=staging NEXT_PUBLIC_RECAPTCHA_SITE_KEY_STAGING=${{ secrets.RECAPTCHA_SITE_KEY_STAGING }} NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE=${{ secrets.DEXHUNTER_MARKETPLACE_PARTNER_CODE }} NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }} NEXT_PUBLIC_GA_MARKETPLACE_ID=${{ secrets.GA_MARKETPLACE_ID }} npm run --prefix .github/workflows/cdk cdk:deploy deploy -- --require-approval never
 
       - name: Send update to slack
         id: slack

.github/workflows/aws-hosting-pull-request-newm-marketplace.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Deploy to Lambda Function
         run: |
           npm install --prefix .github/workflows/cdk
-          APPNAME=marketplace QUALIFIER=${{ github.event.pull_request.number }} NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE=${{ secrets.DEXHUNTER_MARKETPLACE_PARTNER_CODE }} NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }} npm run --prefix .github/workflows/cdk cdk:preview deploy -- --require-approval never
+          APPNAME=marketplace QUALIFIER=${{ github.event.pull_request.number }} NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE=${{ secrets.DEXHUNTER_MARKETPLACE_PARTNER_CODE }} NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }} NEXT_PUBLIC_GA_MARKETPLACE_ID=${{ secrets.GA_MARKETPLACE_ID }} npm run --prefix .github/workflows/cdk cdk:preview deploy -- --require-approval never
 
       - name: Get preview url
         id: previewurl

.github/workflows/cdk/bin/deploy.ts

@@ -10,6 +10,7 @@ import { Tags } from "aws-cdk-lib";
 const appName = process.env.APPNAME || "APPNAME";
 const appId = process.env.APPID || "APPID";
 const qualifier = process.env.QUALIFIER || "UNDEFINED";
+const gaMarketplaceId = process.env.NEXT_PUBLIC_GA_MARKETPLACE_ID;
 const nxCloudAccessToken = process.env.NX_CLOUD_ACCESS_TOKEN;
 const dexHunterMarketplacePartnerCode =
   process.env.NEXT_PUBLIC_DEXHUNTER_MARKETPLACE_PARTNER_CODE || "";
@@ -35,6 +36,7 @@ class WebDeployStack extends cdk.Stack {
               dexHunterMarketplacePartnerCode,
             NEXT_PUBLIC_DEXHUNTER_TOOLS_PARTNER_CODE: dexHunterToolsPartnerCode,
             NEXT_PUBLIC_ENV: appEnv,
+            NEXT_PUBLIC_GA_MARKETPLACE_ID: gaMarketplaceId,
             NEXT_PUBLIC_RECAPTCHA_SITE_KEY_PROD: recaptchaKeyProd,
             NEXT_PUBLIC_RECAPTCHA_SITE_KEY_STAGING: recaptchaKeyStaging,
           },

.github/workflows/cdk/bin/preview.ts

@@ -8,6 +8,7 @@ import { Construct } from "constructs";
 const appName = process.env.APPNAME || "APPNAME";
 const appNameAbbr = appName.replace(/-/g, "");
 const qualifier = process.env.QUALIFIER || "UNDEFINED";
+const gaMarketplaceId = process.env.NEXT_PUBLIC_GA_MARKETPLACE_ID;
 const nxCloudAccessToken = process.env.NX_CLOUD_ACCESS_TOKEN;
 const recaptchaKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY_STAGING || "";
 const dexHunterMarketplacePartnerCode =
@@ -31,6 +32,7 @@ class WebPreviewStack extends cdk.Stack {
               dexHunterMarketplacePartnerCode,
             NEXT_PUBLIC_DEXHUNTER_TOOLS_PARTNER_CODE: dexHunterToolsPartnerCode,
             NEXT_PUBLIC_ENV: appEnv,
+            NEXT_PUBLIC_GA_MARKETPLACE_ID: gaMarketplaceId,
             NEXT_PUBLIC_RECAPTCHA_SITE_KEY_STAGING: recaptchaKey,
           },
           file: path.join("apps", appName, "Dockerfile"),

apps/marketplace/src/components/GoogleAnalytics.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent, useEffect } from "react";
+import { GA_MARKETPLACE_ID, isProd } from "@newm-web/env";
+import ReactGA from "react-ga4";
+import { useLocation } from "react-router-dom";
+
+if (isProd && GA_MARKETPLACE_ID) {
+  ReactGA.initialize(GA_MARKETPLACE_ID);
+}
+
+const GoogleAnalytics: FunctionComponent = () => {
+  const location = useLocation();
+
+  /**
+   * Send GA page view on each route change in production.
+   */
+  useEffect(() => {
+    if (!isProd) return;
+
+    ReactGA.send({
+      hitType: "pageview",
+      page: location.pathname,
+    });
+  }, [location]);
+
+  return null;
+};
+
+export default GoogleAnalytics;

packages/env/src/lib/env.ts

@@ -15,6 +15,10 @@ const getAppEnvVar = (name: string): string => {
       return typeof process !== "undefined"
         ? process.env.NEXT_PUBLIC_GA_STUDIO_ID
         : import.meta.env.VITE_GA_STUDIO_ID;
+    case "GA_MARKETPLACE_ID":
+      return typeof process !== "undefined"
+        ? process.env.NEXT_PUBLIC_GA_MARKETPLACE_ID
+        : import.meta.env.VITE_GA_MARKETPLACE_ID;
     case "RECAPTCHA_SITE_KEY_STAGING":
       return typeof process !== "undefined"
         ? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY_STAGING
@@ -47,6 +51,7 @@ const getAppEnvVar = (name: string): string => {
 export const APPLE_CLIENT_ID = getAppEnvVar("APPLE_CLIENT_ID");
 export const GOOGLE_CLIENT_ID = getAppEnvVar("GOOGLE_CLIENT_ID");
 export const GA_STUDIO_ID = getAppEnvVar("GA_STUDIO_ID");
+export const GA_MARKETPLACE_ID = getAppEnvVar("GA_MARKETPLACE_ID");
 export const DEXHUNTER_STUDIO_PARTNER_CODE = getAppEnvVar(
   "DEXHUNTER_STUDIO_PARTNER_CODE"
 );