创建GA4探索报告,查看埋点上报

Android App中接入com.google.firebase:firebase-analytics库,支持Firebase埋点后,如果需要查询某个点位的详细信息,需要创建GA4探索报告,方法如下:

1.在GA4官网上:https://analytics.google.com/analytics/web/#/analysis/ 登录账号。
2.点击页面左侧菜单:Explore,打开Explorations页面,点击页面顶部的Blank的+号按钮,新建一个空白的探索报告。
3.在打开的空白报告页面的顶部,有个Exploration Name,可以看到默认的报告名称,可能是:Untitled exploration,点击可以修改这个名称,修改之后按回车键即可保存。
4.在名称的下面会有查询的时间范围,默认可能是:Last 28 days,也就是最新28天。点击后会弹出弹窗,可以修改这个时间,修改之后点击弹窗的Apply按钮即可保存。
5.点击DIMENSIONS右侧的+号添加维度,在弹出窗口的搜索框中输入:Event name搜索出结果后点击选中复选框,添加事件名称。如果还需要看点位中的参数,比如:category,则可以继续搜索并选择结果的复选框。都添加好之后,点击窗口右上角的Confirm按钮保存。
6.点击METRICS右侧的+号添加指标,在弹出窗口的搜索框中输入:Event count搜索出结果后点击选中复选框,添加事件计数。如果还需要看其他数据,比如用户数,则输入:Total users搜索并选中复选框。都添加好之后,点击窗口右上角的Confirm按钮保存。
7.把DIMENSIONS中添加好的所有维度,比如:"Event name"、"category"依次拖到ROWS区域。
8.把METRICS中添加好的所有指标,比如:"Event count"、"Total users"依次拖到VALUES区域。
9.现在右侧表格中会出现数据,默认可能是显示上报次数最多的前10条数据。
10.如果要查看某一个点位的数据,可以继续操作:把“Event name”拖到FILTERS区域,然后在Conditions中选择:exactly matches,然后在下面的输入框中输入点位名称,比如:My_Firbase_Event,然后点击Apply按钮保存,即可看到右侧表格已经更新成当前点位的数据了,并且包含添加的所有维度。
11.默认应该只能显示前10条数据,如果要查看更多条数据,需要在SHOW ROWS的下拉列表中选择修改,最多支持500条。
 

### GA (Google Analytics) 埋点实现方式及相关示例 #### 一、基础知识概述 Google Analytics 提供了一种强大的数据分析能力,通过埋点可以收集用户的交互行为并生成报告。无论是 Vue/Nuxt 还是 React 应用程序,都可以利用其 API 或 SDK 来实现数据跟踪。 对于 Google Analytics 的埋点实现,通常分为以下几个方面: 1. **配置全局 ID 和初始化脚本**:需要获取 `gtag` 脚本中的唯一标识符(即 Measurement ID),并通过该 ID 初始化分析工具。 2. **自定义事件触发器**:开发者可以通过编程的方式向 Google Analytics 发送特定的事件数据。 3. **跨平台支持**:无论是在传统的网页端还是现代框架中,都可通过类似的机制完成埋点操作。 以下是基于不同技术栈的具体实现方法: --- #### 二、Vue/Nuxt 集成与埋点实现 在 Vue 或 Nuxt 项目中集成 Google Analytics 并设置埋点功能的过程如下所示: ##### 创建 `analytics.js` 文件 此文件用于引入和初始化 Google Tag Manager 的核心库[^2]: ```javascript // analytics.js window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-MEASUREMENT_ID'); // 替换为实际的Measurement ID ``` ##### 修改 `nuxt.config.ts` 将上述脚本嵌入到项目的构建流程中,并启用自动加载选项[^3]: ```typescript export default defineNuxtConfig({ modules: [ '@nuxtjs/google-gtag', ], googleGtag: { id: 'G-YOUR_MEASUREMENT_ID', // 测量ID config: { anonymize_ip: true, }, debug: false, enableOnDev: process.env.NODE_ENV === 'development' } }); ``` ##### 页面级埋点调用 当用户执行某些动作时,可手动记录这些活动作为事件传递给服务器: ```html <script setup lang="ts"> const { gtag } = useGtag(); onMounted(() => { gtag('event', 'page_view', { page_title: document.title, page_path: location.pathname }); }); function handleButtonClick() { gtag('event', 'button_click', { button_label: 'Submit Button', category: 'User Interaction' }); } </script> <template> <button @click="handleButtonClick">Click Me!</button> </template> ``` --- #### 三、React 中集成 GA-4 及其实现细节 针对 React 开发者而言,推荐使用专门封装好的第三方包——`ga-4-react`[^4]来进行快速接入: 安装依赖项: ```bash npm install ga-4-react --save ``` 随后按照官方文档指引完成基础设定即可开始发送各类指标信息: ```jsx import Ga from "ga-4-react"; Ga.initialize("G-MY_GA_TRACKING_CODE"); function App() { useEffect(() => { Ga.pageview("/home"); }, []); return ( <div className="App"> <header className="App-header"> <h1>Welcome to My Website</h1> {/* Example of sending an event */} <button onClick={() => Ga.event({ action: "clicked_button", params: { value: 10 } }) }> Click Here For Fun! </button> </header> </div> ); } export default App; ``` --- #### 四、TypeScript 类型安全保障方案 为了提高代码质量,在 TypeScript 环境下建议设计专用接口约束传参结构[^5]: 定义枚举类型表示可能的操作类别: ```typescript enum EventCategory { Navigation = "navigation", Engagement = "engagement" } interface MonitorEvent { category: string | EventCategory; action?: string; label?: string; value?: number; } ``` 编写通用的服务层函数处理日志上报请求: ```typescript function sendMonitorEvent(event: MonitorEvent): void { if (!window.gtag) throw Error("Global GTAG not initialized!"); const payload = Object.assign({}, event); try { window.gtag("event", payload.category, payload as any); } catch (err) { console.error(`Failed logging monitor event ${JSON.stringify(payload)} due to`, err.message); } } ``` 调用样例展示: ```typescript sendMonitorEvent({ category: EventCategory.Navigation, action: "menu_opened", label: "Main Menu", value: undefined }); ``` --- ### 总结 以上分别介绍了如何在主流前端框架中实施 Google Analytics 的埋点策略及其最佳实践案例。每一种场景都有对应的解决方案可供参考选用。值得注意的是,随着版本迭代更新可能会带来新的特性和改动,请始终关注最新版的技术手册以保持同步升级状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值