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>

它将寻找ID为“ 21728840”的div来显示该div的广告。我正在使用Netlify，因此将此脚本注入到头部不是问题，但是Netlify会执行此后处理。因此，在脚本加载时，由于未定义元素，因此无法找到ID，并返回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>

我不确定我可以尝试使用什么其他方法来注入脚本，并操纵ID为21728840的div来显示广告。

Answer 1

经过大量研究，我发现对于Gatsby而言，不需要使用useEffect和大多数在线建议。要注入第三方脚本，需要在根目录中创建一个gatsby-ssr.js文件。在此文件中，应该具有以下基本设置：

const React = require('react')

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

使用gatsby-ssr.js文件的所有选项都可以在这里找到：Gatsby SSR

无法在盖茨比注入第3方脚本

1 个答案: