本文记录在 Fluid 主题中加入 Umami 点击事件统计的方法。
Umami 配置
- 需要 安装 Umami
- 建议升级到 1.39 以上版本，支持事件显示
修改主题
- 我准备统计导航、 Footer 的点击事件
- 需要对主题配置文件和主题文件做出一些修改
原理
- 为了操作简单，我们采用修改 CSS 类的方式
- 为想要统计的事件元素上添加
umami--event--name类名
配置文件修改
footer
- 为想要监控的链接添加点击事件监控代码
- 添加
umami--click--name类名
123 | <a href="https://hexo.io" target="_blank" rel="nofollow noopener" color="#d7d8d9"><span class="umami--click--Footer-Hexo">Hexo</span></a><i class="iconfont icon-love"></i><a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span class="umami--click--Footer-Fluid">Fluid</span></a> |
|---|
navigation
- 在 menu 中的值中添加键值
event_key
12345 | menu: - { key: "home", link: "/", icon: "iconfont icon-home-fill", event_key : "Navigation-Homepage"} - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" , event_key : "Navigation-Archive"} - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" , event_key : "Navigation-Category"} - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" , event_key : "Navigation-Tag"} |
|---|
- 修改
fluidlayout_partialsheadernavigation.ejs文件 - 需要在
nav-item和dropdown-item类的元素里套个div添加 umami 的类名，在其中自动读取主题配置文件中的event_key
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 | <!-- Collapsible content --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto text-center"> <% for(const each of theme.navbar.menu || []) { %> <% if (!each.submenu && !each.link) continue %> <% var text = each.name || __(each.key '.menu') || __(each.key '.title') %> <% if (text.indexOf('.menu') !== -1 || text.indexOf('.title') !== -1) { text = each.key } %> <% if (each.submenu) { %> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" target="_self" href="javascript:;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <%- each.icon ? '<i class="' each.icon '"></i>' : '' %> <%- text %> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <% for(const subEach of each.submenu || []) { %> <% if (!subEach.link) continue %> <% var subText = subEach.name || __(subEach.key '.title') %> <% if (subText.indexOf('.title') !== -1) { subText = subEach.key } %> <div class = "umami--click--<%- subEach.event_key %>"> <a class="dropdown-item" href="<%= url_for(subEach.link) %>"> <%- subEach.icon ? '<i class="' subEach.icon '"></i>' : '' %> <%- subText %> </a> </div> <% } %> </div> </li> <% } else { %> <li class="nav-item"> <div class = "umami--click--<%- each.event_key %>"> <a class="nav-link" href="<%= url_for(each.link) %>"> <%- each.icon ? '<i class="' each.icon '"></i>' : '' %> <%- text %> </a> </div> </li> <% } %> <% } %> <% if(theme.search.enable) { %> <li class="nav-item" id="search-btn"> <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search"> <i class="iconfont icon-search"></i> </a> </li> <% import_js(theme.static_prefix.internal_js, 'local-search.js') %> <% } %> <% if(theme.dark_mode && theme.dark_mode.enable) { %> <li class="nav-item" id="color-toggle-btn"> <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle"> <i class="iconfont icon-dark" id="color-toggle-icon"></i> </a> </li> <% } %> </ul> </div> |
|---|
- 配置成功后这些元素就有 umami 相关的类了
效果展示
- 点击带有统计追踪类的元素就会产生 Umami 的事件追踪，在统计界面就可以看到结果了
参考资料
- https://cloud.tencent.com/developer/article/2220501
