Googleオプティマイズで多数のページをリダイレクトテストする

「リダイレクトテスト」機能では不可能。どうする？

7 min readMar 16, 2020

2020年5月に「高度なリダイレクト」機能が追加され、多数のページのA/Bテストがリダイレクトテスト機能でできるようになりました。本記事のタイトルおよび本文は、2020年3月時点の情報であり、古くなっています。ご注意ください。

ベルトラのイワモトです。「人生は選択の連続である」と誰かが言ったそうですが、確かに、A定食にすべきかB定食にすべきかなど、難しい選択を迫られる場面はよくあります。

さて、Googleオプティマイズは、ウェブサイトのA/Bテストが簡単にできる便利なツールです。「リダイレクトテスト」機能を使うと、新デザインページへのリダイレクトによるA/Bテストが実現できます。

しかし、2020年3月現在のリダイレクトテスト機能では、リダイレクト先が静的URLでしか指定できず、1ページしかテストできません。たとえば「商品0001の新ページ」はテストできますが「商品0001~商品9999の新ページ」はテストできないのです（※）。

※リダイレクトを /products/0001 → /products2/0001 のようには指定できるのですが、/products/{product_id} → /products2/{product_id} のようには指定できないためです。

それでも、Googleオプティマイズで多数のページをリダイレクトテストする方法があります。以下、詳しくご紹介します。

1. エクスペリエンスの作成

まず、エクスペリエンスを作成します。Googleオプティマイズでは、各種テストやパーソナライゼーションを総称して「エクスペリエンス」と呼んでいます。

作成する際は、下記の2点に気をつけます。

「エディタページ」には新デザインページのURLを指定します。ビジュアルエディタの操作対象として使われるだけなので、どの商品でも構いません。現行デザインのURLにすると、ビジュアルエディタ上でリダイレクトが効いてしまい、操作しづらくなります。
「テストのタイプ」は「A/Bテスト」を選択します。「リダイレクトテスト」を選択しないのがポイントです。

2. パターンの追加

次に、パターンを追加します。現行デザインは「オリジナル」パターンとしてデフォルトで登録されているので、新デザイン用のパターンだけを追加すればOKです。実際には、パターン名を決めるだけです。

3. パターンの編集

続いて、手順2で追加したパターンを編集します。ここでビジュアルエディタが使われます。

3–1. 要素の選択

ビジュアルエディタが開いたら、head要素を選択します。

3–2. 要素の編集

「要素を編集」ボタンを押し、「JavaScriptを実行」を選択します。

Get Takashi Iwamoto’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

コード入力欄が開いたら、リダイレクト用のコードを入力します。

適切なコードの内容はサイトやページによって異なります。ここでは下記のようにします。

if (location.href.includes('/a/')) {
  // Hide body
  var css = 'body {display:none}';
  var style = document.createElement('style');
  style.appendChild(document.createTextNode(css));
  element.appendChild(style);  // Redirect
  location.href = location.href.replace('/a/', '/a2/');
}