How to display Ads in a Gatsby site?

user_14372096 0
Viewed 376

Media.net Ads provided two scripts to put in head tag and body tag of the site. For head tag -

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

For Body tag -

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

i make a component like this

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

it doesn't work I didn't see any ads, in the console issues the link has been blocked by the new update of chrome SameSite cookies I don't know what to do can somebody help?

jsx gatsby reactjs
2 Answers

I put the code of the head tag in the gatsby-ssr.js it will be injected in a global context inside every page, like this:

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

Then for the code of body tag, I make a component like this

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

Then wherever you want to add the ADS just import the component like this

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

Another way, you can add the code of ADS in the html.js it works also. you can add the code of head tag in the head tag and the code of body tag you can be added to the html.js body tag or like this component above "MedianetADS", and imported wherever page you want.

user_143720960

I suggest you add your script to the html.js file not like you are doing. You need the head tag to be injected in a global context inside every page so I suggest you do it in the html.js file then you can add the body tag whenever you want. If the body script also is going to be on every page I suggest you add it also in the html.js file.

Here's the detailed way of doing this html.js documentation

user_15123100
Related