📈 Feat: add analytics to track post and comment

src/app/components/comments/comments.component.ts

@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatCardModule } from '@angular/material/card';
 import { PrependAtPipe } from '../../pipe/prepend-at.pipe';
+import { AnalyticsService } from '../../services/analytics/fireblog-analytics.service';
 @Component({
   selector: 'app-comments',
   standalone: true,
@@ -31,7 +32,10 @@ export class CommentsComponent {
    randomAvatarUrl: string = '';
   currentUser: IUser | null = null;
 
-  constructor(private fireblogFacade: FireblogFacadeService) {}
+  constructor(
+    private fireblogFacade: FireblogFacadeService,
+    private analyticsService: AnalyticsService
+  ) {}
 
   ngOnInit() {
     this.generateRandomAvatarUrl();
@@ -48,7 +52,7 @@ export class CommentsComponent {
   addComment() {
     if (this.newCommentContent.trim()) {
       this.fireblogFacade.getCurrentUser$.subscribe(user => {
-        if (user && this.postId) {  // Ensure postId is defined
+        if (user && this.postId) {
           const newComment: IComment = {
             content: this.newCommentContent,
             createdAt: new Date().toISOString(),
@@ -65,6 +69,7 @@ export class CommentsComponent {
             .then(() => {
               this.comments.push(newComment);
               this.newCommentContent = '';
+              this.analyticsService.logCommentAdded(this.postId!);
             })
             .catch(error => console.error('Error adding comment:', error));
         } else {

src/app/components/fireblog-page/fireblog-page.component.html

@@ -14,7 +14,11 @@ <h2><span>Fire</span>blog Posts</h2>
         @if(blogPosts.length > 0){
           <ul>
             <ng-container *ngFor="let post of blogPosts">
-              <app-post-card [blogPost]="post" (commentToggled)="onToggleComments($event)"></app-post-card>
+              <app-post-card
+                [blogPost]="post"
+                (commentToggled)="onToggleComments($event)"
+                (click)="trackPostView(post)">
+              </app-post-card>
               <app-comments *ngIf="expandedPostId === post.id" [postId]="post.id" [comments]="post.comments"></app-comments>
             </ng-container>
           </ul>

src/app/components/fireblog-page/fireblog-page.component.ts

@@ -14,6 +14,7 @@ import { Subscription } from 'rxjs';
 import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.service';
 import { IBlog } from '../../services/blog.interface';
 import { CommentsComponent } from "../comments/comments.component";
+import { AnalyticsService } from '../../services/analytics/fireblog-analytics.service';
 
 @Component({
   selector: 'app-fireblog-page',
@@ -43,14 +44,28 @@ export class FireblogPageComponent implements OnInit, OnDestroy {
   expandedPostId: string | null = null;
   private blogPostsSubscription: Subscription | undefined;
 
-  constructor(private blogFacade: FireblogFacadeService) {}
+  constructor(
+    private blogFacade: FireblogFacadeService,
+    private analyticsService: AnalyticsService
+  ) {}
+
 
   ngOnInit(): void {
     this.getBlogPosts();
   }
 
   onToggleComments(postId: string) {
     this.expandedPostId = this.expandedPostId === postId ? null : postId;
+    const isExpanded = this.expandedPostId === postId;
+    this.analyticsService.logCommentToggle(postId, isExpanded);
+  }
+
+  trackPostView(post: IBlog) {
+    if (post.id && post.comments) {
+      this.analyticsService.logPostView(post.id, post.content);
+    } else {
+      console.warn('Attempted to track post view with undefined id or title', post);
+    }
   }
 
   ngOnDestroy(): void {
@@ -61,9 +76,7 @@ export class FireblogPageComponent implements OnInit, OnDestroy {
 
   getBlogPosts(): void {
     this.blogPostsSubscription = this.blogFacade.getBlogPosts().subscribe(
-      (posts: IBlog[]) => {
-        this.blogPosts = posts;
-      },
+      (posts: IBlog[]) => {  this.blogPosts = posts; },
       (error: any) => {
         console.error('Error fetching blog posts:', error);
       }

src/app/services/analytics/fireblog-analytics.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FireblogAnalyticsService } from './fireblog-analytics.service';
+
+describe('FireblogAnalyticsService', () => {
+  let service: FireblogAnalyticsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FireblogAnalyticsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/analytics/fireblog-analytics.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Analytics, logEvent } from '@angular/fire/analytics';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyticsService {
+  constructor(private analytics: Analytics) {}
+
+  logPostView(postId: string, postTitle: string) {
+    logEvent(this.analytics, 'post_view', {
+      post_id: postId,
+      post_title: postTitle
+    });
+  }
+
+  logCommentToggle(postId: string, isExpanded: boolean) {
+    logEvent(this.analytics, 'comment_section_toggle', {
+      post_id: postId,
+      is_expanded: isExpanded
+    });
+  }
+
+  logCommentAdded(postId: string) {
+    logEvent(this.analytics, 'comment_added', {
+      post_id: postId
+    });
+  }
+
+  logCustomEvent(eventName: string, eventParams: Record<string, any>) {
+    logEvent(this.analytics, eventName, eventParams);
+  }
+}