Внешний скрипт в Гэтсби - PullRequest
Новая
       36

Внешний скрипт в Гэтсби

1 голос
/ 24 марта 2020

Я пытаюсь добавить форму бюллетеня кампании Zoho на мой сайт в Гэтсби. Я добавил код в gatsby-ssr. js внутри setHeadComponents, но при запуске gatsby -> он не работает ... Я не уверен почему, потому что, когда я пытаюсь код в консоли браузера, он работает нормально. Похоже, что он не загружен или не определен. Я новичок в JS и Гэтсби, так что, может быть, вы можете помочь мне здесь.

вот мой код: 

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)}
            `}}
    />,
])

1 Ответ

0 голосов
/ 24 марта 2020

Вам нужно поместить свои скрипты внутри тега <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>
    )

Вы можете проверить дополнительную информацию о Шлем Гэтсби и React Helmet , но в основном компонент <Helmet> позволяет вставить несколько кодов, которые будут размещены после компиляции, внутри тега <head>.

Редактировать : я протестировал его на своем локальном компьютере, и он работает, как показано на следующем снимке экрана:

Load of external scripts with status 200

...