Google AdSense の登録と設定

以下に、Google AdSense の登録と設定の手順を詳しく説明します。

登録

1. Google AdSense の公式ウェブサイト<<<公式のGoogle Adsenseサイト>>>にアクセス。
2. "今すぐサインアップ" ボタンをクリックします。
3. Google アカウントでログインするか、新しいアカウントを作成します。
4. 登録プロセスに従い、必要な情報（個人情報、ウェブサイト情報など）を提供します。
5. 利用規約に同意し、登録申請を送信します。

自動広告の設定

1. AdSense アカウントにログインします。
2. ダッシュボードの左側メニューから「広告」を選択します。

3. 「広告」ページで、「新しい広告ユニットを作成」をクリックします。 4. 自動広告を設定する場合は、「サイトごと」タブを開き、自動広告をONにします。 5. 「広告設定」タブで自動広告を除外するページや広告の種類を設定します。

手動広告の設定

1. AdSense アカウントにログインします。
2. ダッシュボードの左側メニューから「広告」を選択します。
3. 「広告」ページで、「新しい広告ユニットを作成」をクリックします。
4. 「広告ユニットごと」で手動広告を選択します。

5. 広告のサイズ、タイプ、スタイルなどを選択し、カスタマイズします。 6. 設定が完了したら、「保存とコードの取得」をクリックします。 7. 提供されるコードをコピーし、後で Nuxt プロジェクトで使用します。

以上が Google AdSense の登録と設定の詳細な手順です。登録プロセスでは、Google の審査が行われ、アカウントが承認されるまで数日かかる場合があります。広告の設定については、自動広告や手動広告の選択肢がありますので、プロジェクトのニーズに合わせて適切な設定を選択してください。

環境構築

Node.jsの導入

1. Node.jsとnpmのインストール。<<<公式のNode.jsサイト>>>からダウンロードしてインストールします。npmはNode.jsに同梱されています。
2. コマンドライン（ターミナル）を開き、node -v と入力して Node.js のバージョンが表示されることを確認します。

node -v

Nuxt.jsの導入

Nuxt.js をインストールするために、コマンドラインで 'npm install -g create-nuxt-app' を実行します。

npm install -g create-nuxt-app

vue-adsenseの導入

1. プロジェクトディレクトリに移動します。cd プロジェクト名 を実行します。
2. コマンドラインで 'npm install vue-adsense' を実行して、'vue-adsense' パッケージをプロジェクトに追加します。

npm install vue-adsense

プロジェクトの作成

1. Nuxt.js のプロジェクトディレクトリを作成するために、コマンドラインで任意のディレクトリに移動します。
2. コマンドラインで 'npx create-nuxt-app' プロジェクト名 を実行します。プロジェクト名 は作成するプロジェクトの名前に置き換えます。

npx create-nuxt-app

3. インタラクティブなプロンプトが表示されるので、必要な情報を提供します。プロジェクトの構成に関する質問に回答し、必要なオプションを選択します。

環境設定

nuxt.config.js の設定

1. プロジェクトディレクトリ内にある 'nuxt.config.js' ファイルを開きます。
2. head セクション内に以下のコードを追加します:

head: {
  script: [
    {
      src: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
      async: true,
      "data-ad-client": "YOUR_ADSENSE_CLIENT_ID",
    },
  ],
},

"YOUR_ADSENSE_CLIENT_ID" の部分を、Google AdSense アカウントで取得した実際の AdSense クライアントIDに置き換えます。

ページへの広告の追加

1. 広告を表示したい Nuxt ページコンポーネントを開きます。
2. テンプレート内に以下のコードを追加します:

<template>
  <div>
    <h1>Welcome to my website</h1>
    <ins
      class="adsbygoogle"
      style="display:block"
      data-ad-client="YOUR_ADSENSE_CLIENT_ID"
      data-ad-slot="YOUR_ADSENSE_SLOT_ID"
      data-ad-format="auto"
    ></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

3. "YOUR_ADSENSE_CLIENT_ID" および "YOUR_ADSENSE_SLOT_ID" の部分を、Google AdSense アカウントで取得した実際のクライアントIDとスロットIDに置き換えます。

プロジェクトのビルドとデプロイ

プロジェクトのビルド

1. プロジェクトのルートディレクトリで、コマンドラインを開きます。
2. npm run build を実行して、Nuxt プロジェクトをビルドします。
3. ビルドが開始され、依存関係のインストール、コンパイル、バンドルなどが行われます。
4. ビルドが完了すると、dist ディレクトリ内にビルドされた静的ファイルが生成されます。

プロジェクトのデプロイ

デプロイ方法は、使用するホスティングサービスやプラットフォームによって異なります。以下に一般的なデプロイ方法の一例を示します。

1. 静的ホスティングサービスを使用する場合:

選択した静的ホスティングサービス（例: Netlify、Vercel、Firebase Hosting）にアカウントを作成し、プロジェクトをデプロイします。ホスティングサービスのインターフェースに従って、プロジェクトのディレクトリを指定し、ビルドされた静的ファイルをアップロードします。 必要に応じて独自のドメインを設定し、プロジェクトを公開します。

2. サーバーに手動でデプロイする場合:

静的ファイルがビルドされた後、生成された dist ディレクトリ内のファイルを適切なウェブサーバーにアップロードします。ウェブサーバーの設定を確認し、Nuxt.js のルーティングを適切に設定します。上記は一般的な手順の一例であり、プロジェクトの要件や環境によって異なる場合があります。選択したデプロイ方法に従って、静的ファイルを適切な場所に配置し、プロジェクトを公開してください。

以上がNuxt.js 2で作成したホームページにGoogle AdSenseを導入する手順です。ビルドされた静的ファイルをデプロイすると、広告が表示されるはずです。ただし、AdSenseの表示には時間がかかる場合がありますので、広告がすぐに表示されない場合はしばらく待つか、Google AdSenseアカウントの設定を再確認してください。