Tengo esta página creada en Gatsby e incluyo este Script de Sharpspring en el componente Helmet y se carga a veces, pero no todo el tiempo. ¿Alguna idea de por qué sucede esto?
import React from "react" import ReactDom from "react-dom" import LayoutTemplate from "../templates/LayoutTemplate/LayoutTemplate" import { Helmet } from "react-helmet" const Preferences = () => { return ( <LayoutTemplate> <Helmet> <script async type="text/javascript" src="https://koi-3QNLLDDY3O.marketingautomation.services/client/form.js?ver=2.0.1" /> <script type="text/javascript"> {` var ss_form = {'account': 'ACCOUNT_NAME', 'formID': 'MY_FORM_ID'}; ss_form.width = '100%'; ss_form.domain = 'app-UNIQUENUMBER.marketingautomation.services'; ss_form.target_id = 'form1'; ss_form.polling = true; `} </script> </Helmet> <div id="form1"> </div> </LayoutTemplate> ) } export default PreferencesEl "a veces se carga, a veces no" se debe a la hidratación de React , lo que significa que si fuerza un renderizado (presionando F5 , por ejemplo), el componente se ve obligado a renderizarse para que se active el script de Helmet .
Si usa la navegación de Gatsby (incluso la de React porque Gatsby extiende su navegación desde React), es posible que LayoutTemplate no se vuelva a representar si no es necesario.
Si está tratando de usar un diseño persistente en su proyecto, le sugiero que use las API wrapPageElement o wrapRootElement .
Otra solución alternativa es forzar la representación de la función de secuencia de comandos en cada proceso de navegación. Esto, dependiendo de su escenario puede adaptarse a usted:
const addScript = url => { const script = document.createElement("script") script.src = url script.async = true document.body.appendChild(script) } export const onClientEntry = () => { window.onload = () => { addScript("https://koi-3QNLLDDY3O.marketingautomation.services/client/form.js?ver=2.0.1") } } Más detalles sobre la API onClientEntry : https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#onClientEntry
Luego, puede cargar el script usando un useEffect o similar, como desee.