开发谷歌插件之GA埋点

最新推荐文章于 2025-03-29 09:19:51 发布

原创最新推荐文章于 2025-03-29 09:19:51 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #谷歌插件 #GA埋点

一、背景

二、踩坑

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