初代編集長ブログ―安田英久

長くて汚いutm_*パラメータ付きURLをキレイにするGoogle Analytics用の少しマニアックなスクリプト

SEOにも効くGoogle Analytics用の便利だけど少しマニアックなスクリプト

2010年11月2日 11:00

今日は、SEOにも効くGoogle Analytics用の便利なスクリプトを紹介します。少しマニア向けですが、「utm_medium」や「utm_source」などのトラッキングパラメータが付いた長くて汚いURLを、パラメータどおりにちゃんと解析しつつ、ユーザーに対してはキレイなURLで見せられるというものです。

この記事のタイトルは長いですが、これでURLは短くキレイになります。

ダウンロード＆使い方

Web担特製のカスタムJavaScriptを以下のURLからダウンロードします。

・特製トラッキングコードのダウンロード
→ http://web-tan.forum.impressrd.jp/files/images/nakanohito/bancho_ga_canonicals.js

（または、ここをクリックしてこの下にコードを表示）
// 2010-11-01 // 通常の非同期gaスクリプト var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxx-x']); // ウェブプロパティ IDを設定 (function(){try{ var semaphore_cookie = '_gaq_semaphore'; // クッキー処理で使うtrim関数を定義 var trim = function(s){ return String(s).replace(/^(\s+)|(\s+$)/g, ''); }; // 指定したキーのクッキー値を返す関数を定義 var cookie_value = function(key){ var cookies = document.cookie.split(';'); var cookie_len = cookies.length; for(var i=0; i < cookie_len; i++){ var cookie = cookies[i].split('='); if (unescape(trim(cookie[0])) == key){ return unescape(trim(cookie[1])); } } return false; } // リダイレクトするときは同期的に動いてもらいたいので // 非同期用_gaqに突っ込まれた命令を同期で実行 // 処理内容の指定を2か所でやると間違えるので // 指定は非同期用_gaqから退避した_gaqsyncに集中している var _gatready = function(url){ // ga.jsの読み込みが完了するまで待つ if (typeof _gat == 'undefined'){ setTimeout(function(){_gatready(url)}, 10); } else{ while(__gaq = _gaqsync.shift()){ var func = __gaq.shift(); switch(func){ case '_setAccount': var pageTracker = _gat._getTracker(__gaq[0]); continue; default: if (typeof pageTracker[func] == 'function'){ pageTracker[func].apply(null, __gaq); } else if (typeof this[func] == 'function'){ this[func].apply(null, __gaq); } else{ } continue; } } // リダイレクト先のアクセスでビーコンを動かさないようにクッキー指定 // セッション内有効 document.cookie = semaphore_cookie+'='+escape(url); // utmなしURLにリダイレクト // pageTrackerのレスポンスを待たなくてもいいのかな…… location.href=url; } }; var do_redirect = false; // utm系のqsがあったかどうか // cookieを見て、utm系削除でリダイレクトされた場合には // ・cookieを削除 // ・トラッキング系のコードは実行しない if (location.href == cookie_value(semaphore_cookie)){ // cookie削除 document.cookie = semaphore_cookie+'=;expires='+new Date((new Date().getTime()) - 86400).toGMTString(); // _initDataしておかないとtrackEventが効かない _gaq.push(['_initData']); } else{ // リダイレクトされたアクセスではない（通常アクセス）ならば、 // トラック用の処理を記述 // ここに追加のトラッキング処理を非同期形式で入れる // 例： // _gaq.push(['_setCustomVar', 3, 'test_customvar_time', new Date().toLocaleString(), 3]); // 通常のトラッキング _gaq.push(['_trackPageview']); // 以下、utm系query_stringの処理 var url,query_string,hash,matches,domain,path; // utm系のリスト（キーに名前を入れておくと対象となる） var utms = { utm_source : true, utm_medium : true, utm_term : true, utm_content : true, utm_campaign : 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){ var param; var queries = []; query_string = query_string.split(/&/); for (var i =0; i < query_string.length; i++){ param = query_string[i].split(/=/); var param_name = param[0]; if (typeof utms[param_name] != 'undefined'){ do_redirect = true; } else{ queries.push(query_string[i]); } } } } if (!do_redirect){ // 非同期で実行 // リダイレクトされたアクセスの場合でもga.jsは読み込む var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); } else{ // utm系のパラメータがあれば // ・まず同期でモードでtrack // ・リダイレクト先でトラックしないようにクッキーを保存 // ・utm系パラメータなしのURLにリダイレクト // ga.jsを読み込むと_gaqを同期モードで処理してしまうので、 // 同期処理用に確保 var _gaqsync = _gaq.slice(0); _gaq = null; // リダイレクト先の指定 if (queries.length){ url += '?' + queries.join("&"); } if (hash){ url += '#' + hash; } // 同期モードで処理 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); _gatready(url); } }catch(err){};})();
ダウンロードしたJavaScriptをテキストエディタで開き、冒頭の「UA-xxxxxx-x」の部分を、あなたのGoogle Analytics用のウェブプロパティ IDに書き換えます。
```
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
```
既存のGoogle Analytics用トラッキングコードをサイトから削除します。
ダウンロードしてIDを書き換えたJavaScriptをサーバーにアップロードして、ページの<head>部分で読み込むようにします（</body>直前でも動作しますが、リダイレクトをスムーズにするために<head>部分に入れることをお勧めします）。
```
<script type="text/javascript" src="アップロードしたJSの場所"></script>
```
サイトのURLに「?utm_medium=mail」などのトラッキングパラメータを付けアクセスしてみて、トラッキングパラメータなしのURLにリダイレクトされることを確認します。
利用上の注意を確認のうえ、お使いください。

このスクリプトの導入後も、あなたはメルマガや広告には、引き続きutm_mediumやutm_sourceなどのトラッキングパラメータ付きURLを使います。そのURLをクリックしたユーザーは、一瞬だけパラメータ付きのURLにアクセスして、すぐにパラメータなしのURLにリダイレクトされます。これで、ユーザーが目にするURLはトラッキングパラメータのないシンプルなものになり、それでいてパラメータで設定した解析内容はGoogle Analyticsのデータに反映されるようになります。

なぜutm_xxx付きの長いURLはダメなのか

あなたのサイトではGoogle Analyticsのトラッキングパラメータを使っていますか？広告やメルマガからのリンクに「utm_source」や「utm_medium」などのパラメータを付けることで、そのリンクが何回クリックされたかを調べる仕組みですね。

自分で使っていなくても、FeedBurnerで記事のクリックスルー集計を有効にしていると、フィードからサイトへのリンクにこうしたパラメータが付いている場合があります。

トラッキングパラメータ付きURLを使うと、どれくらいクリックされたをGoogle Analyticsで解析できて便利な反面、URLがとても長くなってしまいます。たとえばこんな感じですね。

http://example.com/?utm_source=webtan&utm_medium=mail&utm_campaign=ww0135

長いURLは、次のような点で問題があります。

見た目に悪い
メールやTwitterでURLを伝えにくい
検索エンジンのリンク評価が分散される
ソーシャルブックマークなどが分散される

長くて使いにくい点は短縮URLを使ってもらえば解決できますが、すべてのユーザーが短縮URLを使い慣れているとは限りません。そもそも長いURLはそれだけで鬱陶しいですよね。

また、流入元を解析するためのトラッキングパラメータが付いたままURLが流通してしまうと、「サイトA用のURLを作ったがサイトBに掲載されてそこからの流入が多かったためにサイトAの効果が高いと誤解する」ようなことも起きてしまうかもしれません。

検索エンジンのリンク評価分散に関しては、実際にはcanonical指定をしたりウェブマスターツールの［サイト設定］＞［設定］＞［パラメータ処理］で無視するように設定したりすれば問題にはなりません。

しかし、ソーシャルブックマークの分散は防ぎきれないため、損をしてしまいます。たとえばトラッキングパラメータなしのURL（通常のURL）に100ブクマ付き、トラッキングパラメータ付きのURLに50ブクマ付くと、本来ならまとめて150ブクマで人気エントリ入りしていたかもしれないのに、上に上がらないままになってしまうのです（canonical指定は必ずしも効くとは限らないので）。

Web担でもメルマガのリンクにトラッキングパラメータを使っているためブクマが分散していたことがあり、それを解決するために「utm_XXXのトラッキングパラメータ付きの長くて汚いURLを、トラッキングパラメータなしのきれいで短いURLにリダイレクトしつつも、ちゃんとアクセス解析ができる」トラッキングコードを作りました。