AdSenseの広告が含まれたReactコンポーネントをレスポンシブに非表示にしたい
問題
AdSenseではレスポンシブ広告ユニット以外でdisplay: none等を利用して広告ユニットが見えなくなるようにしてはいけない。[1]
よってメディアクエリを使ってdisplay: noneで広告を含んだReactコンポーネントの表示・非表示をコントロールするやり方はやってはいけないことになる。
解決方法
いい感じのブログ記事を見つけた[2]のでそこでおすすめされていたreact-socks[3]というライブラリの実装を確認してみた。
ウィンドウがresizeされる毎に幅をいい感じに取得してくれている[4][5]ことが分かった。
これならdisplay: noneを使わなくても広告ユニットを含んだコンポーネントを非表示にできる。
追記
development環境だとエラーなく動くのに、なぜかproduction環境ではimportするだけでエラーを吐くようになってしまう。 普通にreact-responsiveを使うことにした。
参考
[2] hackernoon.com
[3] github.com
