时间戳

首页 > 解决方案 > 无法在 Gatsby 中注入第 3 方脚本

reactjs - 无法在 Gatsby 中注入第 3 方脚本

问题描述

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 来显示广告。

标签： reactjsgatsby

解决方案

经过大量研究，我发现使用 useEffect 和网上的大多数建议对于 Gatsby 来说是不必要的。要注入第 3 方脚本，需要在根目录中创建一个 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

推荐阅读