如何在Next.js项目中安装配置LinkedIn Insight Tag

你说的没错，放在_document.tsx是完全正确的方案，刚好符合LinkedIn官方的全局部署要求。

官方建议："请将下方的Insight Tag代码粘贴到您网站的全局页脚中，位置恰好位于闭合HTML标签的上方。"

官方提供的代码片段如下：

<script type="text/javascript">
_linkedin_partner_id = "93XXXX";
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);
</script><script type="text/javascript">
(function(l) {
if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
window.lintrk.q=[]}
var s = document.getElementsByTagName("script")[0];
var b = document.createElement("script");
b.type = "text/javascript";b.async = true;
b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
s.parentNode.insertBefore(b, s);})(window.lintrk);
</script>
<noscript>
<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=933188&fmt=gif" />
</noscript>

Pages Router 部署步骤 #

如果你用的是Next.js的Pages Router架构，直接操作pages/_document.tsx文件即可：

• 打开pages/_document.tsx文件，在默认结构的</body>结束标签之后、</Html>结束标签之前粘贴上述代码即可，修改后的文件示例如下：

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
      <!-- 此处粘贴LinkedIn Insight Tag代码 -->
      <script type="text/javascript">
      _linkedin_partner_id = "替换为你的实际ID";
      window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
      window._linkedin_data_partner_ids.push(_linkedin_partner_id);
      </script><script type="text/javascript">
      (function(l) {
      if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
      window.lintrk.q=[]}
      var s = document.getElementsByTagName("script")[0];
      var b = document.createElement("script");
      b.type = "text/javascript";b.async = true;
      b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
      s.parentNode.insertBefore(b, s);})(window.lintrk);
      </script>
      <noscript>
      <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=替换为你的实际pid&fmt=gif" />
      </noscript>
    </Html>
  )
}

App Router 部署步骤 #

如果你用的是Next.js 13及以上版本的App Router架构，无需创建_document.tsx，直接修改根布局文件即可：

• 打开app/layout.tsx文件，同样在</html>结束标签之前粘贴上述代码即可。

注意事项 #

部署前记得把代码中的93XXXX、noscript标签中的pid参数替换为LinkedIn后台分配给你的对应值，避免数据上报到错误账号。

内容的提问来源于stack exchange，提问作者Alan