Firebaseを使ってアプリの作成をしています。業務としてVue.jsを覚える必要があったので、勉強をyかねてアプリを作成しています。Adsenseで広告を表示したいと思っていたのですが、以外に苦労したので備忘録として実際に広告が表示されるまでの流れを残してこうと思います。飲み会や仕事など会話のきっかけになる雑談ネタをランダムで表示します。Adsenseにログインして「サイト」からサイトの追加を選択してアプリケーションのURLを追加します。画像は承認完了してから作成したので、承認完了と表示されていますが、最初は承認準備を進めている内容のメッセージが表示されます。Adsenseの審査に通らず苦戦しました。私の場合、下記の項目をサイトに反映することで承認が通りましたので、なかなか承認が通らずに苦戦している方は参考にしてみてください。consoleでサイトマップの更新を行う、エラーが出ていないか確認する大体上記のポイントを見直すことで承認が通りました。承認を通すためにデザインを変えたりとか地味に苦戦しました、、、、ただ、どのポイントで承認OKになったのかはわからないので、上記全てをクリアしている場合でも必ずしも承認が通るとは限りません。Adsenseの審査が通ったら広告ユニットを作成します。作成の手順はここでは割愛しますが、サイトに表示したい広告のタイプを選択するだけなので特に難しいことはないかと思います。ここで作成した広告ユニットをVueのアプリケーション内に表示するようにします。Vueのプロジェクトにプラグインを登録こちらの記事を参考にVueのプロジェクトにAdSenseを表示するためのプラグインをインストールします。LLC-通常のウェブサイトですと広告ユニットのコードをHTML上に埋め込むだけでOKなのですが、Vue.jsで作成したSPAなどの場合はそういうわけにはいかないケースもあります。CLIを使ったプロジェクトで、AdSense広告を表示させるまでの流れをまとめていきます。designsupply-web.com上記の記事にも書いてありますが、先程作った広告ユニットの情報をadsenseタグの中に埋め込みます。こんな感じのテンプレートを作っておきました。上記のテンプレートをアプリに組み込んでも広告がでない場合、表示するエリアが無い可能性があります。広告が表示される予定の画面を開いてChromeデベロッパー・ツールでエラーが出ていないか確認すると良いでしょう。私の場合は先程のテンプレート自体に表示領域を表示するような作りにしました。15px;}</style>cssで画像表示のエリアを指定しています上記のコンポーネントをアプリに組み込んで画像が表示されるか確認してみてください。今まではほとんどユーザーアクセスがない時間帯が多かったので、適当な時間に好き勝手に更新していたのですが、少ないながらも色々な時間に記事を読んでいただける方が増えてきたので、ローカル環境でサイトデザインを変更しようと思い作業することにしました。Scalaの勉強をするにあたってPlayframework2.6を使用してWebアプリケーションを新規作成してみることにしました。※本記事は2018年9月29日に投稿した「一人でWEBアプリ開発をやってみる」を再編集したものになります。そんな願いを叶えてくれるサイト「ideone」というサイトがあります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Reserved.タイトルとURLをコピーしました。