如何在 nextjs 应用程序中添加 LinkedIn Insight 标签答案

【问题标题】：How to add LinkedIn Insight tag in nextjs application如何在 nextjs 应用程序中添加 LinkedIn Insight 标签
【发布时间】：2022-08-12 19:24:34
【问题描述】：

在 nextjs 应用程序上放置 LinkedIn 洞察代码的位置。

我尝试将脚本添加到 next/script 提供的标签内的 _app.jsx

这是LinkedIn网站提供的脚本

<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>

这是我在 Script 标签中实现的代码：

    <Script
        strategy=\"afterInteractive\"
        dangerouslySetInnerHTML={{
        __html: `
            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);
            (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);
            <noscript>
                <img height=\"1\" width=\"1\" style=\"display:none;\" alt=\"\" src=\"https://px.ads.linkedin.com/collect/?pid=3689532&fmt=gif\" />
            </noscript>
`
}}
/>

删除type=\"text/javascript\"; 行并单独添加<noscript> 标签。

标签： reactjs next.js web-deployment linkedin

【解决方案1】：

// Add to the _document.js file in the pages folder
<Html>
    <Head />
    <body>
      <Main />
      <NextScript />
      {/* linkedIn Tag Script */}
      <script>
        {`
        _linkedin_partner_id = "93XXXX";
        window._linkedin_data_partner_ids = 
        window._linkedin_data_partner_ids || [];                             
       window._linkedin_data_partner_ids.push(_linkedin_partner_id);
        (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>
    </body>
  </Html>

【讨论】：