gatsby-plugin-goatcounter

为您的 GatsbyJS 网站添加符合 GDPR 标准的 GoatCounter 统计。

安装

yarn add -D gatsby-plugin-goatcounter
# or
npm i -D gatsby-plugin-goatcounter

它在 react 和 gatsby 上有 peerDependencies，Gatsby 无论如何都需要它们 😉

如何使用

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-goatcounter`,
      options: {
        // Either `code` or `selfHostUrl` is required.
        // REQUIRED IF USING HOSTED GOATCOUNTER! https://[my_code].goatcounter.com
        code: 'YOUR_GOATCOUNTER_PAGE_CODE',

        // REQUIRED IF USING SELFHOSTED GOATCOUNTER!
        selfHostUrl: `https://example.com`,

        // ALL following settings are OPTIONAL

        // Avoids sending pageview hits from custom paths
        exclude: [],

        // Delays sending pageview hits on route update (in milliseconds)
        pageTransitionDelay: 0,

        // Defines where to place the tracking script
        // boolean `true` in the head and `false` in the body
        head: false,

        // Set to true to include a gif to count non-JS users
        pixel: false,

        // Allow requests from local addresses (localhost, 192.168.0.0, etc.)
        // for testing the integration locally.
        // TIP: set up a `Additional Site` in your GoatCounter settings
        // and use its code conditionally when you `allowLocal`, example below
        allowLocal: false,

        // Override the default localStorage key more below
        localStorageKey: 'skipgc',

        // Set to boolean true to enable referrer set via URL parameters
        // Like example.com?ref=referrer.com or example.com?utm_source=referrer.com
        // Accepts a function to override the default referrer extraction
        // NOTE: No Babel! The function will be passes as is to your websites <head> section
        // So make sure the function works as intended in all browsers you want to support
        referrer: false,

        // Setting it to boolean true will clean the URL from
        // `?ref` & `?utm_` parameters before sending it to GoatCounter
        // It uses `window.history.replaceState` to clean the URL in the
        // browser address bar as well.
        // This is to prevent ref tracking ending up in your users bookmarks.
        // All parameters other than `ref` and all `utm_` will stay intact
        urlCleanup: false,
      },
    },
  ],
}

注意：如果您明确启用 referrer 和 urlCleanup 功能，它们只会增加您的页面大小。此插件使用 minimatch 来实现 exclude 选项，该选项仅在构建时使用，因此 minimatch 不会添加到您的网站。

提示：添加额外的站点以避免为测试目的干扰您的主要分析数据

// In your gatsby-config.js
// just an example, you can have your own logic how you decide what's production and what not.
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  plugins: [
    {
      resolve:`gatsby-plugin-goatcounter`,
      options: {
        code: isProduction ? 'YOUR_GOATCOUNTER_PAGE_CODE' : 'GOATCOUNTER_DEV_CODE',
        allowLocal: !isProduction,
      },
    },
  ],
}

这样您就可以在本地进行测试，而不会干扰您的统计数据 😉

手动计数

您可以使用 useGoatCounter 手动跟踪事件

import { useGoatCounter } from 'gatsby-plugin-goatcounter'

const Layout = (props) => {
  const count = useGoatCounter()

  count({
    path: 'event-name',
    event: true,
  })

  count({
    path: 'event-name',
    title: 'Event Name',
    referrer: 'example.com',
    event: true,
  })

  return <h1>GaiAma.org is saving as much rainforest as possible</h1>
}

useGoatCounter 返回一个 noop 函数，即一个什么都不做的操作函数，直到 GoatCounter.js 加载。然后组件将重新渲染并发送事件。

跳过自己的浏览

gatsby-plugin-goatcounter 会跳过浏览，如果 localStorageKey 默认是 skipgc 并且已经设置在 localStorage 中。您需要访问您-url.com/#skipgc（或者您定义的 localStorageKey）一次，或者手动将其设置为 ‘t’。为什么是 ‘t’？我基本上是复制了 GoatCounter 设置中的示例。命名事物太难了 😅

更新日志

v.0.4.0

添加对自托管 GoatCounter 实例的支持
修复 README 示例中丢失的逗号和错误的冒号

v.0.3.1

添加关于 referrer 选项的缺失说明

v.0.3.0

添加对 ?ref=referrer.com 和 ?utm_source=referrer.com 的支持
添加布尔值 urlCleanup 选项

v.0.2.0

重大更改：放弃 goatcount 转而使用 useGoatCounter hook
尚未标记为 beta，仍然未经广泛测试
我很乐意收到 bug 报告和功能请求。🙏

我计划添加一个组件来跟踪外链，类似于 gatsby-plugin-google-analytics

目前 count.js (GoatCounter 的极简 js 文件) 从官方 CDN 加载一次。最终它将被打包并内联，但我想先和 GoatCounter 讨论一下。