アフィリエイト

AFFINGER5をamp化してアドセンスを表示させる方法

AFFINGER5amp化してアドセンスを表示させる方法をお伝えします。

 

サイト全体をamp化することにより、スマホでの表示速度が劇的に向上します

 

しかしamp化したときにgoogleアドセンスの広告が表示されなくなる問題があったので、いろいろ調べてみました。

 

収益に直結する問題のため、これから順を追って説明しますので早急に改善することをオススメします

では、まいりましょう!

 

【AFFINGER5をamp化してアドセンスを表示】googleアドセンスからコードを取得

長々話しません(笑)

やり方です。

まずgoogleアドセンスへ行き次の手順でコードを取得してください。

→ Googleアドセンス

① メニューから「広告」をクリック

② 「広告ユニットごと」タブをクリック

③ 「ディスプレイ広告」をクリック

④ 「広告ユニットの名前を入力」のところで「AMPディスプレイ広告」など適当な名前を入れます。

⑤ 右側にある広告サイズで「レスポンシブ」を選ぶ

⑥ 「作成」をクリック

⑦ 「AMP」タブをクリックしてすぐ下の「コードをコピー」をクリック

 

1つ目のコードをワードプレスへ張り付け

⑧ ワードプレスに戻り、「外観」→「ウィジェット」をクリック。

⑨ 画面左側にある「00_STINGERカスタムHTML」をクリックし「広告-Googleアドセンスのスマホ用」をチェック→「保存」します。

⑩ そうすると画面右側に下のようなコード入力画面が出るので1の横で先ほどのコードを張り付けます。

⑪ 「タイトルを出力しない」にチェックし「保存」→「完了」。

これで1つ目のコードの貼り付けは終了しました。

 

2つ目のコードをアドセンスからコピーする

 

⑫ もう一度googleアドセンスに戻り、先ほどコピーしたコードの下にもう少し長めのコードが記載されているのでコピーします。

 

2つ目のコードをワードプレスで張り付ける

 

⑬ 次にワードプレスに戻り「外観」→「テーマエディター」をクリック。

⑭ 画面右側にある選択欄で「WING-AFFINGER5]を選んで「選択」をクリック。(childではありません)

⑮ テーマファイルがずらっと出るので「テーマヘッダー」をクリック。

⑯ 左に出るコード欄の「head」の下に先ほどのコードを張り付けます。(画像参照)

⑰ ずっと下の方にある「ファイルを更新」をクリック。

 

記事の広告を表示したいところにタグを張り付ける

 

⑱ これで準備は完了です。記事に行き、広告を表示させたい位置で「タグ」→「その他のパーツ」→「アドセンス」をクリック。

⑲ 

スポンサーリンク

のタグが張り付けられます。

 

amp設定できているか確認

 

⑳ 記事をamp表示させて、広告が出ているか確認してください。

以上です。

 

あとがき

 

余分な文章をカットしているので、逆に分かりにくかったらごめんなさい。

私はこれで収入が10倍になりました。(3円→30円)w

お役に立てれば幸いです。

 

2022年1月追記

実はAFFINGERのamp化には、いろいろ制限があり、設定するとAFFINGERの機能が利用できなくなるケースがあります。

文章などのアニメーション機能は使えません。

他にもいろいろありますので、設定される方は自己責任でお願いします。

 

 

ブログの閲覧数と収入で、こんな勘違いをしていませんか?

あなたはブログを書いていて、閲覧数が上がれば比例して収入が上がると思っていませんか? 実は私も必死に閲覧数を増やそうと、記事を量産していました。   googleアドセンスの収入は増えたよう ...

続きを見る

 

 

このホームページではアフィリエイトやワードプレスについての情報をお届けしています。

よければ他の記事も読んでみてくださいね。

→ ホームへ戻る

\ 評価おねがいします /

  いいね↓   ↓いまいち

  • この記事を書いた人
  • 最新記事

hikey

このサイトでは50歳にして会社を辞め個人事業主として独立していくまでの過程をブログにて紹介していきます。基本はアフィリエイトに関する記事を掲載しますが、ワードプレスに関する記事も載せていきます。情報商材を購入しての感想なんかも書いていきます。

-アフィリエイト
-, ,