【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 Adssrc/templates/blog-post.js
...
+ import Ads from "../components/ads"
...
...
+ <Ads />
...