大家好，我是王施帆。
上一篇我们在 GA4 平台里点点点，做出了自定义事件。讲完之后，估计有同学已经在偷偷得意了："事件这块我拿捏了。"
别急——平台里点出来的自定义事件，其实是被 GA 拴着绳子的。 它能做的事就那么多，弹性有限。今天这篇，我们把绳子解开，直接用代码去跟 GA 对话，做一些平台内根本做不到的进阶追踪。
先把丑话说前头：代码这条路，门槛高一点，也麻烦一点。所以我的原则一向是——平台内点几下就能搞定的，犯不着写代码；只有当平台满足不了你的时候，才会用代码。 今天我们要做的，自然是平台搞不定的那种。
延伸阅读（前面几篇是地基，建议先看完）：
一、先想清楚：我们到底要追踪个啥
打开练习网站你会发现，一个页面里能发生的事件多到数不清。所以动手前，得先选好"我要盯的到底是哪个动作"。
我举个平台搞不定的例子。访客逛你网站时，鼠标指针经常会悬停在某样东西上——比如指着一台笔记本电脑看了半天，却没点下去。
注意了："指向（悬停）"本身也是一种行为，也是一个事件。 这位访客对这台电脑明显有兴趣，只是还在犹豫。这种"看了但没点"的小心思，价值极高——可偏偏 GA 平台内的弹性不够，盯不住它。
那怎么办？代码上场。 这一篇我就演示：怎么用代码追踪"鼠标指向某个目标对象"这个动作，把这份"暗中观察"的流量给捕捉下来。我们这次盯的目标，换成页面里那台相机。
二、热身：先学会"偷看"网页的元素
写代码之前有个必修动作——你得先看懂自己网站的元素长什么样，不然代码无从下手。这里要按下键盘的 F12。
浏览器右侧"唰"地弹出一片密密麻麻的东西，这就是开发者工具（开发人员模式）。它能帮我们做很多和网站运作有关的观察。
先确认上方页签切到 Element（元素）。点进去你会发现，这画面有点眼熟——是不是很像上一阶段我们用的 Expression 网页编辑器？左边是人类看的网页内容，右边是电脑看的代码，左右一一对应。
怎么对应？看到那个"虚线方框 + 箭头"的小按钮没有（元素选择器），点它一下，它会变成蓝色。只要它是蓝色状态，你就能去指向左侧任何一个元素。
顺便说一句，这里之所以叫 Element（元素），是因为网页上所有看得到的内容，都算是一个元素。
现在把鼠标指向那台笔记本电脑——发现没有？右侧代码区立刻有一块灰色色块亮起来对照过去，意思是："你人类看的这张图，对应的就是电脑这边灰色这段代码。" 想把它固定下来，对着图片点一下左键，右侧代码就会定住、颜色加深变蓝。一看就明白了：这台笔记本是个 png 图片。
小提醒：那个元素选择器是"一次性"的，用完颜色就没了，想再用得再点一次。它要维持蓝色才有对照功能，别白点。
不信你再练一个：维持蓝色状态，鼠标移到那行 on selected laptops 文字上点一下——果然，右侧立刻告诉你"电脑看的就是这段"。这就是开发者工具 Element 页签的本事：让人和代码对上号。
好，现在正式选目标。指向那台相机，元素选择器着色、点击、固定到右侧——记下它的图片文件名。我们要下手了。
三、在编辑器里找到那张图（Ctrl+F 大法）
现在我们切回 网页编辑器。但这里有个尴尬：Visual Studio Code 不是浏览器，它没有"左右着色对照"那套功能。 你要是想从上半部那片代码的汪洋大海里，用肉眼一行行捞出相机那张图……那今天就别想下班了。
有个最快的偷懒办法：
回到浏览器，对着相机图片双击（它会假装能编辑，其实不能），右键 → 复制，把图片文件名拿到手
回到 Visual Studio Code，先在上半部代码区点一下，确认光标待在上半部
按 Ctrl + F，跳出搜索框，把刚才复制的文件名粘进去，点 Find Next
"唰"一下，它直接跳到那张图片的代码位置。下面是人话、上面是代码，省心。
四、把这段 img 代码拆给你看
找到了，我们先把这张图片的 HTML 代码看明白。原始长这样（还没加任何 GA 的东西）：
<img src="img/product-1.png" class="img-fluid" alt="">
前面几篇讲过 <html>、<head>、<body> 这些标签。现在这个 <img> 标签——浏览器一看到 img（image 的缩写），就知道"哦，这里要摆一张图"。标签里塞了好几个属性（正式说法叫"属性"），一个个看：
src：这张图从哪儿来，指向哪个路径、哪个文件。这里写的是img/product-1.png，意思是"去 img 这个文件夹里，把product-1.png拿来显示"。这个 img文件夹是啥？就是你在 FileZilla 里上传所有网页素材的地方嘛。图片能被浏览器读出来，肯定是因为它老老实实待在某个文件夹的某个文件里。img/product-1.png翻译成大白话就是："浏览器，劳驾去 img 文件夹把这个文件搬到网页上。"class：分类用的，就是"分门别类"的意思。你可以想象学校——一堆学生、一堆院系，要是把班级科系全取消，老师学生乱成一锅粥。网页上元素也多，为了好管理就给它们分类，类别这个词英文就叫class。这里的类名叫img-fluid，是网页设计者自己起的，别纠结为啥叫这名，知道它是个分类标签就行。alt（alternative，替代文本）：这里是空的双引号 ""。它有啥用？假设引号里写了内容（比如填个 XXX），那当这张图加载失败、显示不出来的时候，你把鼠标指上去，就会浮出 XXX 告诉你"这儿本来该有张啥图"。你肯定遇到过——某网站图裂了，鼠标一悬停冒出一行字解释，那就是alt在干活。可有可无，这套模板的原作者偷懒没写。
到这儿为止，一个 GA 的字都还没沾上。是吧？哈哈哈，下面才是正题。
五、核心登场：gtag() —— 跟 GA 对话的暗号
要让这张图在"被悬停"时通知 GA，我们得往<img>标签里塞一段代码。改完长这样：
<img onmouseover="gtag('event', 'camera_mouseover', {img_image_name: 'product-1.png'});" src="img/product-1.png" class="img-fluid" alt="">
是不是有点晕？别怕，我一层层来说。
先看 gtag('event', 'camera_mouseover', {...}) 这部分。
程序里有个铁律：看到一层套一层的括号（不管小括号、中括号、大括号），从最内层开始读。 这里最内层是大括号 { }：
{img_image_name: 'product-1.png'}
眼熟不？这不就是上一篇讲的事件参数嘛！冒号左边是字段名（也就是键 / Key），冒号右边是字段内容（也就是值 / Value）。
学理上，这种"键+值"装进大括号的数据，叫字典（Dictionary）数据，也叫 JSON 格式。听不懂没关系，你只要记住一句话：冒号左边是参数键，冒号右边是参数值。 收工。
再看外面包着的 gtag('event', ...)。
记住一条：在网页代码里，凡是想跟 GA 搭话，都得通过 gtag() 这个暗号。 它本来是空壳，你想干啥就往里填。我们现在要干的事是"告诉 GA 创建一个事件"，所以：
'event'：表示"我要创建一个事件"逗号后面 'camera_mouseover'：这个自定义事件的名称最后那个 { }：事件的参数（键和值）
不信你回 里翻翻第三篇装的那段 GA 追踪代码，里面是不是也藏着好几个 gtag()？对嘛——只要跟 GA 互动，gtag() 必须到场，它就是这套体系的接头暗号。
六、onMouseover 和那个"分号" —— 其实是 JavaScript
你可能注意到 gtag(...) 后面有个分号 ;，还被塞进了 onmouseover="..." 里。这俩是干嘛的？
先说分号。 在 Java 体系的语言里，一行代码结束的尾巴上必须挂一个分号，分号就代表"这句说完了"。所以一看到分号，老司机就知道："哦，这段是 JavaScript。"
再说 onmouseover。 这词儿特别口语化，翻译过来就是——"当鼠标悬停在我身上的时候"，就去执行等号右边那件事。那件事是啥？就是调用 gtag() 跟 GA 报告："有人把鼠标放相机上啦，记一笔事件，名字叫 camera_mouseover，参数是这张图。"
JavaScript 是让网页"动起来"的语言。注意这个"动"不一定是肉眼能看见的动画，后台默默运作的那种"动"也算动。想深入这块，那是网页编程的范畴了，本系列不展开。
那问题来了：我指向别的图片，为啥不会误触发这段？
因为 onmouseover 是写在这一个 标签里的，它只管自己这一亩三分地。你想让别的图片也被追踪，就得去那个图片的
标签里照样写一遍。 各扫门前雪。
七、保存、上传、覆盖（老规矩）
代码一改，编辑器标签上又冒出那个星号 *（提醒你还没保存）。点保存。
然后呢？别忘了 FileZilla 那一步！ 你保存的只是自己电脑上的 index.html，服务器上那个还是旧的。这俩是两码事，得重新上传覆盖：
打开 FileZilla，左侧找到刚改的 index.html（我们编辑的是首页文件）右侧确认在 htdocs 文件夹里（byethost 规定所有素材都得放这儿；只要你能在右侧看到 index，就说明退到 htdocs 了，要是停在img里记得退出来）把电脑上的新 index.html拖到服务器端，它会问"同名文件要不要覆盖"——当然要，确认、update，搞定
八、见证奇迹
回练习网站，先刷新（刷新才会加载你最新的代码），然后把鼠标指向那台相机。
回到 GA：报表 → 实时概览 → 往下滚到事件小卡片。这里没数据是正常的（实时报表只反映 30 分钟内），耐心等一下。
等着等着——诶？画面跳出一个自定义事件，它出现了。camera_mouseover 清清爽爽地显示出来了。
这一篇我们解开绳子，第一次用代码直接指挥 GA：
为什么用代码：平台内自定义事件弹性有限；像"鼠标悬停"这种动作平台盯不住，代码能。但代码门槛高，平台能搞定的就别上代码 先看懂元素：F12 开发者工具 → Element 页签 → 元素选择器，左右对照找到目标 找代码靠 Ctrl+F：复制图片文件名，编辑器里搜，秒定位 看懂 img 标签：src（图片路径）、class（分类）、alt（替代文本） **核心是 gtag()**：跟 GA 对话的暗号，gtag('event', '事件名', {键: 值})；挂在 onmouseover 里，鼠标一悬停就触发；分号是 JavaScript 的句号；引号务必成对 改完三件套：保存 → 上传覆盖 → 刷新触发
很多 GA 的细节，光啃官方文档是啃不出来的，非得自己下场踩一遍坑才透亮。但你也别被代码吓退——它能帮你做到一大堆平台里做不到的事。用不用，就看你了。
就写这么多吧，感谢阅读。下一篇我们继续往下走。
—— END ——
