Updated new Post Analytics to be the default for posts/analytics route (#24479)

9larsons · cmraible · web-flow · commit b1475458d068 · 2025-07-23T07:03:20.000-05:00
ref https://linear.app/ghost/issue/PROD-2326/ - removed Ember analytics by removing posts.analytics route - updated Ember references to posts.analytics and pointed to posts.posts-x (this prevents Ember crashes) - updated Admin router to use posts.posts-x for /posts/analytics/ (removed beta/) - updated Posts and Stats apps to remove /beta/ This set of changes is moving the new posts app to be the default for Post Analytics. This was previously at the /posts/analytics/beta/:id path, and is now at /posts/analytics/:id, replacing the Ember view with the new React app. The /debug and /mentions paths are still available and will load their respective Ember views, so it's not as seamless as it once was, though we intend to move more and more into the posts app. --------- Co-authored-by: Chris Raible <chris@ghost.org>
diff --git a/apps/posts/src/routes.tsx b/apps/posts/src/routes.tsx
@@ -23,7 +23,7 @@ export const routes: RouteObject[] = [
             {
 
                 // Post Analytics
-                path: 'analytics/beta/:postId',
+                path: 'analytics/:postId',
                 element: (
                     <PostAnalyticsProvider>
                         <PostAnalytics />
diff --git a/apps/posts/src/views/PostAnalytics/Newsletter/Newsletter.tsx b/apps/posts/src/views/PostAnalytics/Newsletter/Newsletter.tsx
@@ -83,7 +83,7 @@ const Newsletter: React.FC<postAnalyticsProps> = () => {
     useEffect(() => {
         // Redirect to overview if the post wasn't sent as a newsletter
         if (!isPostLoading && !showNewsletterSection) {
-            navigate(`/analytics/beta/${postId}`);
+            navigate(`/analytics/${postId}`);
         }
     }, [navigate, postId, isPostLoading, showNewsletterSection]);
 
diff --git a/apps/posts/src/views/PostAnalytics/Overview/Overview.tsx b/apps/posts/src/views/PostAnalytics/Overview/Overview.tsx
@@ -125,7 +125,7 @@ const Overview: React.FC = () => {
     // Redirect to Growth tab if this is a published-only post with web analytics disabled
     useEffect(() => {
         if (!isPostLoading && post && isPublishedOnly(post as Post) && !appSettings?.analytics.webAnalytics) {
-            navigate(`/analytics/beta/${postId}/growth`);
+            navigate(`/analytics/${postId}/growth`);
         }
     }, [isPostLoading, post, appSettings?.analytics.webAnalytics, navigate, postId]);
 
@@ -167,7 +167,7 @@ const Overview: React.FC = () => {
                                 </CardTitle>
                             </CardHeader>
                             <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100' size='sm' variant='outline' onClick={() => {
-                                navigate(`/analytics/beta/${postId}/growth`);
+                                navigate(`/analytics/${postId}/growth`);
                             }}>View more</Button>
                         </div>
                         <CardContent className='flex flex-col gap-8 px-0 md:grid md:grid-cols-3 md:items-stretch md:gap-0'>
diff --git a/apps/posts/src/views/PostAnalytics/Overview/components/NewsletterOverview.tsx b/apps/posts/src/views/PostAnalytics/Overview/components/NewsletterOverview.tsx
@@ -72,7 +72,7 @@ const NewsletterOverview: React.FC<NewsletterOverviewProps> = ({post, isNewslett
                     </CardTitle>
                 </CardHeader>
                 <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-300 group-hover/datalist:translate-x-0 group-hover/datalist:opacity-100' size='sm' variant='outline' onClick={() => {
-                    navigate(`/analytics/beta/${postId}/newsletter`);
+                    navigate(`/analytics/${postId}/newsletter`);
                 }}>View more</Button>
             </div>
             {isNewsletterStatsLoading ?
@@ -172,7 +172,7 @@ const NewsletterOverview: React.FC<NewsletterOverviewProps> = ({post, isNewslett
                         </div>
                     </div>
                     {/* <Button variant='outline' onClick={() => {
-                        navigate(`/analytics/beta/${postId}/newsletter`);
+                        navigate(`/analytics/${postId}/newsletter`);
                     }}>
                         View all
                         <LucideIcon.ArrowRight />
diff --git a/apps/posts/src/views/PostAnalytics/Overview/components/WebOverview.tsx b/apps/posts/src/views/PostAnalytics/Overview/components/WebOverview.tsx
@@ -41,7 +41,7 @@ const WebOverview: React.FC<WebOverviewProps> = ({chartData, range, isLoading, v
                         </CardTitle>
                     </CardHeader>
                     <Button className='absolute right-6 translate-x-10 opacity-0 transition-all duration-300 group-hover/datalist:translate-x-0 group-hover/datalist:opacity-100' size='sm' variant='outline' onClick={() => {
-                        navigate(`/analytics/beta/${postId}/web`);
+                        navigate(`/analytics/${postId}/web`);
                     }}>View more</Button>
                 </div>
                 <CardContent>
diff --git a/apps/posts/src/views/PostAnalytics/Web/Web.tsx b/apps/posts/src/views/PostAnalytics/Web/Web.tsx
@@ -34,7 +34,7 @@ const Web: React.FC<postAnalyticsProps> = () => {
     // Redirect to Overview if this is an email-only post
     useEffect(() => {
         if (!isPostLoading && post?.email_only) {
-            navigate(`/analytics/beta/${postId}`);
+            navigate(`/analytics/${postId}`);
         }
     }, [isPostLoading, post?.email_only, navigate, postId]);
 
diff --git a/apps/posts/src/views/PostAnalytics/components/PostAnalyticsHeader.tsx b/apps/posts/src/views/PostAnalytics/components/PostAnalyticsHeader.tsx
@@ -200,28 +200,28 @@ const PostAnalyticsHeader:React.FC<PostAnalyticsHeaderProps> = ({
                     <PageMenu className='min-h-[34px]' defaultValue={currentTab} responsive>
                         {availableTabs.includes('Overview') && (
                             <PageMenuItem value="Overview" onClick={() => {
-                                navigate(`/analytics/beta/${postId}`);
+                                navigate(`/analytics/${postId}`);
                             }}>
                                     Overview
                             </PageMenuItem>
                         )}
                         {availableTabs.includes('Web') && (
                             <PageMenuItem value="Web" onClick={() => {
-                                navigate(`/analytics/beta/${postId}/web`);
+                                navigate(`/analytics/${postId}/web`);
                             }}>
                                     Web traffic
                             </PageMenuItem>
                         )}
                         {availableTabs.includes('Newsletter') && (
                             <PageMenuItem value="Newsletter" onClick={() => {
-                                navigate(`/analytics/beta/${postId}/newsletter`);
+                                navigate(`/analytics/${postId}/newsletter`);
                             }}>
                                     Newsletter
                             </PageMenuItem>
                         )}
                         {availableTabs.includes('Growth') && (
                             <PageMenuItem value="Growth" onClick={() => {
-                                navigate(`/analytics/beta/${postId}/growth`);
+                                navigate(`/analytics/${postId}/growth`);
                             }}>
                                     Growth
                             </PageMenuItem>
diff --git a/apps/posts/src/views/PostAnalytics/components/Sidebar.tsx b/apps/posts/src/views/PostAnalytics/components/Sidebar.tsx
@@ -19,32 +19,32 @@ const Sidebar:React.FC = () => {
     return (
         <div className='grow py-8 pr-0'>
             <RightSidebarMenu>
-                <RightSidebarMenuLink active={location.pathname === `/analytics/beta/${postId}`} onClick={() => {
-                    navigate(`/analytics/beta/${postId}`);
+                <RightSidebarMenuLink active={location.pathname === `/analytics/${postId}`} onClick={() => {
+                    navigate(`/analytics/${postId}`);
                 }}>
                     <LucideIcon.LayoutTemplate size={16} strokeWidth={1.25} />
                     Overview
                 </RightSidebarMenuLink>
                 {!post?.email_only && (
-                    <RightSidebarMenuLink active={location.pathname === `/analytics/beta/${postId}/web`} onClick={() => {
-                        navigate(`/analytics/beta/${postId}/web`);
+                    <RightSidebarMenuLink active={location.pathname === `/analytics/${postId}/web`} onClick={() => {
+                        navigate(`/analytics/${postId}/web`);
                     }}>
                         <LucideIcon.MousePointer size={16} strokeWidth={1.25} />
                         Web
                     </RightSidebarMenuLink>
                 )}
 
                 {hasBeenEmailed && (
-                    <RightSidebarMenuLink active={location.pathname === `/analytics/beta/${postId}/newsletter`} onClick={() => {
-                        navigate(`/analytics/beta/${postId}/newsletter`);
+                    <RightSidebarMenuLink active={location.pathname === `/analytics/${postId}/newsletter`} onClick={() => {
+                        navigate(`/analytics/${postId}/newsletter`);
                     }}>
                         <LucideIcon.Mail size={16} strokeWidth={1.25} />
                         Newsletter
                     </RightSidebarMenuLink>
                 )}
 
-                <RightSidebarMenuLink active={location.pathname === `/analytics/beta/${postId}/growth`} onClick={() => {
-                    navigate(`/analytics/beta/${postId}/growth`);
+                <RightSidebarMenuLink active={location.pathname === `/analytics/${postId}/growth`} onClick={() => {
+                    navigate(`/analytics/${postId}/growth`);
                 }}>
                     <LucideIcon.Sprout size={16} strokeWidth={1.25} />
                 Growth
diff --git a/apps/stats/src/utils/url-helpers.ts b/apps/stats/src/utils/url-helpers.ts
@@ -100,7 +100,7 @@ export function getClickHandler(
     return () => {
         // For posts with analytics, go to analytics page
         if (postId && attributionUrl && attributionType === 'post') {
-            navigate(`/posts/analytics/beta/${postId}`, {crossApp: true});
+            navigate(`/posts/analytics/${postId}`, {crossApp: true});
             return;
         }
         
diff --git a/apps/stats/src/views/Stats/Newsletters/Newsletters.tsx b/apps/stats/src/views/Stats/Newsletters/Newsletters.tsx
@@ -73,7 +73,7 @@ const NewsletterTableRows: React.FC<{
                                 <div className='group/link inline-flex items-center gap-2'>
                                     {post.post_id ?
                                         <Button className='h-auto whitespace-normal p-0 text-left hover:!underline' title="View post analytics" variant='link' onClick={() => {
-                                            navigate(`/posts/analytics/beta/${post.post_id}/`, {crossApp: true});
+                                            navigate(`/posts/analytics/${post.post_id}/`, {crossApp: true});
                                         }}>
                                             {post.post_title}
                                         </Button>
diff --git a/apps/stats/src/views/Stats/Newsletters/components/NewslettersKPIs.tsx b/apps/stats/src/views/Stats/Newsletters/components/NewslettersKPIs.tsx
@@ -319,7 +319,7 @@ const NewsletterKPIs: React.FC<{
                                             }}
                                             onClick={(e) => {
                                                 if (e.activePayload && e.activePayload![0].payload.post_id) {
-                                                    navigate(`/posts/analytics/beta/${e.activePayload![0].payload.post_id}`, {crossApp: true});
+                                                    navigate(`/posts/analytics/${e.activePayload![0].payload.post_id}`, {crossApp: true});
                                                 }
                                             }}
                                             onMouseLeave={() => setIsHoveringClickable(false)}
diff --git a/apps/stats/src/views/Stats/Overview/components/LatestPost.tsx b/apps/stats/src/views/Stats/Overview/components/LatestPost.tsx
@@ -96,7 +96,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
                             <div className='flex grow flex-col items-start justify-center self-stretch'>
                                 <div className='text-lg font-semibold leading-tighter tracking-tight hover:cursor-pointer hover:opacity-75' onClick={() => {
                                     if (!isLoading && latestPostStats) {
-                                        navigate(`/posts/analytics/beta/${latestPostStats.id}`, {crossApp: true});
+                                        navigate(`/posts/analytics/${latestPostStats.id}`, {crossApp: true});
                                     }
                                 }}>
                                     {latestPostStats.title}
@@ -134,7 +134,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
                                         className={latestPostStats.email_only ? 'w-full' : ''}
                                         variant='outline'
                                         onClick={() => {
-                                            navigate(`/posts/analytics/beta/${latestPostStats.id}`, {crossApp: true});
+                                            navigate(`/posts/analytics/${latestPostStats.id}`, {crossApp: true});
                                         }}
                                     >
                                         <LucideIcon.ChartNoAxesColumn />
@@ -151,7 +151,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
                                 {/* Web metrics - only for published posts */}
                                 {metricsToShow.showWebMetrics && appSettings?.analytics.webAnalytics &&
                                     <div className={metricClassName} onClick={() => {
-                                        navigate(`/posts/analytics/beta/${latestPostStats.id}/web`, {crossApp: true});
+                                        navigate(`/posts/analytics/${latestPostStats.id}/web`, {crossApp: true});
                                     }}>
                                         <div className='flex items-center gap-1.5 font-medium text-muted-foreground transition-all group-hover:text-foreground'>
                                             <LucideIcon.Globe size={16} strokeWidth={1.25} />
@@ -173,7 +173,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
                                             (!metricsToShow.showWebMetrics || !appSettings?.analytics.webAnalytics) && 'row-[2/3] col-[1/2]'
                                         )
                                     } onClick={() => {
-                                        navigate(`/posts/analytics/beta/${latestPostStats.id}/growth`, {crossApp: true});
+                                        navigate(`/posts/analytics/${latestPostStats.id}/growth`, {crossApp: true});
                                     }}>
                                         <div className='flex items-center gap-1.5 font-medium text-muted-foreground transition-all group-hover:text-foreground'>
                                             <LucideIcon.UserPlus size={16} strokeWidth={1.25} />
@@ -195,7 +195,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
                                     <>
                                         {emailTrackOpensEnabled && (
                                             <div className={metricClassName} onClick={() => {
-                                                navigate(`/posts/analytics/beta/${latestPostStats.id}/newsletter`, {crossApp: true});
+                                                navigate(`/posts/analytics/${latestPostStats.id}/newsletter`, {crossApp: true});
                                             }}>
                                                 <div className='flex items-center gap-1.5 font-medium text-muted-foreground transition-all group-hover:text-foreground'>
                                                     <LucideIcon.MailOpen size={16} strokeWidth={1.25} />
@@ -211,7 +211,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
                                         )}
                                         {emailTrackClicksEnabled && (
                                             <div className={metricClassName} onClick={() => {
-                                                navigate(`/posts/analytics/beta/${latestPostStats.id}/newsletter`, {crossApp: true});
+                                                navigate(`/posts/analytics/${latestPostStats.id}/newsletter`, {crossApp: true});
                                             }}>
                                                 <div className='flex items-center gap-1.5 font-medium text-muted-foreground transition-all group-hover:text-foreground'>
                                                     <LucideIcon.MousePointerClick size={16} strokeWidth={1.25} />
diff --git a/apps/stats/src/views/Stats/Overview/components/TopPosts.tsx b/apps/stats/src/views/Stats/Overview/components/TopPosts.tsx
@@ -84,7 +84,7 @@ const TopPosts: React.FC<TopPostsProps> = ({
                             topPostsData?.stats?.map((post: TopPostViewsStats) => {
                                 return (
                                     <div className='group relative flex w-full items-start justify-between gap-5 border-t border-border/50 py-4 before:absolute before:-inset-x-4 before:inset-y-0 before:z-0 before:hidden before:rounded-md before:bg-accent before:opacity-80 before:content-[""] first:!border-border hover:cursor-pointer hover:border-transparent hover:before:block md:items-center dark:before:bg-accent/50 [&+div]:hover:border-transparent' onClick={() => {
-                                        navigate(`/posts/analytics/beta/${post.post_id}`, {crossApp: true});
+                                        navigate(`/posts/analytics/${post.post_id}`, {crossApp: true});
                                     }}>
                                         <div className='z-10 flex min-w-[160px] grow items-start gap-4 md:items-center lg:min-w-[320px]'>
                                             {post.feature_image ?
diff --git a/apps/stats/test/unit/utils/url-helpers.test.ts b/apps/stats/test/unit/utils/url-helpers.test.ts
@@ -233,7 +233,7 @@ describe('url-helpers', () => {
             const handler = getClickHandler('/my-post/', 'post-123', 'https://example.com', mockNavigate, 'post');
             handler();
 
-            expect(mockNavigate).toHaveBeenCalledWith('/posts/analytics/beta/post-123', {crossApp: true});
+            expect(mockNavigate).toHaveBeenCalledWith('/posts/analytics/post-123', {crossApp: true});
             expect(mockWindowOpen).not.toHaveBeenCalled();
         });
 
diff --git a/ghost/admin/app/components/dashboard/charts/recents.hbs b/ghost/admin/app/components/dashboard/charts/recents.hbs
@@ -25,7 +25,7 @@
                 </div>
                 <div class="gh-dashboard-list-body">
                     {{#each this.posts as |post|}}
-                        <LinkTo class="gh-dashboard-list-item permalink" @route="posts.analytics" @model={{post.id}}>
+                        <LinkTo class="gh-dashboard-list-item permalink" @route="posts-x" @model={{post.id}}>
                             <div class="gh-dashboard-list-item-sub">
                                 <span class="gh-dashboard-list-text">{{post.title}}</span>
                             </div>
diff --git a/ghost/admin/app/components/posts/debug.hbs b/ghost/admin/app/components/posts/debug.hbs
@@ -6,7 +6,7 @@
                     Posts
                 </LinkTo>
                 {{svg-jar "arrow-right-small"}}
-                <LinkTo @route="posts.analytics" @model={{this.post.id}}>
+                <LinkTo @route="posts-x" @model={{this.post.id}}>
                     Analytics
                 </LinkTo>
                 {{svg-jar "arrow-right-small"}}
diff --git a/ghost/admin/app/helpers/parse-member-event.js b/ghost/admin/app/helpers/parse-member-event.js
@@ -366,7 +366,7 @@ export default class ParseMemberEventHelper extends Helper {
         if (['click_event', 'feedback_event'].includes(event.type)) {
             if (event.data.post) {
                 return {
-                    name: 'posts.analytics',
+                    name: 'posts-x',
                     model: event.data.post.id
                 };
             }
@@ -375,7 +375,7 @@ export default class ParseMemberEventHelper extends Helper {
         if (['signup_event', 'subscription_event'].includes(event.type)) {
             if (event.data.attribution_type === 'post') {
                 return {
-                    name: 'posts.analytics',
+                    name: 'posts-x',
                     model: event.data.attribution_id
                 };
             }
diff --git a/ghost/admin/app/router.js b/ghost/admin/app/router.js
@@ -34,12 +34,11 @@ Router.map(function () {
     });
 
     this.route('posts');
-    this.route('posts.analytics', {path: '/posts/analytics/:post_id'});
-    this.route('posts-x', {path: '/posts/analytics/beta/:post_id'}, function () {
-        this.route('posts-x', {path: '/*sub'});
-    });
     this.route('posts.mentions', {path: '/posts/analytics/:post_id/mentions'});
     this.route('posts.debug', {path: '/posts/analytics/:post_id/debug'});
+    this.route('posts-x', {path: '/posts/analytics/:post_id'}, function () {
+        this.route('posts-x', {path: '/*sub'});
+    });
 
     this.route('restore-posts', {path: '/restore'});
 
diff --git a/ghost/admin/app/routes/lexical-editor.js b/ghost/admin/app/routes/lexical-editor.js
@@ -17,7 +17,7 @@ export default AuthenticatedRoute.extend({
     },
 
     setupController(controller, model, transition) {
-        if ((transition.from?.name === 'posts.analytics' || transition.from?.name?.startsWith('posts-x')) && transition.to?.name !== 'lexical-editor.new') {
+        if (transition.from?.name?.startsWith('posts-x') && transition.to?.name !== 'lexical-editor.new') {
             // Extract the analytics path from window.location.href to preserve the exact tab
             let currentUrl = window.location.href;
             // Convert editor URL back to analytics URL and extract just the hash portion
diff --git a/ghost/admin/app/routes/member.js b/ghost/admin/app/routes/member.js
@@ -42,7 +42,7 @@ export default class MembersRoute extends MembersManagementRoute {
         }
 
         controller.directlyFromAnalytics = false;
-        if (transition.from?.name === 'posts.analytics') {
+        if (transition.from?.name === 'posts-x') {
             controller.directlyFromAnalytics = true;
         }
     }
diff --git a/ghost/admin/app/routes/mentions.js b/ghost/admin/app/routes/mentions.js
diff --git a/ghost/admin/app/templates/member.hbs b/ghost/admin/app/templates/member.hbs
diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs
diff --git a/ghost/admin/app/templates/mentions.hbs b/ghost/admin/app/templates/mentions.hbs
diff --git a/ghost/admin/tests/acceptance/analytics-navigation-test.js b/ghost/admin/tests/acceptance/analytics-navigation-test.js
diff --git a/ghost/admin/tests/acceptance/editor-test.js b/ghost/admin/tests/acceptance/editor-test.js

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export const routes: RouteObject[] = [`
`23`	`23`	`{`
`24`	`24`
`25`	`25`	`// Post Analytics`
`26`		`- path: 'analytics/beta/:postId',`
	`26`	`+ path: 'analytics/:postId',`
`27`	`27`	`element: (`
`28`	`28`	`<PostAnalyticsProvider>`
`29`	`29`	`<PostAnalytics />`
Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ const Newsletter: React.FC<postAnalyticsProps> = () => {`
`83`	`83`	`useEffect(() => {`
`84`	`84`	`// Redirect to overview if the post wasn't sent as a newsletter`
`85`	`85`	`if (!isPostLoading && !showNewsletterSection) {`
`86`		- navigate(`/analytics/beta/${postId}`);
	`86`	+ navigate(`/analytics/${postId}`);
`87`	`87`	`}`
`88`	`88`	`}, [navigate, postId, isPostLoading, showNewsletterSection]);`
`89`	`89`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const Web: React.FC<postAnalyticsProps> = () => {`
`34`	`34`	`// Redirect to Overview if this is an email-only post`
`35`	`35`	`useEffect(() => {`
`36`	`36`	`if (!isPostLoading && post?.email_only) {`
`37`		- navigate(`/analytics/beta/${postId}`);
	`37`	+ navigate(`/analytics/${postId}`);
`38`	`38`	`}`
`39`	`39`	`}, [isPostLoading, post?.email_only, navigate, postId]);`
`40`	`40`
Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ export function getClickHandler(`
`100`	`100`	`return () => {`
`101`	`101`	`// For posts with analytics, go to analytics page`
`102`	`102`	`if (postId && attributionUrl && attributionType === 'post') {`
`103`		- navigate(`/posts/analytics/beta/${postId}`, {crossApp: true});
	`103`	+ navigate(`/posts/analytics/${postId}`, {crossApp: true});
`104`	`104`	`return;`
`105`	`105`	`}`
`106`	`106`