1. HOME
  2. 開発・ブログ運営
  3. HTML/CSS
  4. AMP ページに Google Analytics のトラッキングコードを追加してアクセス数を記録する
2013年11月30日
Nexus 5 (Android4.4)でブログ記事を書いてみ ...
2016年07月14日
curl で WEB レスポンスヘッダ と リクエストヘッダの ...
2012年11月19日
Facebook の「いいね」ボタンとかの文字化けを直す方法 ...
2012年02月12日
フッターのレイアウトが崩れてちゃんと表示されない(泣) ...
2014年09月19日
ref=canonical 属性はむやみに付けない方がよいみた ...
2016年07月29日
AMP ページに Google Analytics のトラッキ ...

AMP ページに Google Analytics のトラッキングコードを追加してアクセス数を記録する

Google Analytics の公式ドキュメント「Adding Analytics to your AMP pages」を見ながら、先日、追加した AMP ページに Google Analytics タグを追加してみました。

Google Analytics では AMP ページの、

1. ページビュートラッキング
2. イベントトラッキング
3. ソーシャルトラッキング

が行えますが、AMP ページでは限られたタグやコードしか使用できないという制限があるため、通常のトラッキングコードを設置するだけでは動きません。ここでは AMP 用のトラッキングコードを設置してアクセス解析ができるようにしてみます。


ページビュートラッキングコードの設置手順

手順はシンプルで、

1. custom-element=”amp-analytics” の追加
2. AMP 用のトラッキングコードの追加

をするだけです。

custom-element=”amp-analytics” の追加

全ての AMP ページの <head> タグ内に、


を追加します。この Script タグは AMP JS Library よりも前に追加する必要があるようです。

私は WordPress で AMP プラグインで AMP ページを生成しているので、/wp-contents/plugins/amp/template/single.php の中の viewport 設定の直後に追加してみました。


トラッキングコードの追加

あとはトラッキングコードを <body> タグの中に追加するだけです。<body> の中であればどこでも良いのですが、<body> タグを閉じる直前に追加した方がページ表示速度が速いので <body> タグを閉じる直前に追加しました。

トラッキングコードは、以下の AMP ページ専用のものとなりますのでご注意を。


UA-XXXXXX-Y の部分は、自身のトラッキングコードに置き換えてください。トラッキングコードは Google Analytics の「管理」ページ内の「プロパティ」>「トラッキング情報」>「トラッキングコード」の中で確認することができます。

以上で、AMP ページへの Analytics タグの追加は完了です。


まとめ

特に難しいこともなく、簡単にトラッキングコードを追加することができました。AMP ページを作成したら忘れずにトラッキングコードを追加しておきましょう。

でわでわ。








この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.