AMP対応させたサイトにGoogle AdSence広告を表示させる

WordPressをAMP対応させたサイトに
Google  AdSence広告を表示させる

その手順を簡単にまとめました

今回はプラグインを使ったやり方で
AMPサイトの広告表示を行っています。

必要なプラグイン

AMP

Advanvced Ads

インストールしたら「有効」にしておく

今回は
「AMP」
「Advanvced Ads」の初期設定は終わっているものとして進めます。

詳しい設定はネットで調べてください。

Google AdSence

Google AdSenceにログイン

AdSence側も初期設定が終わっているものとして進めます。

左のツリーから
「サマリ」を選択

「すべてのサイト」をクリックして次の画面を出す

広告

次の画面で
「AMPサイトにディスプレイ広告を自動的に表示」をオンにする

「ステップ1」
「ステップ2」

のコードをコピーしてメモ帳などに張り付けておく

コピーが終わったら「完了」を選択

画面が戻るので
「広告ユニットごと」を選択

画面が切り替わるので
「ディスプレイ広告」を選択
※今回はこれで設定します。

画面が変わるので
「AMPに広告を出してます見たいな名前を付けておく」
右側の設定は「お好みで設定してください」
設定が完了したら右下の「作成」をクリック

画面が切り替わり
「広告を作成しました」の画面になるので
「AMP」タブを選んでコードを表示させてください。

上のコードは必要ありません。

下の長いコードだけコピーしてください。

右下の「完了」を選択

 

Advanced Adsの設定

左ツリーから
「Advanced Ads」を選択

「新しい広告」を選択

わかりやすい「広告名」を入力し
「広告タイプ」を選択する

今回は「プレーンタイプとコード」で作業を進める

「フィールド」「AMP」を選択した際の
Google AdSenceでコピーしたコード」を張り付ける

「新しい広告」を選択

 

「ステップ1」でコピーしたコードを張り付ける

 

右側の「更新」を選択

 

左ツリーから
「Advanced Ads」を選択
「設置」を選択

</head> を選択

「3.広告またはグループを選択」

上記で作成した名前を選択する

「新しい配置を保存」を選択

 

「新しい広告」を選択

 

「ステップ2」でコピーしたコードを張り付ける

 

左ツリーから
「Advanced Ads」を選択
「設置」を選択

</body>を選択

「3.広告またはグループを選択」

上記で作成した名前を選択する

「新しい配置を保存」を選択

最後に
「Advanced Ads」を選択
「設置」を選択

下のように配置されていればOKです。

設定はこれだけ

AMP プラグインは「有効」にする

「プラグイン」から
「AMP」「有効」にしないとAMPサイトが表示されません。

「General」の設定はデフォルトのままでOK

「Analytics」の設定は
「Analyticd」を開くと
コードが記載されているので
コピーして
「UA-********-Y」を
自分のAnalyticd番号を入れるだけです。

開くと
こんなコードが書いてあります。

「Save」したら設定完了です。

新規投稿を行う

最後に
ブログを新規投稿を行う際
好きなタイミングで「Ad」を選択する。

今回は入稿する前に広告を挿入します。

別画面が出るので
作成した「AMP広告」を選択する。
私は「amp-studio-3dr」と名付けたので
それを選択します。

選択した後
「ショートコードを追加」を選択

ブログ画面にショートコードが入ります

これでAMP化したサイトに広告が表示されるようになります。

後はブログを書き綴って公開すれば
AMP対応したサイトに広告が表示されます。

AMP化されたサイトで広告が表示されるか最終確認

投稿したブログで広告が表示されるか確認

投稿した際との末尾に /amp
を入れるとAMP化されたサイトを見ることが出来ます。

<例>
https://studio-3dr.com/consider-a-video-editing-computer/amp/

 

初回は広告が表示されるまで
1時間ほど時間がかかりますが
次回からはすぐに広告が表示されます。

 

「設定作業」をし「ブログ作成」すれば
1時間は経つので
投稿後、確認するのもありです。

ブラウザのコンソール画面を表ししてください

F12キー(Windowsの場合。Macの場合はcommand+option+Iキー)を押す

コンソールにAMPのエラー表示が無ければ
広告が表示されます。

AMPのエラー表示がされている場合は
コンソールのエラーメッセージから
何が駄目なのか調べて対応してください。

 

どこか設定が間違っているので
再度見直してください。

 

ちなみに過去に投稿したブログも
ショートコードを挿入すれば
AMP化したサイトに広告を載せることが出来ます。

この手順で広告が表示されない場合は
自力で対応してください。

質問等をされても
一切の回答はしません。

私は
「Google AdSence」の内容を読んで
上記手順に辿り着いたので
他の人がどうやっているのか知りません。

以上です。

それじゃまた!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください