社区插件
在 GitHub 上查看插件gatsby-plugin-fathom
一个用于为您的站点添加 Fathom 跟踪的 Gatsby 插件。
安装
npm install gatsby-plugin-fathom用法
默认情况下，此插件仅在生产模式下运行时生成输出。要测试您的跟踪代码，请运行 gatsby build && gatsby serve。
选项
| 选项 | 说明 | 默认 |
|---|---|---|
trackingUrl |
您的 Fathom 自定义域名（可选） | cdn.usefathom.com |
siteId |
Fathom 站点 ID | |
honorDnt |
遵守“请勿跟踪”请求 | false |
ignoreCanonical |
忽略 canonical 标签，使用当前 URL | false |
includedDomains |
仅包含提供的域名的跟踪 | [] |
excludedDomains |
跟踪所有域名，但排除提供的域名 | [] |
有关每个选项的更多信息，请参阅 https://usefathom.com/support/tracking-advanced。
示例
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-fathom',
options: {
// Your custom domain, defaults to `cdn.usefathom.com`
trackingUrl: 'your-fathom-instance.com',
// Unique site id
siteId: 'FATHOM_SITE_ID'
}
}
]
}使用环境变量的示例
您可能希望在不同的部署中使用不同的站点 ID。通过在环境变量中定义配置可以最好地实现这一点。值将在构建时读取，例如在 CI 期间。
# .env.production
FATHOM_SITE_ID=ABCDEF// gatsby-config.js
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
})
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-fathom',
options: {
siteId: process.env.FATHOM_SITE_ID
}
}
]
}有关更多详细信息，请参阅 https://www.gatsbyjs.org/docs/environment-variables/
目标跟踪
您可以像这样在任何组件中导入一个 hook 来跟踪目标
import { useGoal } from 'gatsby-plugin-fathom'
export default function Foo() {
// can pass true as the 2nd param in order to console log the tracked goal's ID
// useful for debugging in development
const handleGoal = useGoal('GOAL-ID')
return <button onClick={handleGoal}>Click me</button>
}由 useGoal 返回的函数也接受一个值来与 ID 一起发送。如果未设置，则默认为 0。
import { useGoal } from 'gatsby-plugin-fathom'
export default function Foo() {
const handleGoal = useGoal('GOAL-ID')
return <button onClick={() => handleGoal(100)}>Buy</button>
}