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

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

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

ダウンロード＆使い方

1. 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){};})();

2. ダウンロードしたJavaScriptをテキストエディタで開き、冒頭の「UA-xxxxxx-x」の部分を、あなたのGoogle Analytics用のウェブ プロパティ IDに書き換えます。

   _gaq.push(['_setAccount', 'UA-xxxxxx-x']);

3. 既存のGoogle Analytics用トラッキングコードをサイトから削除します。

4. ダウンロードしてIDを書き換えたJavaScriptをサーバーにアップロードして、ページの<head>部分で読み込むようにします（</body>直前でも動作しますが、リダイレクトをスムーズにするために<head>部分に入れることをお勧めします）。

   <script type="text/javascript" src="アップロードしたJSの場所"></script>

5. サイトのURLに「?utm_medium=mail」などのトラッキングパラメータを付けアクセスしてみて、トラッキングパラメータなしのURLにリダイレクトされることを確認します。

6. 利用上の注意を確認のうえ、お使いください。

このスクリプトの導入後も、あなたはメルマガや広告には、引き続き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にリダイレクトしつつも、ちゃんとアクセス解析ができる」トラッキングコードを作りました。

動作の解説

スクリプト全体の解説をすると長くなってしまいますので省略しますが、全体としては次の図のように動作します。

<head>で読み込まれたら、まずURLをチェックします。

URLにトラッキングパラメータが付いていたら、現在のURLで同期モードの動作で解析ビーコンを飛ばし、クッキーに「このURLにリダイレクトするよ」と記録したうえで、トラッキングパラメータなしのURLにリダイレクトします。

URLにトラッキングパラメータが付いていなかったら、クッキーをチェックします。リダイレクトされた処理の場合は特にビーコンを動作させず、イベントトラッキングの準備をするだけに留めます。リダイレクトされた処理でなければ（つまり通常のアクセス）、ふつうに解析ビーコンを動作させます。

利用上の注意

Web担ではこのスクリプトをもう半年以上動作させており特に問題はないようですが、Web担編集部ではすべての環境でこのスクリプトが正しく動作することを保証できるわけではありません。

不安ならばテストのうえ導入してください。特にWeb担ではテストできていないEコマース系の機能を使っている場合は、必ずテスト環境でいろいろ試してみてください（そのほかにも安田が気づいていない部分があるかもしれません）。

テストにあたっては、Chrome拡張のGoogle Analytics Tracking Code Debuggerを使うか、FirefoxのFireBugで「接続」パネルを使うといいでしょう。

・Google Analytics Tracking Code Debugger
→ https://chrome.google.com/extensions/detail/jnkmfdileelhofjcijamephohjechhna

このスクリプトを使うと、基本的には非同期モードで動作するようになります。そのため、すでにイベントトラッキングなどを利用している場合は非同期モード用の記述に変更する必要があります。

また、通常のトラッキング以外の処理を入れている場合は、スクリプト中ほどの「ここに追加のトラッキング処理を非同期形式で入れる」の部分に追加処理を記述してください（こちらも非同期モードで記述します）。

この仕組みを考えていたときに何人かのアクセス解析系の人に意見を聞いたのですが、すべて微妙な反応で、おそらくこうしたニーズを持っている人は少ないマニアックなスクリプトなのだろうと思います。

こうしたスクリプトが気になった方は、このスクリプトが狙うところやスクリプトの動作に関して、ご意見やご感想などいただければ幸いです。