如何使用 Rails 7 Importmaps 设置合理的分析

Question

Plausible Analytics 是 Google Analytics 的替代品，用于跟踪页面浏览量。我正在尝试将 Rails 7 中的 importmaps 与 importmap 集成，但它不起作用。

Plausible 提供了包含以下脚本标记作为唯一需要的说明：

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

在尝试以“Rails 7 Way”执行此操作时，我尝试通过执行以下操作以 importmap 方式执行操作：

bin/importmap pin plausible-tracker --download

在我的布局中我添加了：

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

（这是基于我对上面 Plausible 建议的脚本标签的解释）。

当我检查所需的页面时，我可以看到这段代码反映在头部，但没有跟踪恢复到合理的状态，所以它显然还没有正确设置。

（到目前为止我没有在 application.js 中添加任何内容）

我该如何正确地做到这一点？

编辑1：所以我的布局目前有这三个与javascript相关的标签，我需要保留哪些标签？

1. <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

2. <%= javascript_importmap_tags %>

3. <%= javascript_import_module_tag 'plausible-tracker', "data-turbo-track": "reload", defer: true, "data-domain": "amorc.org.au" %>

Answer 1

你已经成功了一半。

如果您安装了 plausible-tracker，则您拥有的 npm packsge 与 cdn 版本略有不同。

您需要在 application.js 文件中导入脚本，这是 import-map 负责加载/捆绑脚本的地方。

import Plausible from 'plausible-tracker'

const plausible = Plausible({
    domain: 'YOURDOMAIN'
});
console.log(plausible);

确保 application.js 已加载到您的视图中：

<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

您应该会看到看似合理的对象已登录到浏览器控制台。