如何在 Gatsby 网站中展示广告？答案

【问题标题】：How to display Ads in a Gatsby site?如何在 Gatsby 网站中展示广告？
【发布时间】：2021-01-19 14:31:25
【问题描述】：

Media.net Ads 提供了两个脚本来放置网站的 head 标签和 body 标签。对于头部标签 -

<script type="text/javascript">
window._mNHandle = window._mNHandle || {};
window._mNHandle.queue = window._mNHandle.queue || [];
medianet_versionId = "XXXXXXX";
</script>
<script src="//contextual.media.net/dmedianet.js?cid=XXXXXXX" async="async"></script>

对于身体标签 -

<div id="XXXXXXXXX">
<script type="text/javascript">
try {
window._mNHandle.queue.push(function (){
window._mNDetails.loadTag("XXXXXXXXX", "300x250", "XXXXXXXX");
});
}
catch (error) {}
</script>
</div>

我做了一个这样的组件

import React from "react"
import { Helmet } from "react-helmet"

const Ads = () => {
  return (
    <div className="adsDiv">
       <Helmet>
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `
window._mNHandle = window._mNHandle || {};
window._mNHandle.queue = window._mNHandle.queue || [];
medianet_versionId = "XXXXXX";
            `,
          }}
        />
        <script
          src="https://contextual.media.net/dmedianet.js?cid=XXXXXXXX"
          async="async"
        />
      </Helmet>
      <div style={{ textAlign: "center" }} id="XXXXXXXX">
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `
try {
window._mNHandle.queue.push(function (){window._mNDetails.loadTag("XXXXXXXX", "300x250", "XXXXXXXX");});
}
catch (error) {};`,
          }}
        />
      </div>
    </div>
  )
}

它不起作用我没有看到任何广告，在控制台问题中，链接已被 Chrome SameSite cookie 的新更新阻止我不知道该怎么做有人可以帮忙吗？

【问题讨论】：

标签： reactjs jsx gatsby

【解决方案1】：

我将 head 标签的代码放在 gatsby-ssr.js 中，它将被注入到每个页面内的全局上下文中，如下所示：

const React = require("react")

const HeadComponents = [
  <script
    key="1-head-ads"
    dangerouslySetInnerHTML={{
      __html: `
            window._mNHandle = window._mNHandle || {};
            window._mNHandle.queue = window._mNHandle.queue || [];
            medianet_versionId = "XXXXXXX";
            `,
    }}
  />,
  <script
    key="1-http-ads"
    src="//contextual.media.net/dmedianet.js?cid=XXXXXXXX"
    async
  />,
]

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents)
}

那么对于body标签的代码，我做一个这样的组件

function MedianetADS({ divId, size }) {
  React.useEffect(() => {
    if (typeof window !== "undefined") {
      try {
        window._mNHandle.queue.push(function () {
          window._mNDetails.loadTag(divId, size, divId)
        })
      } catch (error) {}
    }
  }, [divId, size])

  return <div id={divId} />
}

然后无论你想在哪里添加 ADS，只需像这样导入组件

 <MedianetTag size="728x90" divId="XXXXXXXX" />

另一种方式，你可以在 html.js 中添加 ADS 的代码，它也可以工作。你可以在head标签中添加head标签的代码，body标签的代码你可以添加到html.js body标签中或者像“MedianetADS”上面的这个组件，然后导入到你想要的任何页面。

【讨论】：

【解决方案2】：

我建议您将脚本添加到 html.js 文件中，而不是像您正在做的那样。您需要在每个页面内的全局上下文中注入 head 标签，因此我建议您在 html.js 文件中执行此操作，然后您可以随时添加 body 标签。如果正文脚本也将出现在每个页面上，我建议您也将其添加到 html.js 文件中。

这里是执行此操作的详细方法html.js documentation

【讨论】：