[ENG-9255] get proper data for Popular Pages chart rows (#732)

- Ticket: https://openscience.atlassian.net/browse/ENG-9255
- Feature flag: n/a

## Purpose

The analytics tab for registrations is meant to help users understand how viewers are using and accessing their registration. One of those metrics is popular pages. However, as you can see in the image below, there are two of the same name, which makes it confusing to understand what viewers are looking at. 

## Summary of Changes

If we are clicking over navigation in details of registration and project title saving is as expected, if go to some tab by link 
it return osf handle it to have proper title and render data in chart with row names showing what title tab was clicked

Author: mkovalua

src/app/features/analytics/analytics.component.ts

@@ -140,6 +140,7 @@ export class AnalyticsComponent implements OnInit {
   navigateToLinkedProjects() {
     this.router.navigate(['linked-projects'], { relativeTo: this.route });
   }
+
   private setData() {
     const analytics = this.analytics();
 
@@ -171,7 +172,14 @@ export class AnalyticsComponent implements OnInit {
       },
     ];
 
-    this.popularPagesLabels = analytics.popularPages.map((item) => item.title);
+    this.popularPagesLabels = analytics.popularPages.map((item) => {
+      const parts = item.path.split('/').filter(Boolean);
+      const resource = parts[1]?.replace('-', ' ') || 'overview';
+      let cleanTitle = item.title === 'OSF' ? item.title : item.title.replace(/^OSF \| /, '');
+      cleanTitle = cleanTitle.replace(/&amp;/gi, '&').replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
+      return cleanTitle.endsWith(resource) ? cleanTitle : `${cleanTitle} | ${resource}`;
+    });
+
     this.popularPagesDataset = [
       {
         label: this.translateService.instant('project.analytics.charts.popularPages'),

src/app/features/preprints/pages/preprint-details/preprint-details.component.ts

@@ -175,14 +175,6 @@ export class PreprintDetailsComponent implements OnInit, OnDestroy {
     this.helpScoutService.setResourceType('preprint');
     this.prerenderReady.setNotReady();
 
-    effect(() => {
-      const currentPreprint = this.preprint();
-
-      if (currentPreprint && currentPreprint.isPublic) {
-        this.analyticsService.sendCountedUsage(currentPreprint.id, 'preprint.detail').subscribe();
-      }
-    });
-
     effect(() => {
       const preprint = this.preprint();
       const contributors = this.contributors();

src/app/features/project/overview/project-overview.component.ts

@@ -104,8 +104,6 @@ export class ProjectOverviewComponent implements OnInit {
   submissions = select(CollectionsModerationSelectors.getCollectionSubmissions);
   collectionProvider = select(CollectionsSelectors.getCollectionProvider);
   currentReviewAction = select(CollectionsModerationSelectors.getCurrentReviewAction);
-  isCollectionProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
-  isReviewActionsLoading = select(CollectionsModerationSelectors.getCurrentReviewActionLoading);
   components = select(CurrentResourceSelectors.getResourceWithChildren);
   areComponentsLoading = select(CurrentResourceSelectors.isResourceWithChildrenLoading);
   currentProject = select(ProjectOverviewSelectors.getProject);
@@ -120,7 +118,6 @@ export class ProjectOverviewComponent implements OnInit {
   configuredCitationAddons = select(AddonsSelectors.getConfiguredCitationAddons);
   operationInvocation = select(AddonsSelectors.getOperationInvocation);
   storage = select(ProjectOverviewSelectors.getStorage);
-  isStorageLoading = select(ProjectOverviewSelectors.isStorageLoading);
 
   private readonly actions = createDispatchMap({
     getProject: GetProjectById,
@@ -259,14 +256,6 @@ export class ProjectOverviewComponent implements OnInit {
         this.actions.getHomeWiki(ResourceType.Project, project.id);
       }
     });
-
-    effect(() => {
-      const currentProject = this.currentProject();
-
-      if (currentProject && currentProject.isPublic) {
-        this.analyticsService.sendCountedUsage(currentProject.id, 'project.detail').subscribe();
-      }
-    });
   }
 
   private setupAddonsEffects(): void {

src/app/features/project/project.component.spec.ts

@@ -6,6 +6,7 @@ import { PrerenderReadyService } from '@core/services/prerender-ready.service';
 import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
 import { MetaTagsService } from '@osf/shared/services/meta-tags.service';
 import { ContributorsSelectors } from '@osf/shared/stores/contributors';
+import { CurrentResourceSelectors } from '@osf/shared/stores/current-resource';
 
 import { ProjectOverviewSelectors } from './overview/store';
 import { ProjectComponent } from './project.component';
@@ -52,6 +53,7 @@ describe('Component: Project', () => {
             { selector: ProjectOverviewSelectors.isLicenseLoading, value: false },
             { selector: ContributorsSelectors.getBibliographicContributors, value: [] },
             { selector: ContributorsSelectors.isBibliographicContributorsLoading, value: false },
+            { selector: CurrentResourceSelectors.getCurrentResource, value: null },
           ],
         }),
       ],

src/app/features/project/project.component.ts

@@ -1,6 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { map } from 'rxjs';
+import { filter, map } from 'rxjs';
 
 import { DatePipe } from '@angular/common';
 import {
@@ -15,14 +15,16 @@ import {
   signal,
 } from '@angular/core';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
 import { HelpScoutService } from '@core/services/help-scout.service';
 import { PrerenderReadyService } from '@core/services/prerender-ready.service';
 import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { DataciteService } from '@osf/shared/services/datacite/datacite.service';
 import { MetaTagsService } from '@osf/shared/services/meta-tags.service';
 import { ContributorsSelectors, GetBibliographicContributors } from '@osf/shared/stores/contributors';
+import { AnalyticsService } from '@shared/services/analytics.service';
+import { CurrentResourceSelectors } from '@shared/stores/current-resource';
 
 import {
   GetProjectById,
@@ -50,6 +52,9 @@ export class ProjectComponent implements OnDestroy {
   private readonly route = inject(ActivatedRoute);
   private readonly datePipe = inject(DatePipe);
   private readonly prerenderReady = inject(PrerenderReadyService);
+  private readonly router = inject(Router);
+  private readonly analyticsService = inject(AnalyticsService);
+  currentResource = select(CurrentResourceSelectors.getCurrentResource);
 
   readonly identifiersForDatacite$ = toObservable(select(ProjectOverviewSelectors.getIdentifiers)).pipe(
     map((identifiers) => (identifiers?.length ? { identifiers } : null))
@@ -123,6 +128,18 @@ export class ProjectComponent implements OnDestroy {
       .logIdentifiableView(this.identifiersForDatacite$)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
+
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe((event: NavigationEnd) => {
+        this.analyticsService.sendCountedUsageForRegistrationAndProjects(
+          event.urlAfterRedirects,
+          this.currentResource()
+        );
+      });
   }
 
   ngOnDestroy(): void {

src/app/features/registry/registry.component.ts

@@ -1,6 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { map } from 'rxjs';
+import { filter, map } from 'rxjs';
 
 import { DatePipe } from '@angular/common';
 import {
@@ -15,7 +15,7 @@ import {
   signal,
 } from '@angular/core';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { HelpScoutService } from '@core/services/help-scout.service';
@@ -27,6 +27,7 @@ import { AnalyticsService } from '@osf/shared/services/analytics.service';
 import { MetaTagsService } from '@osf/shared/services/meta-tags.service';
 import { ContributorsSelectors, GetBibliographicContributors } from '@osf/shared/stores/contributors';
 import { DataciteService } from '@shared/services/datacite/datacite.service';
+import { CurrentResourceSelectors } from '@shared/stores/current-resource';
 
 import { GetRegistryIdentifiers, GetRegistryWithRelatedData, RegistrySelectors } from './store/registry';
 
@@ -59,7 +60,7 @@ export class RegistryComponent implements OnDestroy {
   });
 
   private registryId = toSignal(this.route.params.pipe(map((params) => params['id'])));
-
+  readonly currentResource = select(CurrentResourceSelectors.getCurrentResource);
   readonly registry = select(RegistrySelectors.getRegistry);
   readonly isRegistryLoading = select(RegistrySelectors.isRegistryLoading);
   readonly identifiersForDatacite$ = toObservable(select(RegistrySelectors.getIdentifiers)).pipe(
@@ -79,6 +80,7 @@ export class RegistryComponent implements OnDestroy {
   );
 
   private readonly lastMetaTagsRegistryId = signal<string | null>(null);
+  readonly router = inject(Router);
 
   constructor() {
     this.prerenderReady.setNotReady();
@@ -106,17 +108,22 @@ export class RegistryComponent implements OnDestroy {
       }
     });
 
-    effect(() => {
-      const currentRegistry = this.registry();
-      if (currentRegistry && currentRegistry.isPublic) {
-        this.analyticsService.sendCountedUsage(currentRegistry.id, 'registry.detail').subscribe();
-      }
-    });
-
     this.dataciteService
       .logIdentifiableView(this.identifiersForDatacite$)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe();
+
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe((event: NavigationEnd) => {
+        this.analyticsService.sendCountedUsageForRegistrationAndProjects(
+          event.urlAfterRedirects,
+          this.currentResource()
+        );
+      });
   }
 
   ngOnDestroy(): void {

src/app/shared/models/current-resource.model.ts

@@ -8,4 +8,5 @@ export interface CurrentResource {
   rootResourceId?: string;
   wikiEnabled?: boolean;
   permissions: UserPermissions[];
+  title?: string;
 }

src/app/shared/models/guid-response-json-api.model.ts

@@ -11,6 +11,7 @@ interface GuidDataJsonApi {
     guid: string;
     wiki_enabled: boolean;
     current_user_permissions: UserPermissions[];
+    title?: string;
   };
   relationships: {
     target?: {

src/app/shared/services/analytics.service.ts

@@ -3,8 +3,8 @@ import { Observable } from 'rxjs';
 import { inject, Injectable } from '@angular/core';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-
-import { JsonApiService } from './json-api.service';
+import { CurrentResource } from '@osf/shared/models/current-resource.model';
+import { JsonApiService } from '@osf/shared/services/json-api.service';
 
 @Injectable({ providedIn: 'root' })
 export class AnalyticsService {
@@ -15,23 +15,41 @@ export class AnalyticsService {
     return `${this.environment.apiDomainUrl}/_/metrics/events/counted_usage/`;
   }
 
-  sendCountedUsage(guid: string, routeName: string): Observable<void> {
-    const payload = {
+  getPageviewPayload(resource: CurrentResource, routeName: string) {
+    const all_attrs = { item_guid: resource?.id } as const;
+    const attributes = Object.fromEntries(
+      Object.entries(all_attrs).filter(([_, value]: [unknown, unknown]) => typeof value !== 'undefined')
+    );
+    const pageTitle = document.title === 'OSF' ? `OSF | ${resource.title}` : document.title;
+    return {
       data: {
         type: 'counted-usage',
         attributes: {
-          item_guid: guid,
+          ...attributes,
           action_labels: ['web', 'view'],
           pageview_info: {
             page_url: document.URL,
-            page_title: document.title,
+            page_title: pageTitle,
             referer_url: document.referrer,
             route_name: `angular-osf-web.${routeName}`,
           },
         },
       },
     };
+  }
 
+  sendCountedUsage(resource: CurrentResource, route: string): Observable<void> {
+    const payload = this.getPageviewPayload(resource, route);
     return this.jsonApiService.post<void>(this.apiDomainUrl, payload);
   }
+
+  sendCountedUsageForRegistrationAndProjects(urlPath: string, resource: CurrentResource | null) {
+    if (resource) {
+      let route = urlPath.split('/').filter(Boolean).join('.');
+      if (resource?.type) {
+        route = `${resource?.type}.${route}`;
+      }
+      this.sendCountedUsage(resource, route).subscribe();
+    }
+  }
 }

src/app/shared/services/resource.service.ts

@@ -55,6 +55,7 @@ export class ResourceGuidService {
             wikiEnabled: res.data.attributes.wiki_enabled,
             permissions: res.data.attributes.current_user_permissions,
             rootResourceId: res.data.relationships.root?.data?.id,
+            title: res.data.attributes?.title,
           }) as CurrentResource
       ),
       finalize(() => this.loaderService.hide())