目录
一、背景
二、踩坑
三、谷歌插件开发的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 Event
ReactGA.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 relevant
clientId = 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',
},
},
],
}),
}
);
}
