-
+
{{item.title}}
({{item.domain}})
diff --git a/src/app/feeds/item/item.component.ts b/src/app/feeds/item/item.component.ts
index 8a1bd978..9b20acbf 100644
--- a/src/app/feeds/item/item.component.ts
+++ b/src/app/feeds/item/item.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { Story } from '../../shared/models/story';
import { SettingsService } from '../../shared/services/settings.service';
+import { TrackerService } from '../../shared/services/tracker.service';
import { Settings } from '../../shared/models/settings';
@Component({
@@ -13,7 +14,10 @@ export class ItemComponent implements OnInit {
@Input() item: Story;
settings: Settings;
- constructor(private _settingsService: SettingsService) {
+ constructor(
+ private _settingsService: SettingsService,
+ private _trackerService: TrackerService
+ ) {
this.settings = this._settingsService.settings;
}
@@ -23,4 +27,8 @@ export class ItemComponent implements OnInit {
return this.item.url.indexOf('http') === 0;
}
+ trackStoryClick() {
+ this._trackerService.trackStoryClick(this.item.id, this.item.title);
+ }
+
}
diff --git a/src/app/item-details/item-details.component.ts b/src/app/item-details/item-details.component.ts
index 88e6199f..cd906b03 100644
--- a/src/app/item-details/item-details.component.ts
+++ b/src/app/item-details/item-details.component.ts
@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs/Subscription';
import { HackerNewsAPIService } from '../shared/services/hackernews-api.service';
import { SettingsService } from '../shared/services/settings.service';
+import { TrackerService } from '../shared/services/tracker.service';
import { Story } from '../shared/models/story';
import { Settings } from '../shared/models/settings';
@@ -23,6 +24,7 @@ export class ItemDetailsComponent implements OnInit {
constructor(
private _hackerNewsAPIService: HackerNewsAPIService,
private _settingsService: SettingsService,
+ private _trackerService: TrackerService,
private route: ActivatedRoute,
private _location: Location
) {
@@ -30,6 +32,7 @@ export class ItemDetailsComponent implements OnInit {
}
ngOnInit() {
+ this._trackerService.trackPageView('item-details');
this.sub = this.route.params.subscribe(params => {
let itemID = +params['id'];
this._hackerNewsAPIService.fetchItemContent(itemID).subscribe(item => {
diff --git a/src/app/shared/services/tracker.service.ts b/src/app/shared/services/tracker.service.ts
new file mode 100644
index 00000000..4c9fd84e
--- /dev/null
+++ b/src/app/shared/services/tracker.service.ts
@@ -0,0 +1,188 @@
+import { Injectable } from '@angular/core';
+
+export interface PageView {
+ page: string;
+ timestamp: number;
+ duration?: number;
+}
+
+export interface StoryClick {
+ storyId: number;
+ title: string;
+ timestamp: number;
+}
+
+export interface UserView {
+ userId: string;
+ timestamp: number;
+}
+
+export interface TrackerData {
+ pageViews: PageView[];
+ storyClicks: StoryClick[];
+ userViews: UserView[];
+ sessionCount: number;
+ firstVisit: number;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class TrackerService {
+ private readonly STORAGE_KEY = 'hn_tracker_data';
+ private currentPageStart: number | null = null;
+ private currentPage: string | null = null;
+
+ constructor() {
+ this.incrementSession();
+ }
+
+ private getData(): TrackerData {
+ const stored = localStorage.getItem(this.STORAGE_KEY);
+ if (stored) {
+ return JSON.parse(stored);
+ }
+ return {
+ pageViews: [],
+ storyClicks: [],
+ userViews: [],
+ sessionCount: 0,
+ firstVisit: Date.now()
+ };
+ }
+
+ private saveData(data: TrackerData): void {
+ localStorage.setItem(this.STORAGE_KEY, JSON.stringify(data));
+ }
+
+ private incrementSession(): void {
+ const data = this.getData();
+ data.sessionCount++;
+ this.saveData(data);
+ }
+
+ trackPageView(page: string): void {
+ this.endCurrentPageView();
+ this.currentPage = page;
+ this.currentPageStart = Date.now();
+
+ const data = this.getData();
+ data.pageViews.push({
+ page,
+ timestamp: this.currentPageStart
+ });
+ this.saveData(data);
+ }
+
+ endCurrentPageView(): void {
+ if (this.currentPage && this.currentPageStart) {
+ const duration = Date.now() - this.currentPageStart;
+ const data = this.getData();
+ const lastView = data.pageViews.find(
+ pv => pv.page === this.currentPage && pv.timestamp === this.currentPageStart
+ );
+ if (lastView) {
+ lastView.duration = duration;
+ this.saveData(data);
+ }
+ }
+ this.currentPage = null;
+ this.currentPageStart = null;
+ }
+
+ trackStoryClick(storyId: number, title: string): void {
+ const data = this.getData();
+ data.storyClicks.push({
+ storyId,
+ title,
+ timestamp: Date.now()
+ });
+ this.saveData(data);
+ }
+
+ trackUserView(userId: string): void {
+ const data = this.getData();
+ data.userViews.push({
+ userId,
+ timestamp: Date.now()
+ });
+ this.saveData(data);
+ }
+
+ getMetrics() {
+ const data = this.getData();
+
+ const pageViewsByType = this.aggregateByKey(data.pageViews, 'page');
+ const storyClickCounts = this.aggregateStoryClicks(data.storyClicks);
+ const userViewCounts = this.aggregateByKey(data.userViews, 'userId');
+ const activityByHour = this.aggregateByHour(data.pageViews);
+ const avgTimeByPage = this.calculateAvgTime(data.pageViews);
+
+ return {
+ totalPageViews: data.pageViews.length,
+ totalStoryClicks: data.storyClicks.length,
+ totalUserViews: data.userViews.length,
+ sessionCount: data.sessionCount,
+ firstVisit: data.firstVisit,
+ pageViewsByType: this.sortByCount(pageViewsByType),
+ topStories: storyClickCounts.slice(0, 10),
+ topUsers: this.sortByCount(userViewCounts).slice(0, 10),
+ activityByHour,
+ avgTimeByPage
+ };
+ }
+
+ private aggregateByKey(items: any[], key: string): { name: string; count: number }[] {
+ const counts: Record = {};
+ items.forEach(item => {
+ const val = item[key];
+ counts[val] = (counts[val] || 0) + 1;
+ });
+ return Object.entries(counts).map(([name, count]) => ({ name, count }));
+ }
+
+ private aggregateStoryClicks(clicks: StoryClick[]): { storyId: number; title: string; count: number }[] {
+ const counts: Record = {};
+ clicks.forEach(click => {
+ if (!counts[click.storyId]) {
+ counts[click.storyId] = { title: click.title, count: 0 };
+ }
+ counts[click.storyId].count++;
+ });
+ return Object.entries(counts)
+ .map(([id, data]) => ({ storyId: +id, title: data.title, count: data.count }))
+ .sort((a, b) => b.count - a.count);
+ }
+
+ private aggregateByHour(pageViews: PageView[]): { hour: number; count: number }[] {
+ const counts: Record = {};
+ for (let i = 0; i < 24; i++) counts[i] = 0;
+ pageViews.forEach(pv => {
+ const hour = new Date(pv.timestamp).getHours();
+ counts[hour]++;
+ });
+ return Object.entries(counts).map(([hour, count]) => ({ hour: +hour, count }));
+ }
+
+ private calculateAvgTime(pageViews: PageView[]): { page: string; avgTime: number }[] {
+ const times: Record = {};
+ pageViews.forEach(pv => {
+ if (pv.duration) {
+ if (!times[pv.page]) times[pv.page] = [];
+ times[pv.page].push(pv.duration);
+ }
+ });
+ return Object.entries(times).map(([page, durations]) => ({
+ page,
+ avgTime: Math.round(durations.reduce((a, b) => a + b, 0) / durations.length / 1000)
+ }));
+ }
+
+ private sortByCount(items: { name: string; count: number }[]): { name: string; count: number }[] {
+ return items.sort((a, b) => b.count - a.count);
+ }
+
+ clearData(): void {
+ localStorage.removeItem(this.STORAGE_KEY);
+ }
+}
diff --git a/src/app/tracker/tracker.component.html b/src/app/tracker/tracker.component.html
new file mode 100644
index 00000000..108e602d
--- /dev/null
+++ b/src/app/tracker/tracker.component.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
Overview
+
+ | Total Page Views | {{metrics.totalPageViews}} |
+ | Total Story Clicks | {{metrics.totalStoryClicks}} |
+ | Total User Profile Views | {{metrics.totalUserViews}} |
+ | Sessions | {{metrics.sessionCount}} |
+ | Tracking Since | {{formatDate(metrics.firstVisit)}} |
+
+
+
+
+
Page Views by Type
+
+
+ | {{pv.name}} |
+ {{pv.count}} |
+
+
+
No data yet
+
+
+
+
Average Time per Page (seconds)
+
+
+ | {{avg.page}} |
+ {{avg.avgTime}}s |
+
+
+
No data yet
+
+
+
+
Top 10 Clicked Stories
+
+
+ | {{story.title}} |
+ {{story.count}} |
+
+
+
No data yet
+
+
+
+
Top 10 Viewed Users
+
+
+ | {{user.name}} |
+ {{user.count}} |
+
+
+
No data yet
+
+
+
+
Activity by Hour
+
+
+ {{formatHour(h.hour)}}
+ {{h.count}}
+
+
+
+
+