Content Analytics ヘルプサイト
⏩

ABテスト対応させる方法 (ABテストツールのバリエーション別にCAレポート画面に反映・表示させる方法)

Content AnalyticsはABテストに対応していません

2021年10月現在、Content Analytics(以下CA)にはGoogle OptimizeやkarteのABテストに対応させる機能はありません。

ただ、サイトを制作するエンジニアが「JavaScriptを使ってA案B案ごとに別のURLクエリパラメータを追加する機能」をABテストツール内に実装し、Google OptimizeやKarte, Adobe TargetなどのABテストツールでこのJSを配信することができれば、Content Analyticsに限らず多くのツールはA案B案を別のURLとして捉えることができ、Content AnalyticsでABテストのバリエーションごとのレポートを表示させることが可能です。

ただ、この方法はサイトに不具合を及ぼす可能性があり、どのような不具合が起こるかの予測も困難なため推奨いたしません。例えば、SNSなどでページが共有される際に「?ab=a」や「?ab=b」といったパラメータ付きで共有されてしまう・他の計測ツール上でパラメータ付きで計測されてしまう、といった問題が考えられます。

非推奨・サポート外となりますが、この方法でCAをABテスト対応とすることは可能なため、参考として実装方法を紹介させていただきます。

(非推奨・サポート外)「JavaScriptを使ってA案B案ごとに別のURLクエリパラメータを追加する機能」を実装して強制的にCAをABテストに対応させる方法

概要

  • ABテストツールで3つの実験を用意してください。
  • ABテストとは別に2つの100%配信テストが必要な理由は、ContentAnalyticsクローラーがパラメータ付きページを訪問した際、確実にA案・B案のキャプチャを取得させるためです。そのために、URLに「?ab=A」が付いている場合はA案を100%表示、URLに「?ab=B」が付いている場合はB案を100%表示させる必要があります。
image

詳細手順

  1. ABテストを行うページからContent Analytics計測タグを削除する ※ABテストを開始しない状態ではCA計測がされなくなりますのでご注意ください。 ※ABテスト終了後はCA計測タグを入れ直すまで計測されなくなりますのでご注意下さい。
  2. CA管理画面の「プロジェクト設定」「クエリーパラメータを追加する」を押しab を追加する
    3. image
  3. Google OptimizeやKarte、Adobe Targetのバリエーション内に以下のJSを追記する

    4. PV時にURLクエリパラメータを追加し、その後にCA計測タグを配信するJS

    A案のデザイン変更コードの下に貼るJS例

    // A案やB案のデザイン変更JavaScript
// ～

appendUrlQueryParameterAndLoadContentAnalyticsMeasurementTag();
function appendUrlQueryParameterAndLoadContentAnalyticsMeasurementTag() {
  // urlに「CA側がABテストを捉える用のurlクエリパラメータ」を追加
  if (location.search.indexOf('ab=') === -1) {
    var url = new URL(window.location.href);

    // A案の場合
    url.searchParams.append('ab', 'A');
    history.replaceState('', '', url.href);
  }

  // CA計測タグを読み込み
  (function () {
    var script = document.createElement('script');
    script.src = 'https://tag.contentanalytics.jp/agent.js';
    script.setAttribute('data-ca-namespace', '_ca');
    script.onload = function () {
      _ca("create", "■※caのproject idを入れる■"); /* global _ca */
      _ca("run");
    };
    document.getElementsByTagName('head')[0].appendChild(script);
  })();
}

    B案のデザイン変更コードの下に貼るJS例

    // A案やB案のデザイン変更JavaScript
// ～

appendUrlQueryParameterAndLoadContentAnalyticsMeasurementTag();
function appendUrlQueryParameterAndLoadContentAnalyticsMeasurementTag() {
  // urlに「CA側がABテストを捉える用のurlクエリパラメータ」を追加
  if (location.search.indexOf('ab=') === -1) {
    var url = new URL(window.location.href);

    // B案の場合
    url.searchParams.append('ab', 'B');
    history.replaceState('', '', url.href);
  }

  // CA計測タグを読み込み
  (function () {
    var script = document.createElement('script');
    script.src = 'https://tag.contentanalytics.jp/agent.js';
    script.setAttribute('data-ca-namespace', '_ca');
    script.onload = function () {
      _ca("create", "■※caのproject idを入れる■"); /* global _ca */
      _ca("run");
    };
    document.getElementsByTagName('head')[0].appendChild(script);
  })();
}

  4. ABテストとは別にカスタマイズ実験を2つ作り、合計3つの実験とする(Google Optimizeの例) カスタマイズ実験が必要な理由は、Content AnalyticsのクローラーがABテストを行っているページにクエリパラメータ付きでアクセスしてクロールしようとした際に、A案のクエリパラメータが付いている場合はA案を、B案のクエリパラメータが付いている場合はB案をクローラーに見せる必要があるためです。
  5. ABテストの開始条件に以下を加え、URLクエリパラメータが存在する場合は開始されないようにする(Google Optimizeの例) クエリパラメーター, abが正規表現に一致しない（大文字と小文字の違いを無視）: ^(A|B)$
  6. A案表示用のカスタマイズ実験を作成し、変更内容はABテストのA案と同一とする(今回追加したJSも含む)。 URLクエリパラメータに ?ab=A が存在する場合に実行されるようにする。(Google Optimizeの例) クエリパラメーター, abが次と等しい: A ※カスタマイズ実験を作成時、GAの「測定する」にチェックを入れヒットが飛ぶようにする
  7. B案表示用のカスタマイズ実験を作成し、変更内容はABテストのB案と同一とする(今回追加したJSも含む)。URLクエリパラメータに ?ab=B が存在する場合に実行されるようにする。(Google Optimizeの例) クエリパラメーター, abが次と等しい: B ※カスタマイズ実験を作成時、GAの「測定する」にチェックを入れヒットが飛ぶようにする
  8. 3つの実験を開始し、実験URLにアクセスした際にABテストが開始されること、 ABテスト開始直後にURLにランダムに ?ab=A か ?ab=B が付与されること、 ?ab=A が存在する場合は必ずA案が、 ?ab=B が存在する場合は必ずB案が表示されることを確認する。
  9. ABテスト開始から1日～数日でContent Analyticsレポート画面にURL別のレポートが追加されるので確認する。