feat: track custom analytics events #243

OchiengPaul442 · 2024-02-25T21:30:56Z

Description

This PR:

Implements Google Analytics tracking for video playback functionality in the farm-activity view. This will provide valuable insights into user engagement with the videos.
Adds Google Analytics tracking for the opening of resources in the resources section. This will help us understand how many users view the resource pdfs on the platform.

Discussion

This PR resolves issue #220 by implementing the necessary changes.

Preview

To preview these changes, please interact with any video in the farm-activity view or open any resource in the resources section and check the corresponding Google Analytics events.

Screenshots / Videos

Resources Event

Video Playback Event

…y users on the platform

chrismclarke

Thanks for the PR @OchiengPaul442
I can confirm that I'm also able to see the custom analytics events you've started tracking from within the google analytics dashboard so nice that workflow is going as planned.

See a few comments inline, mostly around just trying to increase the amount of info getting tracked in analytics (namely resource and video ids, so that we can have a better insight into the resources users are accessing most frequently)

chrismclarke · 2024-02-27T05:59:07Z

libs/shared/src/features/video-player/video-player.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
 import { Capacitor } from '@capacitor/core';
 import { ScreenOrientation } from '@capacitor/screen-orientation';
+import { AnalyticsService } from '@picsa/shared/services/core/analytics.service';


nit(blocking) - I see the tests are failing and they refer to this import in the errors (not sure if you have seen).
This is due to a convention with nx monorepos, that you shouldn't use package name prefixes when referring to files that area actually in the same package. As the analytics service and video-player component both sit within the shared package, you should change the import to be a relative one instead

import { AnalyticsService } from '../../services/core/analytics.service';

Hey @chrismclarke, I noticed the build errors earlier and was working on resolving them. Your explanation has provided clarity on the issue, and I’m now in a better position to address it. Thanks

chrismclarke · 2024-02-27T06:03:17Z

libs/shared/src/features/video-player/video-player.component.ts

@@ -74,6 +75,8 @@ export class VideoPlayerComponent implements OnDestroy {
    if (Capacitor.isNativePlatform()) {
      this.initialised = false;
    }
+    // Track video play event
+    this.analyticsService.trackVideoPlay(this.playerId);


nit(non-blocking): currently the playerId is a randomly generated id, so it doesn't really hold any analytics value. It might be good to implement player IDs as suggested in #241 (but not the full storage solution) so that we can track the id of the resource when passed to the video player and for logging in analytics

This could either be included in this pr (would only be a few lines of code), or as part of a follow-up

chrismclarke · 2024-02-27T06:06:44Z

apps/picsa-tools/resources-tool/src/app/services/resources-tool.service.ts

@@ -71,6 +73,8 @@ export class ResourcesToolService extends PicsaAsyncService {
  }

  public async openFileResource(uri: string, mimetype: string) {
+    // track the resource open event
+    this.analyticsService.trackResourceOpen();


nit(blocking): Nice we can track the resource open event but would be even better if we could track the id of the resource being opened. So in order to achieve this we either need to pass an extra argument to the openFileResource method (e.g. id), or call the tracking function within the resource-item-file component itself which does have the id.

I think technically the better solution would probably be passing the id to the service, as that keeps the component more focused on the UI and service on side-effects

chrismclarke · 2024-02-27T06:07:48Z

libs/shared/src/services/core/analytics.service.ts

+  public trackVideoPlay(videoId: string) {
+    this.firebaseAnalytics.logEvent({
+      name: 'video_play',
+      params: { video_id: videoId, app_version: APP_VERSION },


nit(non-blocking): app_version will automatically be tracked in various other places so no need to explictily send with each analytics request, but very nice to have the video_id getting passed.

chrismclarke · 2024-02-27T06:08:31Z

libs/shared/src/services/core/analytics.service.ts

+  public trackResourceOpen() {
+    this.firebaseAnalytics.logEvent({
+      name: 'open_resource_file',
+      params: { app_version: APP_VERSION },


nit(non-blocking): same as above, although would also be nice to have the resource_id tracked as part of the the payload sent to analytics so that we can track research questions such as which resources are accessed most frequently

Will work on that.

chrismclarke · 2024-02-28T06:13:02Z

Hey @OchiengPaul442 - I can see you've removed the work in progress label which I'm guessing means the PR is ready for second review, although if that is the case would it be possible to be more explicit and use the re-request review toggle available in the reviewers pane? Will try take a look tomorrow if that is the case

chrismclarke

Thanks @OchiengPaul442 , thanks for adding the updates.

I found one issue, there were additional components using the video player that were not passing the resource id, which stopped the video player from working. I fixed the component and added a fallback (console warning + random id) in case other developers use the player without passing an id parameter

I also made a few minor housekeeping improvements, I've prefixed all custom events with picsa_ to make them easier to locate in the analytics dashboard and moved the analytics enable/disable to the service itself (instead of app component) just to make it more clear for developers

I've included the fix and updates in b55a77f

When testing locally I didn't see any analytics events getting tracked, but then I realised that was because I use an adblocker (ublock origin) which automatically blocked GA when running on localhost (so had to disable). I don't think there's anything really to do about this from the code, more just to be aware in case other devs have similar issue.

Oh, and a very minor thing to note, you might see in the udpates I've changed your comment from using single // to block /** */.
The only reason for this is when using block /** */ comments vscode intellisense will detect and provide a popup. This works for all variables, functions etc. So I typically use single comments inline in functions when I just want to explain what the code is doing or minor notes, and block comments for names of variables and function descriptions to provide more general info for developers.

See the difference in screenshot below

But otherwise very nice addition to have, thanks for adding

project reinstall

9e91977

OchiengPaul442 added the Tool: Resources Updates related to Resources tool label Feb 25, 2024

OchiengPaul442 self-assigned this Feb 25, 2024

github-actions bot removed the Tool: Resources Updates related to Resources tool label Feb 25, 2024

Used google analytics to track the video playback and resource view b…

ee0b944

…y users on the platform

github-actions bot added the Tool: Resources Updates related to Resources tool label Feb 25, 2024

removed analytics from video-player

c40ca9c

OchiengPaul442 changed the title ~~project reinstall~~ track custom analytics events Feb 25, 2024

OchiengPaul442 added 3 commits February 26, 2024 01:23

tracking video playback using google analytics

aca790b

eslint issue

f9e8301

eslint issue unresolved

ab06048

OchiengPaul442 added the ready for review label Feb 25, 2024

OchiengPaul442 requested a review from chrismclarke February 25, 2024 22:34

chrismclarke requested changes Feb 27, 2024

View reviewed changes

url change on video player component

1bc6b5c

OchiengPaul442 added work in progress and removed ready for review labels Feb 27, 2024

worked on setting ids for google analytics for the different events

8b82c23

OchiengPaul442 added ready for review and removed Tool: Resources Updates related to Resources tool labels Feb 27, 2024

github-actions bot added Tool: Resources Updates related to Resources tool Tool: Farmer Activity Updates related to Farmer Activity tool labels Feb 27, 2024

OchiengPaul442 added 2 commits February 27, 2024 23:49

Merge branch 'main' into ft-custom-analytics

a80d87c

removed un used code

eb39201

OchiengPaul442 removed the work in progress label Feb 27, 2024

OchiengPaul442 requested a review from chrismclarke February 28, 2024 09:19

OchiengPaul442 and others added 2 commits February 29, 2024 18:24

Merge branch 'main' into ft-custom-analytics

6cf110b

chore: review tidying

b55a77f

chrismclarke approved these changes Feb 29, 2024

View reviewed changes

chrismclarke changed the title ~~track custom analytics events~~ feat: track custom analytics events Feb 29, 2024

github-actions bot added the feature label Feb 29, 2024

chrismclarke merged commit d41ceaa into main Feb 29, 2024
4 checks passed

chrismclarke deleted the ft-custom-analytics branch February 29, 2024 19:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: track custom analytics events #243

feat: track custom analytics events #243

OchiengPaul442 commented Feb 25, 2024 •

edited

Loading

chrismclarke left a comment

chrismclarke Feb 27, 2024

OchiengPaul442 Feb 27, 2024

chrismclarke Feb 27, 2024

chrismclarke Feb 27, 2024

chrismclarke Feb 27, 2024

chrismclarke Feb 27, 2024

OchiengPaul442 Feb 27, 2024

chrismclarke commented Feb 28, 2024

chrismclarke left a comment

feat: track custom analytics events #243

feat: track custom analytics events #243

Conversation

OchiengPaul442 commented Feb 25, 2024 • edited Loading

Description

Discussion

Preview

Screenshots / Videos

Resources Event

Video Playback Event

chrismclarke left a comment

Choose a reason for hiding this comment

chrismclarke Feb 27, 2024

Choose a reason for hiding this comment

OchiengPaul442 Feb 27, 2024

Choose a reason for hiding this comment

chrismclarke Feb 27, 2024

Choose a reason for hiding this comment

chrismclarke Feb 27, 2024

Choose a reason for hiding this comment

chrismclarke Feb 27, 2024

Choose a reason for hiding this comment

chrismclarke Feb 27, 2024

Choose a reason for hiding this comment

OchiengPaul442 Feb 27, 2024

Choose a reason for hiding this comment

chrismclarke commented Feb 28, 2024

chrismclarke left a comment

Choose a reason for hiding this comment

OchiengPaul442 commented Feb 25, 2024 •

edited

Loading