Как показывать рекламу на сайте Gatsby?

#reactjs #jsx #gatsby

#reactjs #jsx #gatsby

Вопрос:

Media.net Объявления предоставляли два скрипта для размещения тега head и тега body на сайте. Для тега head —

 <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>
  

Для тега Body —

 <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>
  )
}
  

это не работает, я не видел никакой рекламы, в проблемах с консолью ссылка заблокирована новым обновлением файлов cookie chrome SameSite Я не знаю, что делать, может кто-нибудь помочь?

Ответ №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} />
}
  

Затем, куда бы вы ни хотели добавить рекламу, просто импортируйте компонент следующим образом

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

Другим способом вы можете добавить код объявлений в html.js это тоже работает. вы можете добавить код тега head в тег head, а код тега body можно добавить в html.js основной тег или подобный этому компоненту над «MedianetADS», и импортируйте любую страницу, которую вы хотите.

Ответ №2:

Я предлагаю вам добавить свой скрипт в html.js файл не такой, как вы делаете. Вам нужно, чтобы тег head вводился в глобальном контексте внутри каждой страницы, поэтому я предлагаю вам сделать это в html.js файл, после чего вы можете добавить тег body, когда захотите. Если основной скрипт также будет на каждой странице, я предлагаю вам добавить его также в html.js досье.

Вот подробный способ сделать это html.js документация