diff --git a/cc-inspector/cc-plugin.config.ts b/cc-inspector/cc-plugin.config.ts index 61de1b0..e466569 100644 --- a/cc-inspector/cc-plugin.config.ts +++ b/cc-inspector/cc-plugin.config.ts @@ -38,6 +38,9 @@ const manifest: CocosPluginManifest = { icon: { "48": "./icons/48.png", }, + analysis: { + // googleAnalytics: "G-0S2X4Z1FE7", + }, chrome: { version: 3, pem: "./crx-key.pem", diff --git a/cc-inspector/package.json b/cc-inspector/package.json index 3966aad..0175b36 100644 --- a/cc-inspector/package.json +++ b/cc-inspector/package.json @@ -2,7 +2,7 @@ "author": "cc-plugin", "description": "cocos creator plugin", "devDependencies": { - "@types/chrome": "0.0.133", + "@types/chrome": "0.0.293", "@types/fs-extra": "9.0.1", "@types/kind-of": "^6.0.0", "@types/lodash": "^4.14.176", diff --git a/cc-inspector/src/ga/index.ts b/cc-inspector/src/ga/index.ts new file mode 100644 index 0000000..1d07871 --- /dev/null +++ b/cc-inspector/src/ga/index.ts @@ -0,0 +1,63 @@ +import { GA_Button, GA_EventName, MeasurementBody } from "./type"; + +const API_SECRET = "_yU7eNTgT4Khe2Jo22Ki_g"; +const MEASUREMENT_ID = "G-RW7J0JZ6T5"; +const GA_ENDPOINT = "https://www.google-analytics.com/mp/collect"; + +export class GoogleAnalytics { + async getOrCreateSessionId() { + const result = await chrome.storage.local.get("clientId"); + let clientId = result.clientId; + if (!clientId) { + clientId = self.crypto.randomUUID(); + await chrome.storage.local.set({ clientId }); + } + return clientId; + } + public async fireEventWithParam(name: GA_EventName, param: string) { + const time = Date.now(); + const id = await this.getOrCreateSessionId(); + fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`, { + method: "POST", + body: JSON.stringify({ + client_id: id, + events: [ + { + name: name, + params: { + id: param, + session_id: time.toString(), + engagement_time_msec: time.toString(), + }, + }, + ], + } as MeasurementBody), + }); + } + public async fireEvent(name: string) { + const time = Date.now(); + const id = await this.getOrCreateSessionId(); + fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`, { + method: "POST", + body: JSON.stringify({ + client_id: id, + events: [ + { + name: name, + params: { + session_id: time.toString(), + engagement_time_msec: time.toString(), + }, + }, + ], + } as MeasurementBody), + }); + } + async clickButton(btn: GA_Button) { + await this.fireEventWithParam(GA_EventName.ButtonClicked, btn); + } + async openView(view: string) { + await this.fireEventWithParam(GA_EventName.PageView, view); + } +} +export const ga = new GoogleAnalytics(); diff --git a/cc-inspector/src/ga/type.ts b/cc-inspector/src/ga/type.ts new file mode 100644 index 0000000..dfa7fcb --- /dev/null +++ b/cc-inspector/src/ga/type.ts @@ -0,0 +1,89 @@ +/** + * 发送的消息数据结构 + * + * @doc https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#payload_post_body + * @github https://github.dev/GoogleChrome/chrome-extensions-samples/blob/main/functional-samples/tutorial.google-analytics/scripts/google-analytics.js#L69 + */ +export interface MeasurementBody { + /** + * 用户的ID,用于标识用户 + */ + client_id: string; + /** + * 用户的唯一标识,只能包含 utf-8 字符。 + */ + user_id?: string; + /** + * 事件相关联的时间的 UNIX 时间戳,此值应仅设置为记录过去发生的事件。 + */ + timestamp_micros?: number; + /** + * 用户属性用于描述用户群细分,例如语言偏好设置或地理位置。 + * + * @doc https://developers.google.com/analytics/devguides/collection/protocol/ga4/user-properties?hl=zh-cn&client_type=gtag + */ + user_properties?: Object; + /** + * 用户提供的数据。 + * + *@doc https://developers.google.com/analytics/devguides/collection/ga4/uid-data?hl=zh-cn + */ + user_data?: Object; + /** + * 设置请求的用户意见征求设置。 + * @doc https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#payload_consent + */ + consent?: Object; + /** + * 每个请求最多可以发送 25 个事件 + */ + events?: MeasurementEvent[]; +} +export interface MeasurementEvent { + /** + * 事件的名称。 + * + * Google提供的事件: https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference/events?hl=zh-cn#add_payment_info + * 预留的事件名:https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#reserved_event_names + */ + name: string; + /** + * 预留的参数名:https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?hl=zh-cn&client_type=gtag#reserved_parameter_names + */ + params?: { + [key: string]: any; + /** + * 在实时报告中查看事件,需要该参数 + */ + session_id?: string; + /** + * 事件的互动时长(以毫秒为单位) + */ + engagement_time_msec?: string; + }; +} +export interface GA_Event_PageView extends MeasurementEvent { + name: "page_view"; + params: { + page_title: string; + page_location: string; + }; +} + +export enum GA_EventName { + ButtonClicked = "button_clicked", + PageView = "page_view", + SpaceVisible = "space_visible", + MouseMenu = "mouse_menu", + Hierarchy = "hierarchy", + Inspector = "Inspector", +} +export enum GA_Button { + Github = "github", + Issues = "issues", + QQ = "qq", + /** + * 当页面不支持cocos时,用户手动点击了刷新 + */ + FreshManual = "fresh-manual", +} diff --git a/cc-inspector/src/views/devtools/find.vue b/cc-inspector/src/views/devtools/find.vue index ba6f4ac..3fdd095 100644 --- a/cc-inspector/src/views/devtools/find.vue +++ b/cc-inspector/src/views/devtools/find.vue @@ -10,6 +10,8 @@