タグ: adsense

  • [WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる –  [2020/12/23]

    [WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる – [2020/12/23]

    はじめに

    当サイトを立ち上げた頃には、もっぱらpluginの追加をすることで、サイトの機能向上に重きを置いたサイト構築を進めていました。ところが、いつもお世話になっている「ホームネットワーク研究所」のプロガーである観音寺さんから、当サイトの読み込み速度が低いことのご指摘を頂きました。それまでノーマークでした。

    その後、サイト速度を測定するツールやWebサイトを調べて、測定したところ(PageSpeed Insights by Google)、MobileとPCでそれぞれ、一桁と20~30 (%表示される)でした。自分以外のサイトも指定できるので、比較として測定してみると、レンタル・サーバーでは当然ですが、100%近い値を見ることができました。この結果と受けた衝撃から、当サイトにおけるレスポンス改善活動が始まっています。この話題は、他の記事をご覧ください。

    Cumulative Layout Shift

    CLSは、遅延表示などで、表示されているところに後から別のエレメント(element)が挿入されたりすることで、最初にあったelementがシフト(shift)する現象を表しています。この現象が多いページは、ユーザーエクスペリエンスが不良とされます。Gooleは、検索スコアとして、2021/03以降から追加すると発表しています。すでに、PageSpeed Insightの測定結果には、「CLS」という項目の測定値を見ることができます。

    確かに、一度表示された画面が、次の瞬間からめくりめくようにして、あるelementが挿入されて既存elementが邪魔にされるように、下く繰り下げられる様子は、閲覧者としては、気持ちの良いものではありません。

    当サイトでは、WordPressの広告プラグインとして、「Advanced Ads Pro」をインストールしています。このプラグイン・サイトに英語ですが、CLSに関して解説があります。

    CLSに関する情報

    1)

    Cumulative Layout Shift (CLS) and Ads – Advanced Ads プラグイン –

    https://wpadvancedads.us10.list-manage.com/track/click?u=d761f7e9c05eb20567b500ddb&id=558703c702&e=615e72e98f

    2)

    Cumulative Layout Shift (CLS) – web dev –

    https://web.dev/cls/

    ページのレスポンスを測定するツールサイト

    解説には、Googleの「PageSpeed Insights」や「Google Search Console」、Chromeブラウザのプラグインである、「Lighthouse」の紹介があります。当サイトでは、blogメンテ用の端末としてiPadを使用しているため、フル機能のChromeを使用できないので、iPadからWeb siteの「PageSpeed Insights」を多用しています。その他、当サイトで評価したことのある測定サイトも含め以下にまとめました。

    • PageSpeed Insights
    • Google Search Console
    • Lighthouse
    • GTmetrix.com
    • EZOIC

    以下には、その他、ページ・レスポンスを計測できるサイトを紹介している記事ですが、そちらもご参考にしてください。

    編集履歴

    2020/12/23 Mr.HARIKIRI
    2021/03/13 追記(CLSについての情報)

    関連記事

  • [WordPress] Advanced Ads Pro (有料版)プラグイン – Goolge adsense やAmazon Affilicateなどの広告を表示させる (表示されない場合の対処法) [2020/05/03]

    [WordPress] Advanced Ads Pro (有料版)プラグイン – Goolge adsense やAmazon Affilicateなどの広告を表示させる (表示されない場合の対処法) [2020/05/03]

    はじめに

    blogを始めてからしばらくすると、広告を載せてみたくなります。それはblogするための張り合いであり、自分のblogの評価の結果であるため、誰しも興味があるはずです。当サイトでは、Synology NASであるDS920+にWordPressを導入してblogを発信しています。レンタルサーバーよりは非力であることや、ネットワークの転送速度も1Gと低いため、苦労も多いことは否(いな)めません。広告が表示されない不具合もその一つです。

    世界にはいろいろなアフィリエイト・プログラムがありますが、Google AdsenseとAmazon Affilicateは、比較的手を出しやすく、当サイトもこの2つについて広告表示の設定をしています。

    マニュアルにより1ページ毎に広告コードを埋め込んで表示設定することも可能ですが、phpを少しは知っている必要があります。当サイトでは、最初から広告表示の専用プラグインを導入することは長い目で見た時、効率的であると考えました。2, 3の広告プラグインを試し、結果的には、Advanced Ads Pro (有料版)を導入しています。html文の見出しであるH2やH3、・・・などのを標的として広告を表示させたり、何個かの広告をグループにして、2段表示などのカラム組み表示も可能です。また、GoogleのAMPページ対応のページへの広告表示も可能であったり、add onプラグインにより色々な機能を追加することができます。

    基本的には、Advanced Ads Proを導入し、追加的にGoogleのAMPページへの対応としてResponsive add onなどを、適宜、追加して好きな広告表示の機能を使うことができます。Amazon Affilicateの場合、Google Adsenseとは異なり、高度な広告表示はしていません。具体的には、価格表示対応の場合、html文である商品のiframeの広告コードを、Advanced Ads Proの設定にコピペしたり、単純なリンクとしてのurlをコピペしたりすれば広告表示が可能となります。Google Adsenseの場合は、広告内容は、Googleが自動で広告コードを、そのページにふさわしい内容のもので送る仕組みになっています。この対応としてResponsive add onが必要です。当サイトでは、AMPページに対応しているので、少なくとも、Advanced Ads ProとResponsiveの2つが必要でした。なお、Amazonの広告には、Responsive add onは必要ありません。

    Amazonの広告

    WordPressの投稿/ページの中に、Amazonの広告を表示させる方法をまとめました。Amazonの広告を掲載してそれに関連する収入を得る場合、広告収入というよりは、コンバージョン(商品が購入されて支払いが完了したとき)により収入が得られるコンバージョン型課金です。

    「インプレッション」の意味とは?増やす方法についても解説 — LeadPlus —
    インプレッション課金型とクリック課金型及びコンバージョン課金型について理解できる解説がある

    https://www.leadplus.net/blog/impression.html

    Amazonから提供させる広告形式

    Amazon Affiliateでは、以下に示したようにAmazonから複数形式の広告コードが提供されています。そのフォーマットは、大きく3つ (html, iframe及びJavaScript)あります。

    html形式では、画像を使って画像広告を作ることができます。画像広告の作成は、Advanced Ads Proを使えば簡単に作れて、作った広告はデータベースに保管されて管理されるので、使い回しも簡単にできます。

    Amazonアソシエイトには、数種類の広告形式が提供されています (2020/3現在)
    1) 商品リンク (html形式、AMPサイトで表示可能)
    2) バナーリング (iframe形式、AMPサイトで表示不可能)
    3) Mobile popover (JavaScript形式、基本的にはAMPサイトで表示不可)
    4) テキストリンク (html形式、AMPサイトで表示可能、カテゴリー、サブカテゴリーとリンクに用いるテキストを指定して、html文を取得する)

    https://affiliate.amazon.co.jp/home

    AMPに対応する形式は限られています(表1)。しかし、広告プラグインであるAdvanced Ads Pro(有料版)とアドオンを使えば、自動的にAMP対応にしてくれます。当サイトでは、有料版を2020/03から使用して、あれやこれやと試行錯誤にて設定を検討しています。この記事では、Advanced Adsを使用しない場合で、マニュアル設定する場合を解説しています。

    表1. 広告形態とAMP対応/非対応

    広告形態AMP非AMP
    リンク形式(http://)
    JavaScript1)
    Mobile Popover2)
    iframe3)

    AMPページで広告を表示

    1) JavaScriptコードの埋め込み

    Amazonから提供させる広告コードのうちJavaScriptコードについては、AMPページに埋め込んで表示させる方法はありません.

    2) Mobile Popoverの埋め込み

    この形式は、JavaScriptなので、前述のJavaScriptコードの埋め込みと同様に、今現在対応策は不明です。試行錯誤注ですが、表示できる設定方法はわかっていません。

    3) iframeの埋め込み

    概要

    iframeを使用するには、Header領域にAMP専用の宣言が必要です。もしも、Advanced Ads Proを導入していれば、このプラグインで処理してくれるので、宣言の対応は必要ありません。

    Headerにコードを挿入できるプラグインで、その宣言のコードを挿入した上で、広告コードをページに埋め込みます。その際、AMP用のiframeであることを示すコード(amp-iframe)とする必要があります。

    作業

    • headerに宣言
      • 以下のコードを埋め込む
      • プラグインは、Header and Footerを使用する
      • <script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>
    • 広告コードをページに埋め込む
      • <amp-iframe>…</amp-iframe>の名式で、コードを埋め込む。コードは「…」に。
    amp-iframe width="500"
      height="281"
      title="Netflix House of Cards branding: The Stack"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      allowfullscreen
      frameborder="0"
      src="https://player.vimeo.com/video/140261016">
    </amp-iframe>

    まとめ

    Amazonの広告で提供されているコードの種類について、説明し、実際の埋め込み方についてまとめました。

    現在、2020/05/03で新型コロナウイルスによる騒動の中です。03/19からAmazonの商品リンクを広告しています。残念ながら、一度も購入していただけた実績は、ありませんが、アクセス数の問題でしょう。まあ、人生なにごとも経験といいますし、コツコツとアクセス数を上げる案を考え/実行のサイクルを回しましょう。

    広告が表示されない時の対策

    広告が表示されない場合があります。特に、Google広告の場合です。AMP化した場合に起こりやすくなるようです。AMPでは、AMPに対応したコードに変換して、それを代替表示させています。もしも、AMPで問題が起こった場合は、AMPの作業の中で、ポストを「忘れる」処理をして、再度、元の記事の編集画面から更新することで、AMPに対応したコード変換をさせると、ほとんどの場合、問題が改善できます。それでも、改善できない場合もあります。その場合は、キャッシュの構築関連に問題があることを疑います。「キャッシュ」のフラッシュをしてみます。

    それでも、Google広告が表示されない場合もあります。Googleの広告では、「Responsive」の設定が可能なので、その設定(Googleサイトでの設定、Advance Adsプラグインでの設定など)では、広告コードは、Googleサイドに存在していることの理解が必要です。更に、広告が存在するGoogleサイドから広告コードが、自分のblogサイドに届いている場合と、届いていない場合にケースを分類することができます。

    もしも、以上の対応である「忘れる」、「キャッシュ」のフラッシュ、でも、Googleの広告が表示されない場合は、自分サイドに広告コードが届いていないことを疑います。対策は、以下の通りです。

    • ブラウザで、該当ページを表示される
    • Google広告の表示が出ないことを確認する
    • しばらくの時間(数分間)、ページの上下をスクロールしたり、静観したりする。
    • (広告コードの転送が行われていると推測しています)
    • 最後に、ブラウザの再読み込みをクリック。表示されると思います。
    • それと、注意ですが、決して自分で広告をクリックしないようにしてください。そのクリックの数は、少なけばミスとして許容されているようです。でも、多すぎると、Google Adsenseから「出禁」を食います(by 経験者)。

    編集履歴

    2020/03/19 はりきり(Mr)
    2020/03/21 追記 (Amazonアソシエイト)
    2020/05/03 追記 (購入実績についての記載)
    2021/03/10 追記 (はじめに)
    2021/04/11 追記(広告が表示されない時の対策)
  • [WordPress] サイトのスピードを測る – EZOIC

    [WordPress] サイトのスピードを測る – EZOIC

    サイトのスピード

    サイトのスピード測定は、「GoogleのPageSpeed Insights」が有名ですが、以下のサイト(EZOIC)でも、サイトアドレスを入力して測るだけならFreeで測定できます。

    このサイトは、WordPressの広告プラグイン「Advanced Ads」の有料版を購入したのですが、不具合の相談をしている過程で、そのスタッフさんから教えてもらいました。聴きなれない英語圏のサイトですが、変なサイトでは無いと思います。

    試しに一度どうでしょうか?

    Ezoic

    以下のリンクは、スピードテストに直接行けます

    https://svc.ezoic.com/speed-up-site/?_ga=2.178934820.1631995068.1583508394-1097835698.1583508394

    関連

    2020/03/07 はりきり(Mr)

  • [WordPress] Google Adsense導入 – 必要な手順とセッティング – 広告プラグインを選ぶ – 運用の実際  [2021/01/04]

    [WordPress] Google Adsense導入 – 必要な手順とセッティング – 広告プラグインを選ぶ – 運用の実際 [2021/01/04]

    はじめに

    広告に対するクリックは、ブログの評価であると思っています。ブログの評価のバロメータなのです。これを頼りにしてコンテンツ内容の充実化に励むことができます。

    この記事では、Google Adsneseの申請と、その後の広告プラグインを使用した設定、および、高速化を含めて解説しています。最後に、Google Adsenseの運用結果についても示しているので、筆者にとってのコンテンツ内容の充実化のモチベーションになっているのか、分かってもらえると思っています。

    手順の概要の概要

    1. Google Adsense申請 (サブディレクトリは不可)
    2. Emailで承認を受ける (Google Adsenseのリンクが貼ってある)
    3. Google Adsenseにアクセスして管理
    4. 広告の挿入方法
      • マニュアルでの広告を挿入
        • AdsenseコードをGoogle Adsenseサイトからコピーし、プラグインに貼り付ける(プラグインで必要な場合がある)
      • WordPressにAdsenseプラグインによる広告の挿入
        1. Ad Inserter – Ad Manager & AdSense Ads
        2. Advanced Ads
          • 十分な確認は撮れていませんが、バージョンアップした現在のAdvanced Ads Proを使用すれば、Google Adsenseの連携設定をすることで、Google Adsneseコードの設定は必要ないと思います。
    5. スピード改善
      • AMPプラグイの導入
      • JavaScript、CSSおよびhtmlの最適化プラグインの導入
      • cacheプラグインの導入

    Adsenseプラグインは、以下の2つが候補

    導入当初、以下の2つのプラグインで広告表示をテストしていました。現在は、ドイツ製の「Advanced Ads」の有料版 (Pro)を使用しています。

    Advanced Ads Proは、有料版だけあって、マニュアルで広告を配置する運用よりは、はるかに楽ができますし、自動的に広告を配置する機能には重宝しています。広告の事を広く知るための学費(約¥8,500/年)と思えば安いものと思っています。

    1. Ad Inserter – Ad Manager & AdSense Ads

    2. Advanced Ads

    結局、広告プラグインを導入するか、マニュアルで広告を配置するか、模索した結果、「Advanced Ads」の有料版を導入しました。2021/03で1年になります。1年間の購入費として約¥8,500ですが、更新するかどうは、Pros/Consを踏まえて、今後、要検討項目にしています。

    スピード改善

    以下の項目について、当サイトの別の記事を参考にしてください。

    1. Autoptimize プラグイン
    2. cache プラグイン
    3. AMP プラグイン

    レスポンス改善関連の記事

    [用語] PSI; PageSpeed Insights [WordPress] [2022/09/04]

    [用語] PSI; PageSpeed Insights [WordPress] [2022/09/04] はコメントを受け付けていません

    [WordPress] AMP プラングインの運用 – DS920+のシステムメモリ(4GB)を8GBに増設すると一括検証可能数は、デフォルト「8」から「> 41」に増加 [2022/02/06]

    [WordPress] AMP プラングインの運用 – DS920+のシステムメモリ(4GB)を8GBに増設すると一括検証可能数は、デフォルト「8」から「> 41」に増加 [2022/02/06] はコメントを受け付けていません

    [WP-Plugin] WP-Optimizeのキャッシュ機能はW3 Total Cacheに変更 [2021/10/25]

    [WP-Plugin] WP-Optimizeのキャッシュ機能はW3 Total Cacheに変更 [2021/10/25] はコメントを受け付けていません

    [WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16]

    [WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16] はコメントを受け付けていません

    [WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン-「WP Super Cache」で再構成した [2021/11/05]

    [WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン-「WP Super Cache」で再構成した [2021/11/05] はコメントを受け付けていません

    [WordPress] 「AMP」対応奮闘記 – プラグインAMPはVer.2.20になったけれど。[2022/01/05]

    [WordPress] 「AMP」対応奮闘記 – プラグインAMPはVer.2.20になったけれど。[2022/01/05] はコメントを受け付けていません

    [WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – [2020/09/11]

    [WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – [2020/09/11] はコメントを受け付けていません

    [WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) [2020/05/03]

    [WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) [2020/05/03] はコメントを受け付けていません

    [WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07]

    [WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07] はコメントを受け付けていません

    [用語] AMP ; Accelerated Mobile Pages

    [用語] AMP ; Accelerated Mobile Pages はコメントを受け付けていません

    [WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]

    [WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10] はコメントを受け付けていません

    [WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る [2020/09/11]

    [WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る [2020/09/11] はコメントを受け付けていません

    [WordPress] WP-Optimizer プラグイン [2020/09/24]

    [WordPress] WP-Optimizer プラグイン [2020/09/24] はコメントを受け付けていません

    [WordPress] Lazy Load Optimize プラグイン

    [WordPress] Lazy Load Optimize プラグイン はコメントを受け付けていません

    AMP

    AMPは、モバイルに特化したページ表示の高速化技術とルールです。AMPプラグインを導入して、サイトのAMP化が可能です。

    AMP

    Google Adsenseの実際

    Google Adsenseの管理画面は以下の通りです。1年弱の結果からまとめてみました。広告のクリックがない場合でも、広告の表示数に応じて支払いがありました。表示100広告あたり¥1程度でした。この規定もおそらくGoogleの規定に記載があるものと思いますが、あまり読んだことがないので理解していません。滅多にありませんが、クリックが1つあると、桁が上がり数十円の支払いがありました。支払いの累積は、表示されているので確認できるものの、¥8,000を越えないと支払いが無いため、まだ支払われた経験がありません。そのため現状では、本当に支払いがあるかは実のところよく分かりません。今後、¥8,000を超えて、振り込まれた際に確認できると期待しています。

    所得税?

    全くの杞憂ですが、副業の位置付けなら、年間20万円を超える場合には、事業所得や雑収入として経費とともに確定申告が必要のようですsource

    編集履歴

    2020/02/16 Mr. Harikiri
    2021/01/04 追記 (Google Adsenseの実際、所得税)
  • [WordPress] Google AdSense登録の手順[2020/08/24]

    [WordPress] Google AdSense登録の手順[2020/08/24]

    Google AdSenseの手順概略

    1. Google Adsenseに行く
      1. サイトアドレスを入力して登録
      2. サブディレクトリは使えない
      3. もしも、サブディレクトリを使っていた場合、Redirectするプラグインで対処しなければならない。以下の別記事も参照してください。
    2. Adsenseコードのコピー
      1. Adsenseコードをコピーして、サイトのHeadと/headの間に貼り付ける指示がでるので、コピーする
      2. このページは後からチェックしなかればならないので、そのままにしておきく
    3. WordPressの設定
      1. 自サイトのWordPressには、Advanced Adsプラグインをインストールしておく
      2. その他のAdsプラグインは、当サイトではうまく設定できませんでした。
    4. Adsenseコードのペースト
      1. Advanced AdsにAdsenseコードをペースト
    5. Google Adsenseに戻る
      1. コピーしたことをチェックする
      2. すとる即座にサイトを見つけたことを返してくる
    6. Google Adsenseページ内での設定
      1. 以上の操作で、広告の準備ができた状態となっている。
      2. 広告ページを開く
      3. 自動広告がオフになっているので、オンにする。そのために鉛筆マークをクリック
      4. 広告の仕方や体裁を設定できるので、希望する項目の設定を行い、適用する
      5. 正常に適用されるが、反映されるまで1時間程度かかると表示される

    当サイトでは、2020/02/09に申請が通りました。それまでには、以下のような作業を経てようやくの承認取得でした。

    1. サイトは、サブディレクトリが許されないため、WordPressのプラグインとして、Redirectプラグインを追加
    2. WordPressのダッシュボードでサイトアドレスを変更
    3. さらに、有料プラグインのアクティベーションは、サイトアドレスに付与されているので、再アクティベーション。英語圏のプラグインでは、英語でのリクエスをする必要がでできます。

    2020/02/15の朝、Adsenseを確認すると、47円の収益が計上されていました。記念すべき日です。

    ですが、これはぬか喜びです。テストやら何やらで、自分でクリックしたりしたもの、その他の理由により、一定期間毎にノーカウントとなってリセットされるようです。

    その後

    以下に記載した30日のペナルティを受けて、4月から安定稼働に入り、ある程度収益が上がってくると、支払先の住所確認(PIN)が掲示されました。その後、2週間程度で郵便がマレーシアから届きました。封書を開けるとPIN番号が記載されていましので、Google AdSenseからPINを入力して確認を完了させました。

    30日のペナルティー

    広告プラグインは、Advanced Adsプラグインを使っています。プラグインの設定とGoogle AdSenseページでの設定を、あれやこれやとやっていく中、ある日、オーナーによる無効なクリックがあったとして、Google Adsenseからemailの通知が来ました。

    おそらく、表示がでなかったりした時、表示が出ていない空のスペースを、勢い余って連打しことが原因ではないかと思います。当サイトでは、AMP対応と広告プラグイン対応の2つの組み合わせで調整作業を試行錯誤していたためです。

    30日間のペナルティーをもらい、広告表示が出来なくなりました。

    皆さんもGoogle AdSenseにチッャレンジする時は、あまり熱くならず・冷静に・慎重に・時間をかけて、取り組んでいただいた方が、時間短縮になるとおもいます。

    私は、30日間の2020/04/02まで出禁でした。

    編集履歴
    2020/02/10 Mr.HARIKIR
    2020/08/24 追記 (Google AdSenseの支払い先住所のPIN確認)
  • [WordPress] アフィリエイト/グールグル・アドセンス – アドセンス狩り [2019/11/11]

    [WordPress] アフィリエイト/グールグル・アドセンス – アドセンス狩り [2019/11/11]

    アフィリエイト

    アフィリエイトは、Web上の広告システム。登録サイトも色々あるらしい。登録申請が必要。

    Google AdSense

    Googleの広告システム。こちらも申請が必要です。

    とある気になる記事では、異常な回数のクリックを検出すると、Googleがクリックアカウントを無効にする措置がとられると。

    この機能を悪用して、他人のblogの広告に対して多数のクリックを行う、「Adsense狩り」なるものがあるらしい。このサイトを参照のこと。

    GoogleアナリティクスとGoogle アドセンスは連携しておくべきとのこと。

    2019/11/11 はりきり(Mr)