Qandar

Q GridsomeでCloudflare Web Analyticsを使いたい

更新日：2021年6月17日公開日：2021年4月6日

Answer

index.hhtmlを用意してスクリプトを記述します

Gridsomeでは、Vue.jsと同じように自動生成のHTMLフォーマットだけでなく、ベースとなるHTML（index.htmlをオーバーライド）も設置できます。

src/index.htmlに、

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
  </head>
  <body ${bodyAttrs}>
    ${app}
    ${scripts}
    <!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "トークン"}'></script><!-- End Cloudflare Web Analytics -->
  </body>
</html>

と書いて保存するだけでOKです。

後述のプラグインだと、HTMLのヘッダ要素にscriptを追加していますが、Cloudflare Web Analyticsではbodyタグの最後に記述するとあるので、そちらにした方が良いでしょう。

SPAモードのページ遷移もしっかりと計測されます。

Gridsomeでデフォルトのindex.htmlを変更するには？

プラグイン「@securized/plugin-cloudflare-analytics」を使います（=>トラックできません）

有志の方がGridsomeでCloudflare Web Analyticsを使えるようにするプラグインを用意してくれているのですが、そちらは計測ができませんでした。

@securized/plugin-cloudflare-analytics

新着Q&A