目录
一、背景
二、踩坑
三、谷歌插件开发的GA埋点的实现方式
一、背景
开发了一个谷歌插件，领导需要对用户的一些行为进行分析，于是让我在代码里面加上GA埋点。由于我们的PC端的项目一直都有进行GA埋点，当时就想着，这不就是把相关的代码搬过来就可以了吗。简单。于是说干就干，花了几分钟的pc端相关的GA埋点的代码搬了过来，代码如下：
- 引入react-ga4的插件库
import ReactGA from 'react-ga4';const initializeGA = () => {ReactGA.initialize(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS as string);
};const trackGAEvent = (category: string,action: string,label: string,value?: number
) => {// Send GA4 EventReactGA.event({category: category,action: action,label: label,...(typeof value === 'number' && value >= 0 && { value: value })});
};- 先在全局代码中初始化GA埋点的代码，然后在需要打点的事件上调用trackGAEvent事件
在service_worker文件里面监听onInstalled事件，然后进行全局初始化：
import {initializeGA} from '@/utils/ga';chrome.runtime.onInstalled.addListener(function (details) {if (details.reason === "install") {initializeGA()}
});然后在需要打点的事件上调用 trackGAEvent事件
import { initializeGA，trackGAEvent } from '@/utils/ga';trackGAEvent('account.signin', 'signinBtn.click.email', '');二、踩坑
代码写完后很自信的重新打了一个插件包给领导用，然后第二天反馈的是，在谷歌分析后台没有看到对应的打点事件，一开始怀疑是不是在service_worker里面初始化GA之后没有生效、是不是eventName太长等等，于是在每次埋点之前都进行初始化以及缩短eventName等等，发现都不行。于是我就重新看了一下谷歌插件开发的文档，才发现谷歌插件开的GA埋点是有属于的实现方式的，相关文档：https://developer.chrome.com/docs/extensions/how-to/integrate/google-analytics-4?hl=zh-cn
三、谷歌插件开发的GA埋点的实现方式
1、获取api_secret以及measurement_id
2、生成 client_id
client_id是特定设备/用户唯一的标识符，通过调用self.crypto.randomUUID()生成一个client_id 存储在 chrome.storage.local中，以确保其在安装扩展程序期间保持不变。
注意：使用chrome.storage.local，需要在manifest中配置storage 权限：
"permissions": ["storage"]const getOrCreateClientId = async()=> {let { clientId } = await chrome.storage.local.get("clientId");if (!clientId) {// Generate a unique client ID, the actual value is not relevantclientId = self.crypto.randomUUID();await chrome.storage.local.set({ clientId });}return clientId;}3、准备好api_secret、measurement_id以及client_id之后就可以进行分析事件的发送了
const GA_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
const MEASUREMENT_ID = `G-...`;
const API_SECRET = `...`;const fireEvent = ()=>{fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,{method: 'POST',body: JSON.stringify({client_id: await getOrCreateClientId(),events: [{name: 'button_clicked',params: {id: 'my-button',},},],}),});
}
