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

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

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

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

1. 結果：掲載できる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。

Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。

Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。

電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。

リンク