From b8ad03b0f37a80ea89200a739126943ca503babe Mon Sep 17 00:00:00 2001
From: Chris Raible <chris@ghost.org>
Date: Thu, 11 Apr 2024 19:35:30 -0700
Subject: [PATCH] Added PostHog to admin-x-settings trackEvent function
 (#20013)

ref https://linear.app/tryghost/issue/PA-53/add-posthog-tracking-to-trackevent-in-admin-x-settings-and-lexical

- There was a pre-existing `trackEvent` function in `admin-x-settings`
that was using Plausible for tracking events.
- This PR adds PostHog to the same function, any calls to `trackEvent`
will send the event name and properties to PostHog as well.
---
 .../AddRecommendationModalConfirm.tsx         |  2 +-
 .../src/utils/{plausible.ts => analytics.ts}  | 12 ++++--
 .../test/unit/utils/analytics.test.ts         | 38 +++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 rename apps/admin-x-settings/src/utils/{plausible.ts => analytics.ts} (60%)
 create mode 100644 apps/admin-x-settings/test/unit/utils/analytics.test.ts

diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModalConfirm.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModalConfirm.tsx
index 62f660229f..8e5326cd86 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModalConfirm.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModalConfirm.tsx
@@ -2,7 +2,7 @@ import AddRecommendationModal from './AddRecommendationModal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import RecommendationDescriptionForm, {validateDescriptionForm} from './RecommendationDescriptionForm';
-import trackEvent from '../../../../utils/plausible';
+import trackEvent from '../../../../utils/analytics';
 import {EditOrAddRecommendation, useAddRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {Modal, dismissAllToasts, showToast} from '@tryghost/admin-x-design-system';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
diff --git a/apps/admin-x-settings/src/utils/plausible.ts b/apps/admin-x-settings/src/utils/analytics.ts
similarity index 60%
rename from apps/admin-x-settings/src/utils/plausible.ts
rename to apps/admin-x-settings/src/utils/analytics.ts
index cd6d882838..d80aa2bdc9 100644
--- a/apps/admin-x-settings/src/utils/plausible.ts
+++ b/apps/admin-x-settings/src/utils/analytics.ts
@@ -1,16 +1,22 @@
 // Wrapper function for Plausible event
-type PlausiblePropertyValue = string|number|boolean
+type AnalyticsPropertyValue = string|number|boolean
 
 declare global {
     interface Window {
-        plausible?: ((eventName: string, options: {props: Record<string, PlausiblePropertyValue>}) => void)
+        plausible?: ((eventName: string, options: {props: Record<string, AnalyticsPropertyValue>}) => void),
+        posthog?: {
+            capture: (eventName: string, props: Record<string, AnalyticsPropertyValue>) => void
+        }
     }
 }
 
-export default function trackEvent(eventName: string, props: Record<string, PlausiblePropertyValue> = {}) {
+export default function trackEvent(eventName: string, props: Record<string, AnalyticsPropertyValue> = {}) {
     window.plausible = window.plausible || function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any, prefer-rest-params
         ((window.plausible as any).q = (window.plausible as any).q || []).push(arguments as unknown);
     };
     window.plausible!(eventName, {props: props});
+    if (window.posthog) {
+        window.posthog.capture(eventName, props);
+    }
 }
diff --git a/apps/admin-x-settings/test/unit/utils/analytics.test.ts b/apps/admin-x-settings/test/unit/utils/analytics.test.ts
new file mode 100644
index 0000000000..7432baa949
--- /dev/null
+++ b/apps/admin-x-settings/test/unit/utils/analytics.test.ts
@@ -0,0 +1,38 @@
+import * as assert from 'assert/strict';
+import trackEvent from '../../../src/utils/analytics';
+
+describe('trackEvent', function () {
+    it('calls posthog.capture with the correct event name and properties', function () {
+        const testEventName = 'Recommendation Added';
+        const testProps = {
+            oneClickSubscribe: true
+        };
+
+        window.posthog = {
+            capture: (eventName, props) => {
+                assert.equal(eventName, 'Recommendation Added');
+                assert.deepEqual(props, {
+                    oneClickSubscribe: true
+                });
+            }
+        };
+
+        trackEvent(testEventName, testProps);
+    });
+
+    it('calls plausible with the correct event name and properties', function () {
+        const testEventName = 'Recommendation Added';
+        const testProps = {
+            oneClickSubscribe: true
+        };
+
+        window.plausible = (eventName, {props}) => {
+            assert.equal(eventName, 'Recommendation Added');
+            assert.deepEqual(props, {
+                oneClickSubscribe: true
+            });
+        };
+
+        trackEvent(testEventName, testProps);
+    });
+});