如何在Jekyll站点基于Google Analytics展示页面浏览量？

绝对有办法解决这个问题！既然jekyll-ga插件已经长期未维护，还会和新版Ruby/google-api-client冲突，我们可以换个思路——完全绕开构建阶段的Ruby依赖，用前端JavaScript实时请求Google Analytics数据，这样既能实现浏览量的实时更新，又能彻底避开插件带来的兼容性问题。

下面是两种可行的解决方案，重点推荐基于GA4的方案（毕竟UA即将停用）：

方案一：使用GA4 Data API + 前端Fetch请求（推荐） #

这个方案的核心是直接在页面加载时，通过前端代码调用Google Analytics 4的Data API，拉取当前页面的总浏览量并展示。步骤如下：

1. 准备工作 #

• 登录Google Cloud Console，创建一个新项目（或使用现有项目），启用Analytics Data API（搜索即可找到）。
• 生成一个API密钥，在密钥设置中添加你的Jekyll站点域名作为允许的HTTP引用者（比如https://your-site.com/*），防止密钥被滥用。
• 记下你的GA4属性ID（格式为2XXXXXXXXX）和刚生成的API密钥。

2. 在Jekyll模板中添加代码 #

首先，在需要展示浏览量的位置（比如文章底部、标题旁）添加一个占位元素：

<span id="page-views">加载中...</span>

然后，在页面的<script>标签中添加以下代码（可以放在模板的footer.html或对应页面的布局文件里）：

document.addEventListener('DOMContentLoaded', async function() {
  // 替换成你的GA4属性ID和API密钥
  const propertyId = '2XXXXXXXXX';
  const apiKey = 'YOUR_GOOGLE_CLOUD_API_KEY';
  // 获取当前页面的路径（自动适配Jekyll生成的URL）
  const pagePath = window.location.pathname;

  try {
    // 调用GA4 Data API的runReport接口
    const response = await fetch(`https://analyticsdata.googleapis.com/v1beta/properties/${propertyId}:runReport?key=${apiKey}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dateRanges: [{ startDate: '2000-01-01', endDate: 'today' }], // 拉取从建站到今天的所有数据
        dimensions: [{ name: 'pagePath' }], // 按页面路径筛选
        metrics: [{ name: 'screenPageViews' }], // 要获取的指标：页面浏览量
        dimensionFilter: {
          filter: {
            fieldName: 'pagePath',
            stringFilter: {
              matchType: 'EXACT',
              value: pagePath
            }
          }
        }
      })
    });

    const data = await response.json();
    if (data.rows && data.rows.length > 0) {
      // 提取浏览量数值并展示
      const viewsCount = parseInt(data.rows[0].metricValues[0].value);
      document.getElementById('page-views').textContent = `${viewsCount.toLocaleString()} 次浏览`;
    } else {
      document.getElementById('page-views').textContent = '0 次浏览';
    }
  } catch (error) {
    console.error('获取浏览量失败:', error);
    document.getElementById('page-views').textContent = '无法获取浏览量';
  }
});

3. 注意事项 #

• API配额：GA4 Data API的免费配额是每天10000次请求，对于普通博客来说完全够用。
• 路径匹配：如果你的Jekyll站点URL存在带/不带尾斜杠的差异（比如/post/和/post），可以把matchType改成CONTAINS，或者统一站点的URL格式。
• 隐私合规：如果你的站点需要遵守GDPR等法规，确保用户同意后再加载统计相关代码。

方案二：使用Google Tag Manager + 本地存储（适合轻量需求） #

如果不想暴露API密钥，也可以通过Google Tag Manager（GTM）跟踪页面浏览，然后将浏览量数据存储到浏览器本地存储中。不过这个方案只能统计当前用户的浏览次数，无法获取GA中的历史总浏览量，适合只需要展示“当前用户浏览次数”的场景。

核心思路 #

1. 在GTM中创建一个自定义事件，每次页面加载时触发。
2. 用GTM的变量存储浏览次数，每次触发事件时递增。
3. 在Jekyll页面中读取本地存储的数值并展示。

不过这个方案无法获取全站的历史总浏览量，更适合轻量需求，所以优先推荐方案一。

内容的提问来源于stack exchange，提问作者jupiteror