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

Contents

1 アクセス解析における計測URLの分散の問題
2 SEOでは行われているURL正規化
3 実装方法
4 Googleアナリティクス関連Tips

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

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

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

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

実装方法

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

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

不具合が発生したときの影響範囲が大きいので推奨はしないが、あまりに計測URLの分散問題に悩んでいる場合は実装を検討するのもありかもしれない。

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

<script>
(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');

// send pageviewする前に
// canonicalのURLを取得
var canonicalUrl;
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
  if (links[i].getAttribute('rel') == 'canonical') {
    canonicalUrl = links[i].getAttribute('href');
  }
}

// canonicalがある場合のみそれをページにsetする
if(canonicalUrl){
  var canonicalPath = canonicalUrl.substring(canonicalUrl.indexOf('/', 8), canonicalUrl.length);
  ga('set', 'page', canonicalPath);
}
ga('send', 'pageview');

(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');

// send pageviewする前に

// canonicalのURLを取得

var canonicalUrl;

var links = document.getElementsByTagName('link');

for (var i = 0; i < links.length; i++) {

if (links[i].getAttribute('rel') == 'canonical') {

canonicalUrl = links[i].getAttribute('href');

}

// canonicalがある場合のみそれをページにsetする

if(canonicalUrl){

var canonicalPath = canonicalUrl.substring(canonicalUrl.indexOf('/', 8), canonicalUrl.length);

ga('set', 'page', canonicalPath);

}

ga('send', 'pageview');

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

Googleアナリティクス関連Tips

イベント計測

ページビュー計測

canonicalをページのURLとして自動で採用する実装（計測URLの正規化）

eコマース計測

システム改修をせずにGoogleアナリティクスのeコマーストラッキングを実装する