GoogleアナリティクスでcanonicalをページのURLとして自動で採用する

アクセス解析における計測URLの分散の問題

Webサイトのページビュー計測では、同一ページのページビュー計測は1つのURLのページビューとして集約されることが望ましい。ところがutm_sourceなどのダミーパラメータ付きURLや「index.html」の有無によって本来同一ページのはずなのにURLが異なり、ページビュー数の評価が分かれてしまうことがある。あらかじめサイト構成が「1ページ＝1URL」を厳格に守ってくれていればいいのだが、必ずしもそういうわけにはいかない。実際には1ページに複数のURLが発生することも多いのである。

SEOでは行われているURL正規化

SEOではその問題を解決するためにlinkタグのrel="cannonical"属性を使うことでURLの正規化をすることができる。ところがアクセス計測では「除外パラメータ」や「デフォルトページ」の設定として解析ツールの管理画面などから設定する必要がある。それでもページの表示に影響するパラメータの並び順が入れ替わる場合など対応できない。

実装方法

SEOでは簡単に出来る計測ページURLの正規化を、そのままGoogleアナリティクスの計測ページ（URL）として使う方法をここで紹介する。canonicalのURL（正規化URL）をGoogleアナリティクスのページビューとして記録するのである。

analytics.js（ユニバーサルアナリティクスの生タグ）を使っている場合

正規化URLがあればそれを取得してga('send', 'pageview')のページとしてセットし、正規化URLがなければページのURLを採用する（デフォルトの挙動）。これをcustomTaskで実装する。

以下のタグは/headの直前（link rel="canonical" ...の後）に設置することが前提で

var customTask = function(model) {
  // canonicalを取得し、存在する場合のみそれをページにsetする
  var canonical = document.querySelector("link[rel='canonical']");
  if (canonical !== null) {
    // ドメイン名から採用する場合
    var canonicalUrl = canonical.href.replace(/^.+?\/\//, '');
    // パスのみ採用する場合
    //var canonicalUrl = canonical.href.replace(/^.+?\/\/.+?\//, '/');
    model.set('page', canonicalPath);
  }
}

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');
ga('set', 'customTask', customTask());
ga('send', 'pageview');

window.onloadのタイミングだと遅いから、/headの直前にこれを入れるのが現実的（Google推奨の設置個所）。
https://support.google.com/analytics/answer/1008080?hl=ja

GTMを使っている場合

変数にカスタムJavaScriptで以下のスクリプトを登録する。変数名はとりあえず「正規化URLを取得するカスタムタスク」とでもしておく。

function() {
  return function(model) {
    // canonicalを取得し、存在する場合のみそれをページにsetする
    var canonical = document.querySelector("link[rel='canonical']");
    if (canonical !== null) {
      // ドメイン名から採用する場合
      var canonicalUrl = canonical.href.replace(/^.+?\/\//, '');
      // パスのみ採用する場合
      //var canonicalUrl = canonical.href.replace(/^.+?\/\/.+?\//, '/');
      model.set('page', canonicalPath);
    }
  };
}

Googleアナリティクスの設定（変数またはタグの設定）で以下のフィールドを追加する。