Merge pull request #3215 from numbersprotocol/feature-track-new-app-users-shutter-click

Feature track new app users shutter click

Author: sultanmyrza

src/app/features/home/custom-camera/custom-camera.page.ts

@@ -30,6 +30,7 @@ import {
   throttleTime,
 } from 'rxjs/operators';
 import { AndroidBackButtonService } from '../../../shared/android-back-button/android-back-button.service';
+import { AppsFlyerService } from '../../../shared/apps-flyer/apps-flyer.service';
 import {
   CaptureTabSegments,
   CaptureTabService,
@@ -117,7 +118,8 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     private readonly ref: ChangeDetectorRef,
     private readonly androidBackButtonService: AndroidBackButtonService,
     private readonly navController: NavController,
-    private readonly platform: Platform
+    private readonly platform: Platform,
+    private readonly appsflyerService: AppsFlyerService
   ) {}
 
   ngOnInit() {
@@ -315,13 +317,15 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     if (this.mode$.value === 'photo') {
       this.flashCameraScreen();
       this.customCameraService.takePhoto();
+      this.appsflyerService.logCameraShutterEvent();
       this.userGuideService.setHasCapturedPhotoWithCustomCamera(true);
     } else {
       if (this.isRecording$.value === true) {
         this.isRecording$.next(false);
       } else {
         this.isRecording$.next(true);
         this.customCameraService.startRecord();
+        this.appsflyerService.logCameraShutterEvent();
         const intervalRate = 50;
         combineLatest([this.isRecording$, interval(intervalRate)])
           .pipe(

src/app/shared/apps-flyer/apps-flyer-enums.ts

@@ -0,0 +1,13 @@
+/**
+ * Enum representing custom event names for AppsFlyer in-app events.
+ *
+ * While it's recommended to use predefined event names, custom event names are easier for QA
+ * and marketing teams to understand and filter out in the AppsFlyer dashboard. Refer to the Asana
+ * comment https://app.asana.com/0/0/1206618451736620/1206636906894474/f for more details.
+ *
+ * Every custom event name should be prefixed with 'ccam_' which stands for Capture Cam. This prefix
+ * helps to distinguish between predefined AppsFlyer event names such as 'af_level_achieved', etc.
+ */
+export enum CCamCustomEventType {
+  CCAM_TRY_CLICK_CAMERA_SHUTTER = 'ccam_try_click_camera_shutter',
+}

src/app/shared/apps-flyer/apps-flyer.service.spec.ts

@@ -2,6 +2,8 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { Platform } from '@ionic/angular';
 import { SharedTestingModule } from '../shared-testing.module';
 
+import { AFEvent } from 'appsflyer-capacitor-plugin';
+import { CCamCustomEventType } from './apps-flyer-enums';
 import { AppsFlyerService } from './apps-flyer.service';
 
 describe('AppsFlyerService', () => {
@@ -32,4 +34,21 @@ describe('AppsFlyerService', () => {
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  it('should log camera shutter event through Appsflyer.logEvent method', async () => {
+    const expectedEvent: AFEvent = {
+      eventName: CCamCustomEventType.CCAM_TRY_CLICK_CAMERA_SHUTTER,
+    };
+    // NOTE: We're accessing a private method here for testing purposes only.
+    // TypeScript doesn't enforce private/protected visibility at runtime, only at compile time.
+    // This is generally not recommended as it can lead to fragile tests and breaks encapsulation.
+    // However, in this case, we need to ensure that the private method 'logEvent' is called with
+    // the correct parameters.
+    const logEventSpy = spyOn(service as any, 'logEvent');
+
+    await service.logCameraShutterEvent();
+
+    expect(logEventSpy).toHaveBeenCalledWith(expectedEvent);
+    expect(logEventSpy).toHaveBeenCalledTimes(1);
+  });
 });

src/app/shared/apps-flyer/apps-flyer.service.ts

@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core';
 import { AdvertisingId } from '@capacitor-community/advertising-id';
 import { Capacitor } from '@capacitor/core';
 import { Platform } from '@ionic/angular';
-import { AFInit, AppsFlyer } from 'appsflyer-capacitor-plugin';
+import { AFEvent, AFInit, AppsFlyer } from 'appsflyer-capacitor-plugin';
 import { APPS_FLYER_DEV_KEY } from '../dia-backend/secret';
+import { CCamCustomEventType } from './apps-flyer-enums';
 
 @Injectable({
   providedIn: 'root',
@@ -55,4 +56,28 @@ export class AppsFlyerService {
     const isTruthy = Boolean(APPS_FLYER_DEV_KEY);
     return isTruthy && Capacitor.isNativePlatform();
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  private async logEvent(event: AFEvent) {
+    try {
+      await AppsFlyer.logEvent(event);
+    } catch (error) {
+      // TODO: Report error to Crashlytics or any other error reporting service if available.
+    }
+  }
+
+  /**
+   * Logs a camera shutter event to AppsFlyer.
+   *
+   * This event is logged when the user clicks the camera shutter button to take a photo or video.
+   * It does not necessarily indicate the registering of a photo or video, only the act of clicking
+   * the shutter button.
+   *
+   */
+  async logCameraShutterEvent() {
+    const eventData: AFEvent = {
+      eventName: CCamCustomEventType.CCAM_TRY_CLICK_CAMERA_SHUTTER,
+    };
+    await this.logEvent(eventData);
+  }
 }