パラメータ付きURLへのアクセスをGoogleアナリティクスで適切にトラッキングしつつURLからパラメータを除去する方法

広告を出稿する時など、アクセス元を区別するためにURLに対してパラメータを付与してあげることがあります。Googleが提供しているURL生成ツールを使えば、簡単にパラメータを付与することが可能で、アクセス解析をする時にそれぞれの流入を簡単に区別することができます。

ですが、URLにパラメータを付与すると、以下のようにアドレスが長くなってしまいます。

https://techmemo.biz/?utm_source=Google&utm_medium=banner&utm_term=testkey&utm_content=testcont&utm_campaign=testcam

URLまで気にしている訪問者はそこまで多くないと思うのですが、サイトを運営する側としてはずっと気になっていました。

URLを短くすることはできないかと調べてみたところ、トラッキングは適切に行いつつ、パラメータを取り除いてURLをスッキリさせる方法が、Web担当者Forumさんで解説されていました。

パラメータ付きURLへのアクセスをGoogleアナリティクスで適切にトラッキングしつつ、URLからパラメータを除去する方法

以下のように、通常のトラッキングコードの中に、パラメータを取り除くためのコードを追加してあげます。

<script>

 // まずは、Googleアナリティクスのユニバーサルアナリティクスの標準実装
 (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','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-XXXXXX-XX', 'impress.co.jp'); // 自社用に変えること
 ga('require', 'displayfeatures');
 ga('send', 'pageview');
 // Googleアナリティクスのユニバーサルアナリティクスの標準実装ここまで


 // ここ以下が、トラッキングパラメータの処理
 // gaのキューに処理を突っ込む
 // （pageviewとかのURLはcreate時に確定してる）
 ga(function(){
 // hisotry APIをサポートしているブラウザでのみ実行
 if (window.history && window.history.replaceState) {

 do_replaceState = false; // replaceStateするかどうかのフラグ
 var url,query_string,hash,matches,domain,path; // 各種処理変数
 var queries = []; // replaceState時に使うquery string
 // utm系のリスト（+FBのやつも）
 var utms = {
 utm_source : true, utm_medium : true,
 utm_term : true, utm_content : true,
 utm_campaign : true, fb_action_ids : true,
 fb_action_types : true, fb_source : true,
 action_object_map : true, action_type_map: true,
 action_ref_map: true
 };

 // document.locationを使わずに自力でURL解析
 url = document.location.toString();
 if (matches = url.match(/(.+?)#(.+)/)) {
 url=matches[1]; hash=matches[2];
 }
 if (matches = url.match(/(.+?)\?(.+)/)) {
 url=matches[1]; query_string=matches[2];
 }

 // URLにquery stringがあれば、utm系の存在をチェック
 if (query_string) {
 query_string = query_string.split(/&/);
 for (var i =0; i < query_string.length; i++) {
 var param = query_string[i].split(/=/);
 if (typeof utms[param[0]] != 'undefined') {
 // utm系のが1つでもあればreplaceStateフラグをオンに
 do_replaceState = true;
 }
 else {
 // utm系でなければreplaceState後のURLにも必要
 queries.push(query_string[i]);
 }
 }
 }

 // utm系のパラメータがあれば、それを除いたURLにreplaceState
 if (do_replaceState) {
 // replaceState先の指定
 if (queries.length){
 url += '?' + queries.join("&");
 }
 if (hash){
 url += '#' + hash;
 }
 // replaceState
 history.replaceState('', '', url);
 }
 }
 });

</script>

詳細な解説については、Web担当者Forumさんの記事をご参照ください。

あとがき

実際に試してみましたが、アクセス時にURLからパラメータが除去されて、正常にトラッキングできていました。

こんなに素晴らしい方法があったとは・・・もっと早く調べてみればよかったです。