如何在头盔标签gastby中加载脚本文件

Question

我想使用Helmet标记使用Gatsby.js加载一些脚本文件，脚本文件如下所示：

<script type="text/javascript">
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 1500,
  });
  gtag('set', 'ads_data_redaction', true);
</script>

这是我的SEO组件：

 <Helmet>
      <title>{metaTitle}</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="EN" type="text/javascript"></script>
      <script async src="https://www.googletagmanager.com/gtag/js?id=321012880"></script>
     <script type="text/javascript">
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 1500,
  });
  gtag('set', 'ads_data_redaction', true);
</script>
    </Helmet>

当我直接在Helmet标签中使用这个标签时，这会导致一个错误，更好的说，脚本代码不会被读取，知道如何解决这个问题吗？或者，除了在盖茨比中加载脚本文件之外，还有其他选择吗？谢谢

Answer 1

您可以使用盖茨比的脚本API：https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/

然后，您的示例代码将如下所示：

import { Script } from "gatsby"

<Script id="gtag-config">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('consent', 'default', {
      ad_storage: 'denied',
      analytics_storage: 'denied',
      wait_for_update: 1500,
    });
    gtag('set', 'ads_data_redaction', true);
  `}
</Script>

然后在你想要的任何反应组件中使用这个片段。请注意，您需要为内联脚本向组件中添加一个id (参见https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/#inline-scripts)

Answer 2

在头盔3.0.0中你可以使用innerHTML

<Helmet 
  script={[{ 
    type: 'text/javascript', 
    innerHTML: `
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('consent', 'default', {
        ad_storage: 'denied',
        analytics_storage: 'denied',
        wait_for_update: 1500,
      });
      gtag('set', 'ads_data_redaction', true);
    `
  }]} 
/>