前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Fluid -32- 配置 Umami 事件统计显示

Fluid -32- 配置 Umami 事件统计显示

作者头像
为为为什么
发布2023-02-21 13:41:59
5750
发布2023-02-21 13:41:59
举报
文章被收录于专栏:又见苍岚又见苍岚

本文记录在 Fluid 主题中加入 Umami 点击事件统计的方法。

Umami 配置

修改主题

  • 我准备统计导航、 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"}

  • 修改 fluid\layout\_partials\header\navigation.ejs 文件
  • 需要在 nav-itemdropdown-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"> &nbsp;<i class="iconfont icon-search"></i>&nbsp; </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">&nbsp;<i class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a> </li> <% } %> </ul> </div>

  • 配置成功后这些元素就有 umami 相关的类了

效果展示

  • 点击带有统计追踪类的元素就会产生 Umami 的事件追踪,在统计界面就可以看到结果了

参考资料

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023年2月2日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Umami 配置
  • 修改主题
    • 原理
      • 配置文件修改
        • footer
        • navigation
    • 效果展示
    • 参考资料
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档