使用 Next.js 设置 Segment 时遇到问题

Question

我一直在尝试将 Segment 与 Next.js 集成，但我不确定为什么将 Shippet 插入 Head 不起作用。由于某种原因，Next.js 不理解在头部添加

<script>

的语法，如下所示：

export default function Head() {
  return (
    <>
      <title></title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <link rel="icon" href="/favicon.ico" />
      <script>
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="WRITE_KEY";;analytics.SNIPPET_VERSION="4.15.3";
  analytics.load("WRITE_KEY");
  analytics.page();
  }}();
</script>
    </>
  )
}

这给了我错误。

我尝试使用 this example with @segment/snippet 来加载 Segment，但它似乎也没有按预期工作。

我错过了什么吗？

Answer 1

您只需将“WRITE_KEY”替换为您的密钥即可

Answer 2

Segment.io 团队发布了一个带有 nextjs 集成的示例 [1]

import { AnalyticsBrowser } from '@segment/analytics-next'

const AnalyticsContext = React.createContext<AnalyticsBrowser>(undefined!);

type Props = {
  writeKey: string;
  children: React.ReactNode;
};
export const AnalyticsProvider = ({ children, writeKey }: Props) => {
  const analytics = React.useMemo(
    () => AnalyticsBrowser.load({ writeKey }),
    [writeKey]
  );
  return (
    <AnalyticsContext.Provider value={analytics}>
      {children}
    </AnalyticsContext.Provider>
  );
};

// Create an analytics hook that we can use with other components.
export const useAnalytics = () => {
  const result = React.useContext(AnalyticsContext);
  if (!result) {
    throw new Error("Context used outside of its Provider!");
  }
  return result;
};

// use the context we just created...
const TrackButton = () => {
  const analytics = useAnalytics()
  return (
    <button onClick={() => analytics.track('hello world')}>
      Track!
    </button>
  )
}

const App = () => {
  return (
    <AnalyticsProvider writeKey='<YOUR_WRITE_KEY>'>
      <TrackButton />
    </AnalyticsProvider>
  )

我将其与我的分段键集成在一起，效果非常好。

[1] https://github.com/segmentio/analytics-next/tree/master/packages/browser

---

编辑： 看来他们把钩子版本留给了更面向对象的东西[2]

应该像之前的v一样工作 [2] https://github.com/segmentio/analytics-next/tree/master/packages/browser#nextjs