Next.jsやGatsbyで開発したWebサイトに忍者Admaxの広告を設置する

個人開発サイトに忍者Admaxの広告を設置してみた

個人で開発している開発者向けのオンライツールの Web サイトに広告を設置してみた。

• Online Tools

本当は Google Adsense を配置したかったけど、サイトのURLがサブドメインということもあり審査が通りやすい忍者Admaxの広告を配置することにした。Next.js や Gatsby など React ベースのサイトに広告を配置するにはスクリプトを貼り付けるだけではダメだったのでそれぞれの実装方法を紹介する(コードサンプルは Tailwind を利用することを前提としています)。

Next.jsの場合

ポイント

• 広告のスクリプトによって window オブジェクトに admaxads プロパティが生やされるので、 useEffect でアクセスできるように declare global を使って admaxads を追加する
• useRouter を使ってパスを取得する。useEffect の引数に取得したパスをセットしURLが変わるごとに広告が変わるようにする

import clsx from 'clsx'
import React from 'react'
import { useRouter } from 'next/router'

export type Props = React.ComponentProps<'div'>

type AdmaxAdType = {
  admax_id: string // 広告ID
  type: string // PC/SP切替広告なら"switch"
}

declare global {
  var admaxads: AdmaxAdType[]
}

export const AdsCard = (props: Props) => {
  const adMaxId = 'xxx忍者AdmaxIDxxx'
  // 親コンポーネントでスタイルを設定できるようにする
  const { className, children, ...newProps } = props

  const { asPath } = useRouter()

  React.useEffect(() => {
    // 広告配信用のタグを挿入する
    const tag = document.createElement('script')
    tag.src = 'https://adm.shinobi.jp/st/t.js'
    tag.async = true
    document.body.appendChild(tag)

    try {
      ;(globalThis.admaxads = window.admaxads || []).push({
        admax_id: adMaxId,
        type: 'switch'
      })
    } catch (error) {
      console.error(error)
    }
  }, [asPath])

  // スタイルはTailwindを使うことを前提としている
  return (
    <div
      key={asPath}
      className={clsx('admax-switch inline-block', className)}
      data-admax-id={adMaxId}
      {...newProps}
    ></div>
  )
}

Gatsbyの場合

useRouter の代わりに useLocation を使ってパスを取得する。URLが変わるごとに広告が変わる。

import clsx from 'clsx'
import React from 'react'
import { useLocation } from '@reach/router'

export type Props = React.ComponentProps<'div'>

type AdmaxAdType = {
  admax_id: string // 広告ID
  type: string // PC/SP切替広告なら"switch"
}

declare global {
  var admaxads: AdmaxAdType[]
}

export const AdsCard = (props: Props) => {
  const adMaxId = 'xxx忍者AdmaxIDxxx'
  const { className, children, ...newProps } = props

  const { pathname } = useLocation()

  React.useEffect(() => {
    // 広告配信用のタグを挿入する
    const tag = document.createElement('script')
    tag.src = 'https://adm.shinobi.jp/st/t.js'
    tag.async = true
    document.body.appendChild(tag)

    try {
      ;(globalThis.admaxads = window.admaxads || []).push({
        admax_id: adMaxId,
        type: 'switch'
      })
    } catch (error) {
      console.error(error)
    }
  }, [pathname])

  return (
    <div
      key={pathname}
      className={clsx('admax-switch inline-block', className)}
      data-admax-id={adMaxId}
      {...newProps}
    ></div>
  )
}

コンポーネントの使い方

こんな感じ

import type { PageProps } from 'gatsby'
import { AdsCard } from '../components'

const HogePage: React.FC<PageProps> = () => {
  return (
    <>
      <main>
       ..省略
      </main>
      <AdsCard className="mt-4" />
    </>
  )
}

export default HogePage

参考

• Google AdSense を Next.js 製ブログに入れるのに一手間かかる話