博客中集成Microsoft Clarity

Microsoft Clarity是微软出的用户体验优化工具，可以监控用户在网页中的交互行为。开源免费，国内可用。

创建项目

在Microsoft Clarity上登录，创建项目，提供要监控的网页地址即可。创建完成之后，Microsoft Clarity会分配集成代码和集成方法。官方列出了一些第三方平台集成方法，还可以手动安装追踪代码。

以手动为例，代码块如下：

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "xxxxxxxxxx");
</script>

代码块中的xxxxxxxxxx便是分配的网站ID。

在博客中集成

hexo的博客主题中很少有集成Microsoft Clarity的，我其中一个博客用的hexo+hexo-theme-matery，下面以hexo-theme-matery为例集成Microsoft Clarity。

这个和百度统计一样，都是将代码块放到网站的<head>中。我修改了hexo-theme-matery的源码，只需要在配置文件_config.yml开启Microsoft Clarity，写入分配的网站id即可。

在hexo-theme-matery/layout/_partial目录下新建文件microsoft-clarity.ejs，文件中写入代码：

<!-- Microsoft Clarity -->
<% if (theme.microsoftClarity.enable) { %>
<script type="text/javascript">
    (function (c, l, a, r, i, t, y) {
        c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
        t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
        y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
    })(window, document, "clarity", "script", "<%- theme.microsoftClarity.id %>");
</script>
<% } %>

在hexo-theme-matery/layout.ejs文件中标签中添加集成代码：

1	<%- partial('_partial/microsoft-clarity') %>

在配置文件_config.yml中添加配置项：

# 添加 Microsoft Clarity 分析配置
microsoftClarity:
  enable: true # 开启Microsoft Clarity
  id: xxxxxxxxxx # 网站id

至此，Microsoft Clarity在hexo博客中集成完毕，重新部署之后，便可在Microsoft Clarity中查看用户行为。

NexT主题中集成

在next/layout/_third-party/analytics/目录下新建文件microsoft-clarity.swig，文件中写入代码：

{%- if theme.microsoft_clarity %}
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "{{ theme.microsoft_clarity }}");
  </script>
{%- endif %}

在next/layout/_third-party/analytics/index.swig文件中添加如下代码：

1	{% include 'microsoft-clarity.swig' %}

在配置文件_config.yml中添加配置项：

1 2	# Microsoft Clarity microsoft_clarity: xxxxxxxxxx # 网站id

注意：配置项microsoft_clarity必须用_连接，如果使用-写成microsoft-clarity不生效。