【Gatsby】MutationObserverでAdSense未配信時に非表示にする

Copy
~
    //オプション
    const options = {
      childList: true, //直接の子の変更を監視
      characterData: true, //文字の変化を監視
      characterDataOldValue: true, //属性の変化前を記録
      attributes: true, //属性の変化を監視
      subtree: true //全ての子要素を監視
    };

    // 変更検知時のコールバック関数
    const callback = (mutationsList) => {
      mutationsList.forEach((element) => {
        // 任意の処理
        console.log(element);
        console.log(element.target.id);
        console.log(element.target.className);
      });
    };

    //MutationObserverオブジェクト生成
    const obs = new MutationObserver(callback);

    //ターゲット要素の監視を開始
    //ターゲット要素をuseRefで設定
    obs.observe(sampleRef.current, options);

    // クリーンアップで監視を停止
    return () => obs.disconnect();
  }, []);
~

Copy
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import "./styles.css";
import { useState, useEffect, useRef } from "react";

export default function App() {
  // DOM要素取得のため
  const sampleRef = useRef(null);

  const [flg, setFlg] = useState(false);

  const handleClick = () => {
    setFlg((prevFlg) => !prevFlg);
  };

  useEffect(() => {
    //オプション
    const options = {
      // childList: true, //直接の子の変更を監視
      // characterData: true, //文字の変化を監視
      // characterDataOldValue: true, //属性の変化前を記録
      attributes: true, //属性の変化を監視
      // subtree: true //全ての子要素を監視
    };

    // 変更検知時のコールバック関数
    const callback = (mutationsList) => {
      mutationsList.forEach((element) => {
        // 任意の処理
        console.log(element);
        console.log(element.target.id);
        console.log(element.target.className);
      });
    };

    //インスタンス化
    const obs = new MutationObserver(callback);

    //ターゲット要素の監視を開始
    //ターゲット要素をuseRefで設定
    obs.observe(sampleRef.current, options);

    // クリーンアップで監視を停止
    return () => obs.disconnect();
  }, []);

  return (
    <div className="App">
      <h1 id="1" ref={sampleRef} css={flg ? [style1] : [style2]}>
        Hello CodeSandbox
      </h1>
      <h2>react + emotion</h2>
      <h2>MutationObserver</h2>
      <button onClick={() => handleClick()}>changeColor</button>
    </div>
  );
}

const style1 = () => [
  css`
    color: red;
  `
];

const style2 = () => [
  css`
    color: blue;
  `
];

Copy
import React, { useEffect, useRef, useState } from 'react';
import { css } from 'twin.macro';
import { isMobile } from 'react-device-detect';

const Adsense = props => {
  const { currentPath, type } = props;

  const adRef = useRef(null); // 広告要素取得
  const [dispFLg, setFlg] = useState(true); // 広告表示不フラグ

  useEffect(() => {
    if (window) {
      // mobileの場合は表示後に読み込む
      if (isMobile) {
        window.onload = function() {
          window.adsbygoogle = window.adsbygoogle || [];
          window.adsbygoogle.push({});
        };
      } else {
        window.adsbygoogle = window.adsbygoogle || [];
        window.adsbygoogle.push({});
      }

    }
  }, [currentPath]);

  // 広告が未配信の場合に非表示にする
  useEffect(() => {
    // オプション
    const options = {
      attributes: true, // 属性の変化を監視
      attributeFilter: ['data-ad-status'], // 指定した属性を監視
    };

    // 変更検知時のコールバック関数
    const callback = mutationsList => {
      mutationsList.forEach(element => {
        // 未配信（data-ad-status === "unfilled）の場合
        if (element.target.attributes['data-ad-status'].value === 'unfilled') {
          setFlg(false);
        }
      });
    };

    // インスタンス化
    const obs = new MutationObserver(callback);

    // ターゲット要素の監視を開始
    // ターゲット要素をuseRefで設定
    obs.observe(adRef.current, options);

    // クリーンアップで監視を停止
    return () => obs.disconnect();
  }, []);

  const adsence = () => {
    switch (type) {
      case 'display':
        return (
          // dispFLgがfalseの場合にunfilledでスタイルを設定する
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
        );
      case 'infeed':
        return (
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-format="fluid"
              data-ad-layout-key="xxxxxxxxxx"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );

      case 'mdx':
        return (
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-layout="in-article"
              data-ad-format="fluid"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );

      case 'Multiplex_column':
        return (
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-format="autorelaxed"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );
      case 'Multiplex_row':
        return (
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              css={[dispFLg || unfilled]}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-format="autorelaxed"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );
      case 'display_sq':
        return (
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              css={[dispFLg || unfilled]}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-slot="xxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
        );

      default:
        return (
          <div css={[dispFLg || unfilled]}>
            <ins
              ref={adRef}
              css={[dispFLg || unfilled]}
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
              data-ad-slot="xxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
        );
    }
  };

  return <div>{adsence()}</div>;
};

export default Adsense;

// 非表示にする関数（Emotionで指定）
const unfilled = () => [
  css`
    display: none;
  `,
];