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.

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';

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);
+    }
 }

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);
+    });
+});