\

Blazor Wasm PWA ウェブアプリにGoogleアドセンス広告を掲載できるか?

Blazor wasm は、C#のウェブアプリ構築フレームワークです。

razorページで画面を構築していきますが、ページ内にJavaScriptを直接記述できないなど、制約がいくつかあります。

この記事では、Blazor WasmウェブアプリにGoogleアドセンス広告を掲載できるか、検証した結果を説明します。

1. 結果:掲載できる

実際にGoogleアドセンスを掲載したBlazor Wasmウェブアプリは以下になります。

※広告箇所を黒塗りしています。

このウェブアプリは、色々なフォントで表示される「2」が、どのフォントなのか当てるクイズアプリです。

Blazor wasm を使用して開発しています。

この画像のようにアンカー広告が表示できることを確認しました。

※広告箇所を黒塗りしています。

2. モバイルだけでなく、PCでも表示できる

PCから広告を表示させてみた結果が以下になります。

※広告箇所を黒塗りしています。

アンカー広告は、表示サイズによって、モバイルだけでなくPCでも表示が可能です。

3. 「広告掲載の自動化」で表示できる

どのように設定したかというと、Googleアドセンス画面の「広告掲載の自動化」から掲載を行いました。

一部、JavaScriptをページ内に設置する必要がありますが、これは、razorページではなく、wwwrootのindex.htmlに記載しています。

こうすることで、Blazor wasm ウェブアプリ内の全ページに広告を掲載することが可能です。

4. 注意事項①:ページ内広告が表示されると、画面構成が崩れる可能性がある

「広告掲載の自動化」設定では、ページ内広告の表示/非表示を選択できます。

Blazor wasmウェブアプリでも、ページ内広告を表示できることを確認しましたが、文字や画像の上に広告が配置されてしまいました。

よって、「ページ内広告」はおすすめできません。

5. 注意事項②:全画面広告が表示されると、画面遷移に失敗する可能性がある

「広告掲載の自動化」設定では、全画面広告の表示/非表示も選択できます。

検証したウェブアプリでは、AWS Cloudfrontで公開していますが、全画面広告の右上の「×」で広告を閉じると、画面遷移に失敗し、「Access Denied」となりました。

これは、Blazor wasm側の問題ではなく、AWS側の可能性もあります。もう少し詳しく検証する必要がありますが、全画面広告を掲載する際には注意が必要です。

6. 最後に

エンジニアにとって、収入源の確保は重要な項目の1つです。生活費の足しになるだけでなく、モチベーションにも繋がります。

広告を掲載する場合は、十分に検証した上でリリースしましょう。

コメントシステムを導入しました!コメント頂けると嬉しすぎて、光の速さで返信します(●´ω`●)

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱