簡単!ワードプレスAMP化したページにgoogleアナリティクスを導入する

グーグルが推奨するAMPのページ。

前回はワードプレスのプラグインを利用してのAMP化の記事を書きました。

今回はAMP化したページにアナリティクスを導入する方法です。

アナリティクスを導入する方法ですが、ワードプレスのプラグイン「AMP」を利用しています。

ワードプレスのサイトをAMP化しアナリティクスを設定する
【画面】ワードプレスのサイトをAMP化しアナリティクスを設定する
広告

AMP化とは

AMPとはAccelerated Mobile Pagesの頭文字を取ったもので、アクセレーテッド モバイル ページの略です。

これは一体何かというとモバイル専用に表示速度を速めたページという意味になります。

モバイルでグーグル検索をした時に検索結果の横に「稲妻」のようなマークがついているのを見たことはないでしょうか?

検索結果に稲妻マークはAMPページの印
【画面】検索結果に稲妻マークはAMPページの印

これはこのページがAMPに対応している、すなわち高速で表示できますということを表しています。

実際にページを表示させてみると分かりますが、AMPのページは通常の読み込みより4倍ほど早く読み込めるそうです。

ワードプレスで構成されているサイトはAMP化するプラグインを利用することで簡単にAMP化することができます。

詳しくは関連記事をご覧ください。

関連記事

インターネットの世界は日々変化しています。 近年はグーグル検索で見慣れない稲妻のマークの様なものを見かけることがあります。 これは一体なんだろうと思い調べたところ「AMP」と呼ばれる、モバイル機器のためのページということが分かり[…]

検索窓に「AMP」を入力プラグインAMPをインストール

AMP化したページでは従来のグーグルアナリティクスでは測定ができません。

今回は既にAMP化のプラグインをインストールしている状態からの解説です。またアナリティクスはグーグルを利用しています。

AMP用のアナリティクスを導入する

AMP化したページでは通常のグーグルのアナリティクスは機能しません。そこでAMP用にアナリティクスを設定する必要があります。

これもAMPのプラグインを有効化してあれば簡単に設定できます。

まずワードプレスのダッシュボードから「AMP]→「アナリティクス」を選択します。

「AMP」から「アナリティクス」を選択
【画面】「AMP」から「アナリティクス」を選択

すると下の様な画面が表示されるので、「+」をクリックします、下の画面では赤い丸でマークがしてあります。

アナリティクスのページの「+」をクリック
【画面】アナリティクスのページの「+」をクリック

すると下の様な画面が開きますので

Type:の項目に「googleanalytics」と記入します。

Type:の項目に「googleanalytics」と記入
【画面】Type:の項目に「googleanalytics」と記入

「googleanalytics」と記入すると下の空白の窓に下の様なコードが表示されます。

空白の項にコードが自動で表示される
【画面】空白の項にコードが自動で表示される

表示されるコードの中に「”👉 Provide site tracking ID here (e.g. UA-XXXXX-Y) 👈”」という表記があります。

コードの中の赤枠の部分を探す
【画面】コードの中の赤枠の部分を自分のトラッキングIDにする

この「”👉 Provide site tracking ID here (e.g. UA-XXXXX-Y) 👈”」

部分に自分のグーグルアナリティクスの

「管理」→「プロパティ設定」で表示される「トラッキングID」をコピー&ペーストします。

グーグルアナリティクスのトラッキングIDをコピーする
【画面】グーグルアナリティクスのトラッキングIDをコピーする

つまり上の画面の例だと

「”👉 Provide site tracking ID here (e.g. UA-XXXXX-Y) 👈”」

「”UA-55555515-1″」

と下の画面の様になります。

トラッキングIDをペーストしたところ
【画面】トラッキングIDをペーストしたところ

これで設定は完成です。画面更に下にある「Save changes」をクリックして保存します。

画面下方にある「Save chenges」をクリックして完了
【画面】画面下方にある「Save chenges」をクリックして完了

これでAMPページのグーグルアナリティクスの設定は完了です。

実際にテストしてみる

AMPページのアナリティクスの設定がキチンと機能しているかグーグルアナリティクスのリアルタイム→概要から確認できます。

AMPページのアドレスは通常のアドレスの最後に「/amp/」を付けたしたものになります。

アドレスにアクセスし、グーグルアナリティクスで測定できれば設定は成功です。

リアルタイムでampが測定できていれば成功
【画面】リアルタイムでampが測定できていれば成功

いかがでしたでしょうか。

今回はAMPページのグーグルアナリティクスの設定方法の解説でした。

今回は以上です。

関連記事

グーグルが推奨しているモバイル対応の高速表ページAMP。 以前の記事でワードプレスのAMP化、そして前回はAMPのページにアナリティクスを設定する方法でした。 今回はAMPのページにアドセンスを導入する方法です。 ワードプ[…]

編集するプラグインから「AMP」を選択

<関連リンク>
簡単!ザ・トールのワードプレスAMP化 ワードプレス5.5.1
お勧めのワードプレステーマ ザ・トール THE THOR
ロリポップのデーターベースSQLのバージョン5.1から5.6に変更

広告