立即迁移到 Netlify

Netlify 宣布 Gatsby Cloud 的下一次迭代。 了解更多

联系我们注册
社区插件
在 GitHub 上查看插件

gatsby-plugin-amplitude-analytics

轻松将 Amplitude Analytics 添加到您的 Gatsby 网站。自动跟踪页面浏览量和传出链接点击。

安装

yarn add gatsby-plugin-amplitude-analytics

npm install --save gatsby-plugin-amplitude-analytics

如何使用

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-amplitude-analytics`,
      options: {
        // Specify the API key for your Amplitude Project (required)
        apiKey: "YOUR_AMPLITUDE_ANALYTICS_API_KEY",
        // Puts tracking script in the head instead of the body (optional)
        head: false,
        // Prevents loading Amplitude and logging events if visitors have "Do Not Track" enabled (optional)
        respectDNT: true,
        // Avoids sending pageview hits from custom paths (optional)
        exclude: ["/preview/**", "/do-not-track/me/too/"],
        // Override the default event types (optional)
        eventTypes: {
          outboundLinkClick: 'OUTBOUND_LINK_CLICK',
          pageView: 'PAGE_VIEW',
        },
        // Amplitude JS SDK configuration options (optional)
        amplitudeConfig: {
          saveEvents: true,
          includeUtm: true,
          includeReferrer: true
        },
        // Specify NODE_ENVs in which the plugin should be loaded (optional)
        environments: ["production"],
      },
    },
  ],
}

为了方便在 Amplitude Analytics 中跟踪传出链接的点击,该插件提供了一个组件。

要使用它,只需导入它并像使用 <a> 元素一样使用它。例如

import React;
import { OutboundLink } from 'gatsby-plugin-amplitude-analytics';

export default () => {
  <div>
    <OutboundLink
      href="https://www.gatsbyjs.org/packages/gatsby-plugin-amplitude-analytics/"
    >
      Visit the Amplitude Analytics plugin page!
    </OutboundLink>
  </div>
};

“respectDNT”选项

如果启用此可选选项,Amplitude Analytics 将完全不会为已启用“请勿跟踪”的访问者加载。虽然使用 Amplitude Analytics 不一定构成跟踪,但您可能仍希望这样做以照顾到更多注重隐私的用户。

“exclude”选项

如果您需要从跟踪系统中排除任何路径,您可以将其(一个或多个)添加为glob表达式到此可选数组中。

“eventTypes”选项

要覆盖用于页面事件和传出链接点击的默认事件类型,请包含此选项。值应为具有两个键的映射:“outboundLinkClick”和“pageView”。例如

这些事件的默认值为“outbound link click”和“page view”。

“amplitudeConfig”选项

传递给 amplitude.getInstance().init() 调用的配置设置。此选项允许您启用 UTM 参数和引荐来源信息的自动收集,并更改持久性和上传行为。有关可用选项的完整列表,请参阅 https://developers.amplitude.com/#platform-specific-settings

©2025Gatsby, Inc.