Fixed PostHog toolbar in admin (#19675)

refs PA-32

- The PostHog toolbar relies on a value that is passed via a hash in the
URL to launch successfully
- Admin overwrites the hash (since it uses hash based routing) before
the toolbar has a chance to read the value
- This change checks for the hash and if it exists, it launches the
toolbar using the hash value

ghost/admin/app/components/koenig-image-editor.js

@@ -1,8 +1,8 @@
 import Component from '@glimmer/component';
-import trackEvent from '../utils/analytics';
 import {action} from '@ember/object';
 import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
+import {trackEvent} from '../utils/analytics';
 import {tracked} from '@glimmer/tracking';
 
 export default class KoenigImageEditor extends Component {

ghost/admin/app/routes/home.js

@@ -1,4 +1,5 @@
 import Route from '@ember/routing/route';
+import {loadToolbar} from '../utils/analytics';
 import {inject as service} from '@ember/service';
 
 export default class HomeRoute extends Route {
@@ -9,6 +10,8 @@ export default class HomeRoute extends Route {
     beforeModel(transition) {
         super.beforeModel(...arguments);
 
+        loadToolbar();
+
         if (transition.to?.queryParams?.firstStart === 'true') {
             return this.router.transitionTo('setup.done');
         }

ghost/admin/app/utils/analytics.js

@@ -1,8 +1,28 @@
 // Wrapper function for Plausible event
 
-export default function trackEvent(eventName, props = {}) {
+export function trackEvent(eventName, props = {}) {
     window.plausible = window.plausible || function () {
         (window.plausible.q = window.plausible.q || []).push(arguments);
     };
     window.plausible(eventName, {props: props});
 }
+
+/**
+ * Load the PostHog toolbar if available
+ * window.posthog must be available for this to do anything
+ * This function needs to be called before the Admin App is fully initialized
+ * because the Admin App overwrites the #__posthog hash with its own routing
+ * before the PostHog snippet can read it and load the toolbar itself.
+ * @returns {void}
+ */
+export function loadToolbar() {
+    try {
+        const toolbarJSON = new URLSearchParams(window.location.hash.substring(1)).get('__posthog');
+        if (toolbarJSON && window.posthog) {
+            window.posthog.loadToolbar(JSON.parse(toolbarJSON));
+        }
+    } catch (e) {
+        // fail silently
+    }
+}
+