Reactで忍者AdMaxを表示する

はじめに

SPAにおける外部スクリプト問題

ReactはSPA（シングルページアプリケーション）フレームワークの一種です。従来のSSR（サーバーサイドレンダリング）に対してSPAで問題となることの一つが、SNSや広告など外部スクリプト(JavaScript)の読み込みです。例えば、TwitterのタイムラインやYouTubeの再生リストを埋め込んだり、Google AdSenseを表示したりする際に不具合が生じやすいです。なぜなら、SPAフレームワークでは全てのスクリプトを管理下に置くことが想定され、また外部スクリプトはHTMLがSPAで動的に変化することを想定していないからです。

忍者AdMaxとは

広告配信サービスにおいてはGoogle AdSense一強といった状況ですが、他サービスに強みがないわけではありません。忍者AdMaxは忍者ツールズ株式会社が提供する広告配信サービスです。なんと言ってもその強みはWebサイトの審査が寛大なことです。AdSenseの審査は非常に厳しいことで有名ですが、AdMaxでは基本的にどんなサイトでも(?)広告を掲載できます。それでいて（もちろんAdSenseには劣りますが）割と高い単価が望めます。なぜなら

30社以上の広告会社と連携し、RTBを通じてあなたのサイトの収益を最大化するSSP

だからです。
https://adf.shinobi.jp/r/ee692cdb60d1c59ada18f78acb4f2e49

コード

では、Reactで忍者AdMaxを表示するコード例を示します。広告はPC/SP切替広告だけ想定しています。TypeScriptを使っています。

まずはReactコンポーネントです。

// 広告タイプの型
type AdmaxAdType = {
    admax_id: string; // 広告ID
    type: string; // PC/SP切替広告なら"switch"
};
// PC/SP切替広告のReactコンポーネント
const AdmaxSwitch: React.FC<{ id: string }> = (props) => {
    useEffect(() => {
        // windowオブジェクトの広告リストを初期化
        if (!window["admaxads"])
            window["admaxads"] = [];
        // 広告リストを取得
        const admaxads: AdmaxAdType[] = window["admaxads"];
        // 広告リストになかったら追加
        if (!admaxads.some(ad => ad.admax_id === props.id))
            admaxads.push({
                admax_id: props.id,
                type: "switch"
            });
        // 外部JSを読み込んで広告リストを実際に表示
        const tag = document.createElement('script');
        tag.src = 'https://adm.shinobi.jp/st/t.js';
        tag.async = true;
        document.body.appendChild(tag);
        // アンマウント時にJSタグと広告情報を削除
        return () => {
            document.body.removeChild(tag);
            admaxads.splice(admaxads.findIndex(ad =>
                ad.admax_id === props.id), 1);
            window["__admax_tag__"] = undefined;
        }
    }, []);
    return <div
        className="admax-switch"
        data-admax-id={props.id}
        style={{ display: "inline-block" }} />
}

広告を表示したい場所には

<AdmaxSwitch id="<広告のID>" />

を挿入します。

おわりに

Reactで忍者AdMaxを表示するコード例を示しました。
外部スクリプトをSPAで使うにはJSをリバースエンジニアリングすることも必要なようです。

参考文献

https://qiita.com/qrusadorz/items/14972b6e069feaf777a9