Cuando intento agregar un script en el cuerpo de Gatsby, agregué el siguiente código en el archivo llamado gatsby-ssr.js
const React = require("react") exports.onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script type="text/javascript"> {` (function() { var envolveChatWidgetScript = document.createElement('script'); envolveChatWidgetScript.setAttribute('data-wg-publisher', '222222'); envolveChatWidgetScript.setAttribute('data-wg-campaign', '333333'); envolveChatWidgetScript.setAttribute('src', 'https://widget.envolvetech.com/static/js/app.js'); envolveChatWidgetScript.setAttribute('data-identifier', 'my_identifier'); envolveChatWidgetScript.setAttribute('data-backend', 'https://bot-dot-envolvetech-001.appspot.com'); document.body.appendChild(envolveChatWidgetScript); })(); `} </script> ]); };pero luego, de alguna manera, lo que realmente está en el marcado es esto
<script type="text/javascript"> (function() { var envolveChatWidgetScript = document.createElement('script'); envolveChatWidgetScript.setAttribute('data-wg-publisher', '222222'); envolveChatWidgetScript.setAttribute('data-wg-campaign', '3333333'); envolveChatWidgetScript.setAttribute('src', 'https://widget.envolvetech.com/static/js/app.js'); envolveChatWidgetScript.setAttribute('data-identifier', 'my_identifier#x27;); envolveChatWidgetScript.setAttribute('data-backend', 'https://bot-dot-envolvetech-001.appspot.com'); document.body.appendChild(envolveChatWidgetScript); })(); </script>¿Alguna idea de por qué se traduce a eso?
¿Has intentado personalizar el html.js ?
Correr:
cp .cache/default-html.js src/html.js O copie manualmente el default-html.js (colocado dentro de .cache ) a /src
Y coloque su guión allí.
Cuando Gatsby construye su sitio si hay un html.js dentro de /src , lo usará como modelo para su sitio
En html.js, verá todos los postBodyComponents , onPreRenderHTML y otras API de personalización. Sin embargo, en este caso, insertará el script sin procesar en lugar de permitir que Gatsby lo analice.
Después de leer algunos hilos de GH, descubrí que agregar la secuencia de comandos usando DangerlySetInnerHTML realmente funciona https://github.com/gatsbyjs/gatsby/issues/11108
const React = require("react") exports.onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script dangerouslySetInnerHTML={{ __html:` (function() { var envolveChatWidgetScript = document.createElement("script"); envolveChatWidgetScript.setAttribute("data-wg-publisher", "222222"); envolveChatWidgetScript.setAttribute("data-wg-campaign", "333333"); envolveChatWidgetScript.setAttribute("src","https://widget.envolvetech.com/static/js/app.js"); envolveChatWidgetScript.setAttribute("data-identifier", "my_identifier"); envolveChatWidgetScript.setAttribute("data-backend", "https://bot-dot-envolvetech-001.appspot.com"); document.body.appendChild(envolveChatWidgetScript); })(); ` }} />, ]); };