开发谷歌插件之GA埋点

server/2024/9/24 3:16:46/

一、背景

二、踩坑

三、谷歌插件开发的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',},},],}),});
}