Displaying Ninja AdMax in React

Introduction

The External Script Problem in SPAs

React is a type of SPA (Single Page Application) framework. One of the issues that arises in SPAs compared to traditional SSR (Server-Side Rendering) is the loading of external scripts (JavaScript), such as those for SNS or advertisements. For instance, problems frequently occur when embedding Twitter timelines or YouTube playlists, or displaying Google AdSense. This is because SPA frameworks are designed with the assumption that all scripts are under their management, while external scripts are not designed to handle HTML that changes dynamically within an SPA.

What is Ninja AdMax?

While Google AdSense dominates the ad distribution service market, other services have their own strengths. Ninja AdMax is an ad distribution service provided by Ninja Tools, Inc. Its primary advantage is that its website review process is quite lenient. AdSense is famous for its extremely strict review process, whereas AdMax allows you to place ads on basically any site(?). Furthermore, while it naturally falls short of AdSense, it still offers relatively high earnings. This is because:

It is an SSP that partners with over 30 advertising companies to maximize your site's revenue through RTB.

https://adf.shinobi.jp/r/ee692cdb60d1c59ada18f78acb4f2e49

Code

Now, here is a code example for displaying Ninja AdMax in React. This implementation assumes the use of PC/SP responsive ads and uses TypeScript.

First, the React component:

// Type for ad format
type AdmaxAdType = {
    admax_id: string; // Ad ID
    type: string; // "switch" for PC/SP responsive ads
};
// React component for PC/SP responsive ads
const AdmaxSwitch: React.FC<{ id: string }> = (props) => {
    useEffect(() => {
        // Initialize the ad list in the window object
        if (!window["admaxads"])
            window["admaxads"] = [];
        // Get the ad list
        const admaxads: AdmaxAdType[] = window["admaxads"];
        // Add if not present in the ad list
        if (!admaxads.some(ad => ad.admax_id === props.id))
            admaxads.push({
                admax_id: props.id,
                type: "switch"
            });
        // Load external JS and actually display the ad
        const tag = document.createElement('script');
        tag.src = 'https://adm.shinobi.jp/st/t.js';
        tag.async = true;
        document.body.appendChild(tag);
        // Clean up JS tag and ad info on unmount
        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" }} />
}

Where you want to display the ad, insert:

<AdmaxSwitch id="<Ad ID>" />

Conclusion

I have provided a code example for displaying Ninja AdMax in React.
It seems that using external scripts in an SPA sometimes requires reverse-engineering the JS.

References

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