@24i/bigscreen-sdk 1.0.14-alpha.2280 → 1.0.14-alpha.2284

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.14-alpha.2280",
+    "version": "1.0.14-alpha.2284",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -37,11 +37,11 @@
     },
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
-        "@24i/appstage-shared-analytics": "1.0.7",
+        "@24i/appstage-shared-analytics": "1.0.1-alpha1",
         "@24i/appstage-shared-events-manager": "1.0.7",
         "@24i/appstage-shared-perf-utils": "1.0.5",
         "@24i/player-base": "6.10.0",
-        "@24i/smartapps-datalayer": "3.0.7-alpha.990",
+        "@24i/smartapps-datalayer": "3.0.7-alpha.993",
         "@sentry/browser": "7.35.0",
         "@sentry/types": "7.35.0",
         "@types/gtag.js": "^0.0.12",

package/packages/analytics/src/clients/GoogleAnalytics/GoogleAnalytics.ts

@@ -34,15 +34,20 @@ export class GoogleAnalytics implements AnalyticsClient {
         cid: '',
         sid: 0,
         uamb: 0,
-        uap: '',
-        uapv: '',
-        uam: '',
         seg: 0,
         sct: 0,
         _p: generateUuid(),
+        'up.device_manufacturer': '',
+        'up.device_platform': '',
+        'up.device_platform_version': '',
+        'up.app_version': '',
     };
 
-    a24iOperational = false;
+    manufacturer = '';
+
+    platform = '';
+
+    platformVersion = '';
 
     lastOnEvent: number | undefined = undefined;
 
@@ -58,7 +63,7 @@ export class GoogleAnalytics implements AnalyticsClient {
 
     firstVisit: boolean | undefined = undefined;
 
-    constructor(private id: string) {
+    constructor(private id: string, private appVersion: string = '') {
         this.init();
     }
 
@@ -73,16 +78,20 @@ export class GoogleAnalytics implements AnalyticsClient {
         if (this.firstVisit) {
             await Storage.setItem(GA_FIRST_VISIT, '0');
         }
+        this.manufacturer = await device.getManufacturerName();
+        this.platform = await device.getPlatformName();
+        this.platformVersion = await device.getPlatformVersion();
         await this.startSession();
-        params.uap = await device.getPlatformName();
-        params.uapv = await device.getPlatformVersion();
-        params.uam = await device.getModelName();
     }
 
     async startSession() {
         const sessionNumber = parseInt(await Storage.getItem(GA_SESSION_COUNTER) ?? '0', 10) + 1;
         this.constantUrlParams.sct = sessionNumber;
         this.constantUrlParams.sid = generateSessionId();
+        this.constantUrlParams['up.device_manufacturer'] = this.manufacturer;
+        this.constantUrlParams['up.device_platform'] = this.platform;
+        this.constantUrlParams['up.device_platform_version'] = this.platformVersion;
+        this.constantUrlParams['up.app_version'] = this.appVersion;
         await Storage.setItem(GA_SESSION_COUNTER, sessionNumber.toString());
         this.isSessionActive = true;
         this.setSessionTimeout();
@@ -113,11 +122,14 @@ export class GoogleAnalytics implements AnalyticsClient {
         const engagementTime = this.lastOnEvent ? now - this.lastOnEvent : undefined;
         this.lastOnEvent = now;
         await Promise.all(events.map(async (event, index) => {
-            if (event === 'a24i_operational' && !this.shouldContinueWithA24iOperational()) return;
+            const sessionInfo = await this.getSessionInfo(
+                index === 0 ? engagementTime : undefined,
+            );
             const gtagPayload = mapPayload(
-                event, triggerName, await this.getSessionInfo(
-                    index === 0 ? engagementTime : undefined,
-                ),
+                event, triggerName, {
+                    ...payload,
+                    ...sessionInfo,
+                },
             );
             const urlParams = mapEventParamsToUrlParams(payload as SceneInfo);
             this.send(event, gtagPayload, urlParams);
@@ -162,12 +174,6 @@ export class GoogleAnalytics implements AnalyticsClient {
 
     private sendQueueWithDelay = debounce(this.sendQueue, SEND_DEBOUNCE_MS);
 
-    private shouldContinueWithA24iOperational() {
-        const { a24iOperational } = this;
-        if (!a24iOperational) this.a24iOperational = true;
-        return !a24iOperational;
-    }
-
     private async getSessionInfo(engagementTime: number | undefined): Promise<SessionInfo> {
         const sessionStarted = !this.sessionStartSent;
         this.sessionStartSent = true;
@@ -176,6 +182,9 @@ export class GoogleAnalytics implements AnalyticsClient {
         const { firstVisit } = this;
         this.firstVisit = false;
         return {
+            appVersion: this.appVersion,
+            manufacturer: this.manufacturer,
+            platform: this.platform,
             sessionStarted,
             engagementTime,
             firstEvent,

package/packages/analytics/src/clients/GoogleAnalytics/constants.ts

@@ -1,7 +1,12 @@
 import { GAEventsNames } from './interface';
 
+const stringParameter = 'ep';
+const numericParameter = 'epn';
+
 export const GOOGLE_ANALYTICS_TRIGGERS = [
+    'scene_view',
     'app_close',
+    // player triggers
     'playback_10',
     'playback_25',
     'playback_50',
@@ -12,42 +17,92 @@ export const GOOGLE_ANALYTICS_TRIGGERS = [
     'playback_stop',
     'player_close',
     'player_open',
-    'scene_view',
+    'heartbeat_5',
+    // scroll triggers
     'scroll_25',
     'scroll_50',
     'scroll_75',
     'scroll_90',
+    // additional triggers
+    'app_error',
+    'toggle_favorite',
+    'search',
+    'rate_content',
+    // ads triggers
+    'ad_loaded',
+    'ad_skipped',
+    // user triggers
+    'login',
+    'logout',
+    'sign_up',
+    // purchases
+    'purchase_cancel',
+    'purchase_complete',
+    'purchase_start',
+
 ] as const;
 
 export const TRIGGER_NAME_TO_GA_EVENTS: Record<
     typeof GOOGLE_ANALYTICS_TRIGGERS[number], GAEventsNames[]
 > = {
     // App
-    app_close: ['app_close', 'video_progress'],
+    app_close: ['close_player_session', 'video_progress'],
 
     // Playback
+    heartbeat_5: ['video_progress'],
     playback_10: ['video_progress'],
     playback_25: ['video_progress'],
     playback_50: ['video_progress'],
     playback_75: ['video_progress'],
-    playback_90: ['video_progress'],
+    playback_90: ['video_complete'],
     playback_pause: ['video_progress'],
     playback_start: ['video_start'],
     playback_stop: ['video_progress'],
 
     // Player
-    player_close: ['a24i_content', 'video_progress'],
-    player_open: ['a24i_content'],
+    player_close: ['close_player_session', 'video_progress'],
+    player_open: ['open_player_session'],
 
     // Scenes
-    scene_view: [
-        'page_view',
-        'a24i_operational',
-    ],
+    scene_view: ['page_view'],
 
     // Scrolling in scene
     scroll_25: ['scroll'],
     scroll_50: ['scroll'],
     scroll_75: ['scroll'],
     scroll_90: ['scroll'],
+
+    // purchases
+    purchase_cancel: [],
+    purchase_complete: [],
+    purchase_start: [],
+
+    // additional triggers
+    app_error: [],
+    toggle_favorite: [],
+    search: [],
+    rate_content: [],
+
+    // ads triggers
+    ad_loaded: [],
+    ad_skipped: [],
+
+    // user triggers
+    login: ['login'],
+    logout: [],
+    sign_up: [],
+};
+
+export const gtagPayloadParams: Record<string, string> = {
+    contentType: `${stringParameter}.content_type`,
+    episodeNumber: `${numericParameter}.episode_number`,
+    seasonNumber: `${numericParameter}.season_number`,
+    currentTime: `${numericParameter}.video_current_time`,
+    duration: `${numericParameter}.video_duration`,
+    percent: `${numericParameter}.video_current_percent`,
+    provider: `${stringParameter}.video_provider`,
+    title: `${stringParameter}.video_title`,
+    seriesTitle: `${stringParameter}.video_series_title`,
+    url: `${stringParameter}.video_url`,
+    assetId: `${stringParameter}.video_asset_id`,
 };

package/packages/analytics/src/clients/GoogleAnalytics/interface.ts

@@ -1,12 +1,19 @@
 export type GAEventsNames = (
-    | 'a24i_content'
-    | 'a24i_operational'
-    | 'app_close'
-    | 'buffering_start'
-    | 'page_view'
-    | 'scroll'
-    | 'video_progress'
-    | 'video_start'
+    | 'app_close' // When the playback is active at the time the app or website is closing.
+    | 'page_view' // Each time the page loads or the browser history state is changed
+    | 'scroll' // The first time a user reaches the bottom of each page
+    | 'video_progress' // When the video progresses past 10%, 25%, 50%, and 75% duration time
+    | 'video_start' // When the video starts playing
+    | 'video_complete' // When the video ends
+    | 'open_player_session' // When the user opens a player scene and the player is initiated
+    | 'close_player_session' // When the user exits the player scene with initiated player
+    | 'select_content' // When a user has selected content
+    | 'login' // When a user logs in
+    | 'sign_up' // When a user has signed up Allows you to see which methods of signup are popular
+    | 'search' // When a user searches your content
+    | 'purchase' // When a user completes a purchase
+    | 'share' // When a user has shared content
+    | 'user_engagement' // Periodically, while the app is in the foreground
 );
 
 export type QueuedEvent = {
@@ -16,6 +23,9 @@ export type QueuedEvent = {
 };
 
 export type SessionInfo = {
+    appVersion: string,
+    manufacturer: string,
+    platform: string,
     engagementTime: number | undefined,
     sessionStarted: boolean,
     firstEvent: boolean,
@@ -29,18 +39,20 @@ export type ConstantUrlParams = {
     sid: number,
     /** 1 for mobile devices, 0 otherwise */
     uamb: number,
-    /** Platform name */
-    uap: string,
-    /** Platform version */
-    uapv: string,
-    /** Device model name */
-    uam: string,
     /** Session engagement 0 for first event of session, 1 otherwise */
     seg: number,
     /** Session count */
     sct: number,
     /** Random page hash */
     _p: string,
+    /** Device manufacturer e.g. 'Samsung' */
+    'up.device_manufacturer': string,
+    /** Platform e.g. 'Tizen' */
+    'up.device_platform': string,
+    /** Platform version e.g. '5.0' */
+    'up.device_platform_version': string,
+    /** Version of application 'v1.0.0' */
+    'up.app_version': string,
 };
 
 export type EventUrlParams = {

package/packages/analytics/src/clients/GoogleAnalytics/mapPayload.ts

@@ -1,29 +1,46 @@
-import type { AnalyticsEventsNames } from '../../interface';
-import type { EventUrlParams, GAEventsNames, SessionInfo } from './interface';
+import type { AnalyticsEventsNames, AnyPayload } from '../../interface';
+import type { EventUrlParams, GAEventsNames } from './interface';
+import { gtagPayloadParams } from './constants';
 
-export const mapEventParamsToUrlParams = (eventParams: Record<string, any>) => {
-    const urlParams: Partial<EventUrlParams> = {};
-    if (eventParams.language) urlParams.ul = eventParams.language;
-    if (eventParams.resolution) urlParams.sr = eventParams.resolution;
-    if (eventParams.sceneId) urlParams.dl = eventParams.sceneId;
-    if (eventParams.sceneName) urlParams.dt = eventParams.sceneName;
+const map: Record<string, string> = {
+    language: 'ul',
+    resolution: 'sr',
+    sceneId: 'dl',
+    sceneName: 'dt',
+};
+
+export const mapEventParamsToUrlParams = (eventParams: Record<string, any>)
+: EventUrlParams => {
+    const urlParams = {};
+    Object.entries(eventParams).forEach(([key]) => {
+        if (map[key]) {
+            Object.assign(urlParams, {
+                [map[key]]: eventParams[key] || '',
+            });
+        }
+    });
     return urlParams as EventUrlParams;
 };
 
 export const mapPayload = (
     eventName: GAEventsNames,
     triggerName: AnalyticsEventsNames,
-    sessionInfo: SessionInfo,
+    payload: AnyPayload,
 ) => {
     const gtagPayload: Record<string, any> = {
         'ep.event_trigger': triggerName,
-        _et: sessionInfo.engagementTime ?? 0,
-        _ee: sessionInfo.firstEvent ? 1 : 0,
-        _fv: sessionInfo.firstVisit ? 1 : 0,
-        _ss: sessionInfo.sessionStarted ? 1 : 0,
+        _et: payload.engagementTime ?? 0,
+        _ee: payload.firstEvent ? 1 : 0,
+        _fv: payload.firstVisit ? 1 : 0,
+        _ss: payload.sessionStarted ? 1 : 0,
     };
     if (eventName === 'scroll') {
-        gtagPayload['epn.percent_scroll'] = parseInt(triggerName.split('_')[1], 10);
+        gtagPayload['epn.percent_scrolled'] = parseInt(triggerName.split('_')[1], 10);
     }
+    Object.keys(payload).forEach((key: keyof typeof payload) => {
+        if (gtagPayloadParams[key] !== undefined) {
+            gtagPayload[gtagPayloadParams[key]] = payload[key];
+        }
+    });
     return gtagPayload;
 };