Gatsby 中的外部脚本

Question

我正在尝试将 Zoho Campaign 通讯表格添加到我的 Gatsby 站点。我将代码添加到 setHeadComponents 中的 gatsby-ssr.js 但是当启动 gatsby -> 它不工作...... 我不确定为什么，因为当我在浏览器控制台中尝试代码时，它工作正常。看起来它没有加载或定义。我是 JS 和 Gatsby 的新手，所以也许你可以在这里帮助我。

这是我的代码：

setHeadComponents([
 <script 
        type="text/javascript" 
        src="https://sfcp.maillist-manage.eu/js/optin.min.js" 
        key="newsletter"
        defer={true}
    />,
    <script 
        type="text/javascript"
        key="newsletter-start"
        dangerouslySetInnerHTML={{
            __html: `
            try {
                  function startsf() {
                    setupSF('###############','ZCFORMVIEW',false,'light',false,'0');
                  }  

                  window.onload = startsf;
                }
                catch (error) {console.log(error)}
            `}}
    />,
])

Answer 1

您需要将脚本放在任何所需组件或布局的 <Helmet> 标记内例如，在 index.js 文件中，如下所示：

    import React from "react"
    import Helmet from "react-helmet"

    import Layout from "../components/layout"
    import SEO from "../components/seo"

    const IndexPage = () => (
        <Layout>
          <SEO title="Live" />
          <Helmet>
            <script src="https://sfcp.maillist-manage.eu/js/optin.min.js" type="text/javascript"/>
<script 
        type="text/javascript"
        key="newsletter-start"
        dangerouslySetInnerHTML={{
            __html: `
            try {
                  function startsf() {
                    setupSF('###############','ZCFORMVIEW',false,'light',false,'0');
                  }  

                  window.onload = startsf;
                }
                catch (error) {console.log(error)}
            `}}
    />
          </Helmet>
        </Layout>
    )

您可以查看有关 Gatsby's Helmet, and React Helmet 的更多信息，但基本上，<Helmet> 组件允许您插入一些将在编译后放置在 <head> 标记内的代码。

编辑：我已经在我的本地机器上测试过它并且它可以工作，如下截图所示：

Gatsby 中的外部脚本

External script in Gatsby

zoho

reactjs

gatsby