Невозможно внедрить сторонние скрипты в Gatsby

Question

Требуется ввести следующий код в заголовок для медийных объявлений Sovrn:

<script type="application/javascript">var googletag=googletag||{};googletag.cmd=googletag.cmd||[];googletag.cmd.push(function(){googletag.pubads().disableInitialLoad()});</script><script type="application/javascript" src="//ap.lijit.com/www/headerauction/headersuite.min.js?configId=XXXX"></script>

Он ищет div с ID = "21728840" для отображения рекламы для этого div. Я использую Netlify, поэтому вставка этого скрипта в голову не является проблемой, но Netlify выполняет эту пост-обработку. Следовательно, к моменту загрузки скрипта он не может найти идентификатор, так как элемент не определен, и возвращает ошибку 403. Я просмотрел множество предложений и попытался использовать useEffect в файле, в котором размещено объявление:

export const BlogIndexTemplate = ({ posts, title...
...
useEffect(() => {
    var googletag = googletag || {}
    googletag.cmd = googletag.cmd || []
    googletag.cmd.push(function() {
      googletag.pubads().disableInitialLoad()
    })
    const script = document.createElement('script')
    script.async = true
    script.src =
      '//ap.lijit.com/www/headerauction/headersuite.min.js?configId=XXXX'
    document.head.appendChild(script)
  }, [])
...
{!!posts.length && (
              <section className="section">
                <div className="container">
                  <PostSection posts={filteredPosts} />
                </div>
              </section>
            )}

Контейнер рекламы расположен в PostSection так:

class PostSection extends React.Component {
...
<div className="sidebar-sticky-container">
                  <div className="ad-skyscraper-container sticky-widget">
                    <div id="21728840"></div>

I Я не уверен, какой другой подход я мог бы попробовать внедрить скрипт и манипулировать div с ID 21728840 для отображения рекламы.

Answer 1

После долгих исследований я обнаружил, что использование useEffect и большинство предложений в Интернете не нужны для Gatsby. Чтобы внедрить сторонний скрипт, необходимо создать файл gatsby-ssr. js в каталоге root. Внутри этого файла должно быть следующее для базовой настройки c:

const React = require('react')

exports.onRenderBody = function({
  setHeadComponents,
  setPreBodyComponents
}) {
setHeadComponents([
    <script
      dangerouslySetInnerHTML={{whateveryouneedtoset}}>
])
setPreBodyComponents([
    <script
      dangerouslySetInnerHTML={{whateveryouneedtoset}}>
])
}

Все параметры для использования файла gatsby-ssr. js можно найти здесь: Gatsby SSR