ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

【はてなブログ】AMPページから非AMPページへの移動をGoogle アナリティクスで正しく計測する方法

SPONSORED LINK

AMPページ計測のイメージ01

ガジェレポ!@gadgerepoです。こんにちわ。

2017年10月から「Accelerated Mobile Pages(以下、AMP)」に対応している当ブログ。

AMP についての説明はコチラをご覧ください。

gadgerepo.com

 

AMP 対応以降、当ブログのアクセス解析には「Google アナリティクス」を利用しているのですが、これまで必要な設定を怠っていたために、解析結果が一部正しく反映されないという問題を抱えておりました。

今回、やっと正しく設定できましたので、自身への備忘録も兼ねて記録に残しておきたいと思います。

どうぞ、お付き合いください。

同一ユーザーなのに別ユーザーになってしまう問題

 

一般的に、ユーザーが検索エンジンでキーワードを入力して検索結果からサイトを訪れ、サイト内を巡回したり離脱したりといった行動について、アクセス解析ツールはClient IDというCookieを参照して同一ユーザーかどうかを判断します。

しかし、Google 検索の検索結果に表示された AMPページの場合、ユーザーはGoogle のサーバーに保存されたデータに誘導され、そこから内部リンクに飛ぼうとするとオリジナルページに移動するため、ドメインが変わり別ユーザーとみなされます。

AMPページ計測のイメージ02

結果、同一ユーザーがサイト内を巡回しているにもかかわらず別ユーザー扱いされるので、「セッションの増加」「直帰率の上昇」「滞在時間の減少」といった、本来とは異なった解析結果になってしまうのです。

この問題を解決するため、Google アナリティクスでは『Google AMP Client ID API』というサービスを提供しています。

analytics-ja.googleblog.com

 

これは、Google のサーバー上にキャッシュされたページとオリジナルページとを互いに連携させるための機能で、AMPページと非AMPページにまたがる同一ユーザーの一連の行動を関連付けて分析することができ、正確なデータを取得することが可能となります。

それでは、Google AMP Client ID API の導入方法を解説いたします。

 

はてなブログにおける「Google AMP Client ID API 」設定方法

 

お詫びと訂正(2018.04.20)

 

先日19日にアップした「Google AMP Client ID API 」設定方法では、AMPページからの流入をカウントしない不具合が発生しておりました。

当方検証不足により皆様に御迷惑をおかけしたことをお詫びいたします。

以下、検証した上で訂正した設定方法です。

 

まず、はてなブログでは管理画面「設定」→「詳細設定」→「Google Analytics 埋め込み」で「トラッキング ID」を入力して Google アナリティクス解析を利用している方が大半だと思いますので、それを前提とした設定となります。

管理画面「設定」→「詳細設定」→「headに要素を追加」に移動、こちらの最初の方に


<script>ga('create', 'UA-XXXXX-X', 'auto', {'useAmpClientId': true});</script>

を入力。(UA-XXXXX-X部分は自身のトラッキング ID)

さらに続けて

<--AMP Client ID API-->  
<meta name="amp-google-client-id-api" content="googleanalytics">

を入力します。

続いて「Google タグマネージャ(以下、GTM)」にアクセス。

www.google.com

 

「アカウントを作成」からアカウントの設定を適宜入力。

AMPページ計測のイメージ03

 

「続行」から「コンテナの設定」へ。コンテナ名を入力し、「コンテナの使用場所」を「AMP」とし、作成をクリック。

AMPページ計測のイメージ04

 

表示される「Googleタグマネージャをインストール」ダイアログの上段 <!--AMP Analyytics--!> 以下のコードをはてなブログ管理画面「デザイン」→「スパナマーク」→「ヘッダ」→「タイトル下」の書き込み欄の一番最後に入力。

ダイアログ下段の <!--Google Tag Manager--!> のコードを管理画面「デザイン」→「スパナマーク」→「記事」の「記事上下のカスタマイズ」→「記事上」入力画面の最上段に入力します。

AMPページ計測のイメージ05

 

GTMに戻り、作成したコンテナのワークスペース、左メニューから「タグ」を選択し「新規」をクリック。

AMPページ計測のイメージ06

 

「タグの設定」から「タグタイプ」を「ユニバーサルアナリティクス」に。「トラッキング ID」はGoogle アナリティクスのトラッキング IDを設定。「トラッキングタイプ」はページビューとします。

AMPページ計測のイメージ07

 

続いて「トリガーの設定」、「トリガーの種類」をページビューとし、「このトリガーの発生場所」は「すべてのページビュー」を選択。

AMPページ計測のイメージ08

 

GTMのダッシュボード右上「公開」をクリックして設定は完了です。

 

まとめ

 

ややこしいですが、正しく設定して正確な解析ができるようになりました。
はてなブログで AMP導入の際には、ぜひご参考に。