高木のブログ

【Gatsbyブログ】i-mobileの広告を表示する

2021/07/03

広告タグの改変は禁止されているので自己責任でお願いします

Gatsby(React)にi-mobileの広告を貼ろうとしたけど、発行されたタグをそのまま貼るだけではエラーになった

とりあえず動くコンポーネントを作って表示した
もし参考にする人は自己責任でよろしく

発行されたタグ

<div id="im-abcd123456789dfghijklmnop">
  <script async src="https://imp-adedge.i-mobile.co.jp/script/v1/spot.js"></script>
  <script>(window.adsbyimobile=window.adsbyimobile||[]).push({pid:12345,mid:78910,asid:1234567,type:"banner",display:"inline",elementid:"im-abcd123456789dfghijklmnop"})</script>
</div>

とりあえず動いたコンポーネント

src/components/ads.js
import React, { useEffect } from "react"

const Ads = () => {
  useEffect(() => {
    if (process.env.NODE_ENV !== "development") {
      const tag = document.createElement("script");
      tag.src = "https://imp-adedge.i-mobile.co.jp/script/v1/spot.js";
      tag.async = true;
      document.body.appendChild(tag);

      (window.adsbyimobile = window.adsbyimobile || []).push(
        {
          pid: 12345,
          mid: 78910,
          asid: 1234567,
          type: "banner",
          display: "inline",
          elementid: "im-abcd123456789dfghijklmnop"
        }
      )

      document.body.removeChild(tag);
    }
  }, [])

  return (
    <div id="im-abcd123456789dfghijklmnop"></div>
  )
}

export default Ads
src/templates/blog-post.js
  ...
+ import Ads from "../components/ads"
  ...

  ...
+ <Ads />
  ...

参考


Written by ytkg, Twitter, GitHub

Pixela