開発しているWebサービスで、ついに広告を導入してみた。
審査が通ったのですぐできるかと思ったら以外に大変だったので、その時の備忘録。

サイトを登録するときにやったこと

アカウント登録とか利用規約とか以外はこんな感じ。

robots.txtを配置
ads.txtを配置
SearchConsoleへ登録
Analyticsアカウントから、Adsenseアカウントをリンク

ある程度アクセスがないとだめっぽい。

google-adsense-moduleの使い方

Nuxtだとgoogle-adsense-moduleという便利なのがあるのでそれを使う。

インストール

まずはインストール。

$ npm i google-adsense-module

nuxt.config.ts

nuxt.config.tsにモジュールと設定を追加

// nuxt.config.ts
{
  modules: [
    ['@nuxtjs/google-adsense']
  ],

 'google-adsense': {
    id: 'ca-pub-#########'
  }
}

広告コンポーネントを配置する

adsbygoogleコンポーネントがあるので、それを使う。

最低限だとこんな感じ。

<!-- components/AdDisplay.vue -->
<template>
  <div class="has-text-centered">
    <adsbygoogle ad-slot="YOUR_AD_SLOT" :ad-style="adStyle" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class AdDisplay extends Vue {
  private get adStyle() {
    return {
      display: "block",
    };
  }
}
</script>

<style lang="scss">
.has-text-centered {
  text-align: center;
}
</style>

inlineでstyleが書き換えられる。。

ここではまる。。

広告を読み込むと、一部のdivなどに、
style="height: auto !important; min-height: 0 !important;"
などが追加される。。そのせいで、全体のレイアウトが崩れ。。

フォーラムを見てると同じような人がいて、ワークアラウンドが載ってた。
・Adsense injecting style tag into my page (in chrome) - AdSense Community

とりあえずは、これで対処。。

<!-- layout/default.vue -->
<template>
  <!-- この#main-containerにstyleが書き換えられる...-->
  <div id="main-container">
    <section>
      <nuxt />
    </section>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class DefaultLayout extends Vue {
  private observer: MutationObserver | null = null;

  mounted() {
    // マウント時に#main-containerを監視するように設定
    if (process.browser) {
      if (!!this.observer) this.observer.disconnect();

      // 対象の要素を取得
      const wrapper = document.getElementById("main-container");
      if (!wrapper) return;
      
      // styleのheightとminHeightを空にするCallbackで初期化
      this.observer = new MutationObserver(function(mutations, observer) {
        wrapper.style.height = "";
        wrapper.style.minHeight = "";
      });
      // 監視の開始。オプションで属性のstyleのみを対象にする
      this.observer.observe(wrapper, {
        attributes: true,
        attributeFilter: ["style"]
      });
    }
  }

  beforeDestroy() {
    // destroy前に監視を終了する
    if (!!this.observer) this.observer.disconnect();
  }
}
</script>

以上!! 広告は審査も大変だけど、表示するのも意外に大変。。(´・ω・｀)

NuxtでAdSense広告を表示するためにやったこと