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

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

Published in

VELTRA Engineering

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を実行」を選択します。

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

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

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/');
}