一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。
なお、こちらの記事は、
SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法
と同じ内容となっています。
はじめに
モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。
こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつかります。
この記事では、JavaScriptでリダイレクトをせざるを得ない状況下で発生する問題点を挙げながら、それらの問題点を解決するための方法を紹介します。とはいえ、これをやってしまえば問題は全くない、というものではなく可能である限りサーバー側でのリダイレクトを行うように心がけてください。
また、JavaScriptでのリダイレクトだけで発生する問題ではなく、メタタグのRefreshを使っても同じ問題が発生しますし、.htaccessなどのサーバー側リダイレクトを行っても、設定によっては問題は発生します。
単純なJavaScriptリダイレクトの方法と問題点、確認方法
単純なJavaScriptリダイレクトの実装方法
モバイルサイトとPCサイト間のリダイレクトをJavaScriptで簡単に実装しようとすると、
// PCサイト側のJavaScript
if ( isMobileDevice() ) {
location.href = "http://example.com/sp/index.html";
}
のような形での実装になります。この方法は単純であるが故に、よくやってしまいがちな方法となります。
どんな問題があるか
問題点1: リファラー情報が自サイトになってしまうため、Googleアナリティクスではダイレクト流入となってしまう
ユーザーからの見た目上は問題がないものの、リファラー情報は自ドメインとなってしまいます。また、最新のユニバーサルアナリティクスでは、デフォルトでは自ドメインからの流入はダイレクト流入と扱われてしまいます。結果として、検索エンジンや他サイト流入でページAを開いたとき、上記の実装によるJavaScriptリダイレクトによってページBにリダイレクトしてしまうと、ページBにランディングしたセッションとなりますが、その流入経路は検索エンジンや他サイト流入ではなく、「ダイレクト流入」扱いとなってしまいます。
問題点2: カスタムキャンペーンやAdWordsのgclidパラメーターが抜け落ちてしまう
上記の実装方法は意図的に割り振っているカスタムキャンペーンやAdWordsとGoogleアナリティクスを連携したときに付与されるgclidというパラメーターをリダイレクト時に捨ててしまいます。そのため、カスタムキャンペーンを割り振ってサイトに流入しているものの、該当のカスタムキャンペーンを持った流入が実際より少なく計測されてしまいます。
問題がある実装になっているかどうか、確認するには？
下記の確認方法をもとに、実際のサイトの実装を確認してみてください。もし、問題のある可能性が出てきたら、本格的にサイトの改修を検討したほうがよいと思います。
問題点1の確認方法
こちらを確認するには、GoogleやYahooの検索結果、その他雑多なサイトの中から、リダイレクトが発生するはずのURLへのリンクを探し出してください。その上でそのリンクをクリックし、リダイレクトされた流入において、Googleアナリティクスのリアルタイムビューを確認し、該当の参照元として流入が確認できれば問題ありません。
問題点2の確認方法
自身のサイトにおいて、リダイレクトが発生するページを開いてみます。ただしこのときにURLに少し細工を行います。
のような形で、通常のURLの後ろに「?utm_source=Manual&utm_medium=Manual&utm_campaign=RedirectTest」をつけて、サイトにアクセスをします。リダイレクトが発生したあとのURL欄をみてみてください。先ほど追加したパラメーターが残っているかどうか確認してください。もしくは、Googleアナリティクスのリアルタイムビューで、「参照元：Manual、メディア：Manual、キャンペーン：RedirectTest」のような流入が確認できれば、問題ありません。もし上記のような流入が確認できなければ不適切な実装になっている可能性が高いです。
適切なリダイレクト方法とリダイレクト先ページのGA実装
リダイレクト方法
重要な点としては、リダイレクト先で必要な情報を、リダイレクト時に正しく引き渡すことです。上で紹介した2つの問題点を解決するために、リダイレクト先で必要な情報は、 リダイレクト前のページに流入したときの参照元情報 と、 リダイレクト前のページを開くときに使われているパラメーター情報 になります。
具体的なコードで書くと、
if ( isMobileDevice()) {
var redirect_url = "http://example.com/sp/index.html" + location.search;
if (document.referrer) {
var referrer = "referrer=" + encodeURIComponent(document.referrer);
redirect_url = redirect_url + (location.search ? '&' : '?') + referrer;
}
location.href = redirect_url;
}
となります。これにより、リダイレクト前のページにアクセスするときに用いられていたパラメーター情報が維持された上で、リファラー情報も新たにパラメーターに追加することで、リダイレクト先に本来のリファラー情報を知らせることができます。
リダイレクト先ページのGoogleアナリティクス
カスタムキャンペーンやAdWords用のカスタムキャンペーンなどのパラメーターは、上記のリダイレクトだけで十分に動作します。ただし、リファラー情報については上記の方法だけでは不十分となります。リファラー情報を対処するには、リダイレクト先ページのGoogleアナリティクスにもカスタマイズを加える必要があります。
ga('create', 'UA-0123456-1');
if (location.search.indexOf('referrer=') >= 0) {
var params = location.search.replace('?', '').split('&');
for (var i = 0; i < params.length; i++) {
var kv = params[i].split('=');
if (kv.length == 2 && kv[0] == 'referrer') {
ga('set', 'referrer', decodeURIComponent(kv[1]));
break;
}
}
}
ga('send', 'pageview');
のように、トラッカーの生成とページビューの送信の間に上記のifから始まる10行を記載します。これは、URLの中にリファラー情報が含まれていたら、そのリファラー情報を取り出して、Googleアナリティクスが送信するリファラーデータをその値で上書きしています。
最後にもう1点、上記だけの場合、Googleアナリティクスで計測されるURLはreferrerパラメーター付きとなってしまうため、ページごとの分析時に不自由します。Googleアナリティクスの管理画面上のURLではreferrerパラメーターは削除した状態で見たいため、「アナリティクス設定」のビュー設定内にある「除外する URL クエリパラメータ」に「referrer」と入れてください(もしすでに何か入っている場合は、カンマで区切って「referrer」を入れます)。これにより、「行動＞サイトコンテンツ＞すべてのページ」などのURLを見たときに、referrer違いの同一ページがまとまって表示されるようになります。
まとめ
タイトルでは、「JavaScriptでリダイレクトを行うときの」と書きましたが、実際にはJavaScriptでリダイレクトしないパターンであっても、タグのRefresh命令であったり、サーバー側でのリダイレクトであっても、カスタムキャンペーンやgclidパラメーターが抜け落ちる可能性は十分にあり得ます。本来であれば、サイトを制作する側の人間がアクセス解析ツールの動作仕様を把握し適切に実装するべきですが、Web広告/Webマーケティングに関わる方は今一度、自分の担当しているサイトが適切に実装されているか、確認してみてはいかがでしょうか。
最後に、ウェブマーケティングに関わるマーケターはこういった技術的な部分を知っている人はほとんどいないのが現状です。
エンジニアがウェブマーケティングに関わることで、ウェブマーケティングの世界が広がります。ウェブマーケティングに興味のあるエンジニアの方は是非
を購読いただけますと幸いです。