ブログ運営 らいらい

【プラグインAMPforWP】初心者向けAMPページのアナリティクス導入方法

こんにちは、らいらいです！

昨日は運営報告記事でグーグルアナリティクスとJetpackで数字の差があることを書きました。

→【ブログ運営報告】３ヶ月目のアクセス数とPV数。１万PV達成なるか？

原因がグーグルアナリティクス側でのＡＭＰ対応済みページがカウントされていないことだったのですが、

対応するためのやり方がむずかしい！！

２時間ほど悪戦苦闘しました。

ぼくがわからなかった部分を本当の初心者でも設定できるように備忘録として残しておきます。

ぐぐった結果がこの有り様

あ…ありのまま　今　起こった事を話すぜ！

「おれは　AMPページにアナリティクスを入れようと思ったら
AMPforWPプラグイン利用時のやり方が見つからなかった」

な…　何を言っているのか　わからねーと思うが
おれも　何をしたのか　わからなかった…
頭がどうにかなりそうだった…　催眠術だとか超スピードだとか
そんなチャチなもんじゃあ　断じてねえ
もっと恐ろしいものの片鱗を　味わったぜ…

らいらい
まさにこの気分なんじゃー

このページに訪れた人も「ＡＭＰ　アナリティクス」などで検索してたどり着いていると思います。

検索して最初に出てくるグーグル公式HPでは

Googleアナリティクスでサポートされるユーザーインタラクション

<head>に次のスクリプトを追加します。

などなど。。。

初心者には何を言っているのかさっぱり！！

次に該当ページを見つけたと思ったら、プラグインが「ＡＭＰ」の場合だったり。

らいらい
ぼくが探しているのはＡＭＰforＷＰなんじゃー。

今度こそと思いきや見つけたのは、画像もない説明文章のみ。。。

コードの貼り付けなどの説明で画像が無いのは

怖い！！

もう、ただただ怖い！！！

前置きが長くなりました。

ぼくのような完全初心者でも出来るように画像付きで説明していきます。

ＡＭＰforＷＰでのグーグルアナリティクス導入方法

わかりやすさ重視で画像多めです。

１.グーグルアナリティクスのトラッキングコードを用意します。

グーグルアナリティクスの管理ページに飛びます。

左側のメニューから「管理」をクリック。

赤枠で囲んだプロパティ欄の「トラッキング情報」をクリック。

下にタブが展開するので「トラッキングコード」をクリック

トラッキングＩＤで表示されている「ＵＡ－××××××××－×」が使うトラッキングコードになります。

２.テーマの編集

ワードプレスの管理画面で左メニューバーから「外観」→「テーマの編集」をクリック

「functions.php」をクリック

注意
ストークのテーマをいじるときは必ず子テーマを導入のうえ「stork_custom」のテーマをいじってください。 

下のコードをテーマ内の一番下に貼り付けます。

トラッキングコードは１の手順で取得した「自分のコード」を入力してください。

add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
    if ( ! is_array( $analytics ) ) {
        $analytics = array();
    }

    // https://developers.google.com/analytics/devguides/collection/amp-analytics/
    $analytics['xyz-googleanalytics'] = array(
        'type' => 'googleanalytics',
        'attributes' => array(
            // 'data-credentials' => 'include',
        ),
        'config_data' => array(
            'vars' => array(
                'account' => "トラッキングコード"
            ),
            'triggers' => array(
                'trackPageview' => array(
                    'on' => 'visible',
                    'request' => 'pageview',
                ),
            ),
        ),
    );

    return $analytics;
}

こんな感じ。

これで完了！

らいらい
テーマの編集は神経を使うんじゃー

動作確認

アドレスの最後に「/amp」が付いていますね。

無事にＡＭＰサイトへのアクセスもカウントされるようになりました。

おまけ：プラグイン利用の場合

実はＡＭＰforＷＰのプラグイン自体にもアナリティクスのトラッキングコードを入力する欄があります。

最初こっちにトラッキングコードを入力して試していましたが、動作確認でいつまで経っても反映されませんでした。

やり方はワードプレスの管理画面で左メニューの「AMP」→「setting」→「analytics」を選択するだけ！

ぼくの動作環境の問題かもしれないので、先にこっちを試してみるのもいいと思いますよ。

まとめ

正直ぼくは、AMPサイトはデザインが崩れすぎて見にくいと思っているのですが、検索上位に来ているのを見ると止める勇気が出ないですね。

今後AMP対応を止めるかも含め、検討しています。

いずれにせよ、やっとアナリティクスとJetpackで数字が違いすぎる原因を解消できました。

で、AMP対応が終わってから気づきました。

さっさとプラグインを変えればよかったんじゃ・・・？

らいらい
あ・・・

RECOMMENDこちらの記事も人気です。