Как интегрировать журнал изменений Headway в приложение gatsby?

Question

https://docs.headwayapp.co/widget

это код ниже, который я хочу вставить, я создал html. js, чтобы добавить сторонний скрипт, но не могу его исправить https://www.gatsbyjs.org/docs/custom-html/

<script>
  var HW_config = {
    selector: ".CHANGE_THIS", // CSS selector where to inject the badge
    account: "ACCOUNT_ID" // your account ID, you can find it in Settings->Widget
  };
</script>
<script async src="//cdn.headwayapp.co/widget.js"></script>

Answer 1

У вас есть несколько подходов и обходных путей для достижения этой цели. Одним из них может быть создание изолированного компонента с именем <HeadwayWidget> и его импорт на вашу страницу / компонент. Вам нужно будет добавить жизненный цикл componentDidMount, чтобы гарантировать, что ваше дерево DOM загружено. Кроме того, в Gatsby вам нужно будет проверить наличие document , поскольку в то время, когда вы запрашиваете, он может еще не быть создан.

import React, { Component } from "react";

class HeadwayWidget extends Component {
    constructor(props){
        super(props);
    }
    componentDidMount() {
      let script, config;
       if(typeof document !== undefined){
        script = document.createElement("script");
        script.async = true;
        script.src = "https://cdn.headwayapp.co/widget.js";
        document.head.appendChild(script);
        config = {
            selector: ".headway-badge",
            account: "Your_Headway_ID"
        };
        script.onload = function() {
            window.Headway.init(config)
        }
      }
    }
    render(){
        return (
            <div>
                <span className="headway-badge" id="headway-badge">
                    What's New
                </span>
            </div>
        )
    }
}

Отсутствует информация о ваших испытаниях, но в подходе, описанном выше, вы используете компонент с отслеживанием состояния. Конечно, вы можете транспилировать его в компонент без состояния, изменив хук componentDidMount на useEffect (с пустыми зависимостями, []).