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

キャンペーン用トラッキングパラメータ付きURLを、HTML5のreplaceStateで美しくスッキリさせてみた

サイトを管理するWeb担当者さ���と、集客を増やすマーケ担当者さんが、力を合わせる仕組みです
Web担のなかの人

今日は、キャンペーン用のトラッキングパラメータ(utm_sourceとかutm_mediumとか)付きの汚いURLをスッキリさせるのに、HTML5のHistory APIで提供されているreplaceStateを使う、美しい方法を紹介します。

キャンペーンの効果測定を適切に行い、さらに、ソーシャルを通じた拡散の効果を高め、ユーザーにも優しい、良い仕組みを作るために、サイトを管理するWeb担当者さんと、集客を増やすマーケ担当者さんが、力を合わせる仕組みです。

マーケ側が効果測定したいというニーズは当然。それに対してWeb担当側は、そのニーズを満たしつつも、ユーザーに対しても良い形で、かつオウンドメディアの効果を最大化できる美しい実装をしていけるのがいいですよね。

以前に、「長くて汚いutm_*パラメータ付きURLをキレイにするGoogle Analytics用の少しマニアックなスクリプト」というコラムで、同様のことを実現するのにリダイレクトを使う手法を紹介しました。

今回紹介するのは、それよりも美しく、しかも副作用の少ない方法です。

すでにネットショップ担当者フォーラムのサイトに実装していますので、試してみたい方は、以下のURLを、トラッキングパラメータが付いていることを確認したうえでクリックして、ブラウザのロケーションバー(URLが表示されるところ)を見てください。

https://netshop.impress.co.jp/?utm_source=wt&utm_medium=banner&utm_campaign=yasuda

リンク先では、ロケーションバーは最初はトラッキングパラメータ付きのURLが表示されますが、少したつとトラッキングパラメータが除外されたURLに変わります。でも、アクセス解析はトラッキングパラメータ付きの状態で行われていますし、ページの表示には一切影響ありません。

これは、HTML5のHistory APIのreplaceStateを使って実現しています。

replaceStateを使ってトラッキングパラメータ付きURLをスッキリさせる方法

具体的には、次のようにします(Googleアナリティクスのユニバーサルアナリティクスが前提です、もう、みなさん移行し始めてますよね?)。

<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>

これはなに? なぜこんなことするの?

要は、広告効果測定などのために使うトラッキングパラメータ付きURLを、その目的を保ったまま、スッキリさせましょうということです。

トラッキングパラメータ付きURLとは、たとえば次のようなもの。

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

よく見ますよね。以前のコラムでも解説しましたが、こうしたURLには、次のようなデメリットがあります。

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

また、清水誠氏は、次のような問題もあると指摘しています。

  • パラメータ付きのURLが別の場所で流通してしまい、計測の精度が落ちる
  • 動的プログラムとパラメータ名がコンフリクトすることがある

これを解決するために、効果測定は適切にしたうえで、ブラウザに表示されるURLはトラッキングパラメータを含まないものにする必要があるんですね。

Web担では、以前はリダイレクトして行う仕組みを使っていたのですが、HTML5のreplaceStateを使えば副作用なくスッキリと解決できますね。

もちろん、アクセス解析ツールを複数使っている場合など、もうちょっと考慮は必要かもしれませんが、上記のものを基本に、調整してやってみてください。

こうした部分、本当ならばアクセス解析ツールがうまくごにょごにょするとか、ブラウザ業界が標準の枠組みを作って複数ツール導入時の処理をうまくするとかしてくれればいいのですが、なかなかそうは進まないんですよね……。

アドビとかグーグルの中の人が、うまくそういうのを進めてくれればいいのですが。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

NDA
Non-Disclosure Agreementの略。一般には「秘密保持契約」と ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]