このページはBパターンのコンテンツを表示しています。

ページを作成するうえで、どちらの構成・文章がいいだろう？と思うことは多いと思います。

そんな時のために、HTML内にコードを入れるだけで簡単にAパターン、Bパターンの出しわけができる方法をお伝えします。

コンセプトはできるだけ楽に。

実装要件

今回作成したABテスト機能の要件は以下です。

• Javascript+HTML/CSS で実装する
• ページ初回アクセス時にAパターン、Bパターンどちらを表示するか振り分ける
• 2回目以降のアクセス時は初回で振り分けたパターンを表示する
• 振り分けられたパターンに応じてコンテンツを出し分ける
• SEOマイナス評価となるフリッカーやCLS低下を防ぐ
• 検証用にABいずれかのパターンを任意に指定可能とする
• 検証用にABパターン振り分けのリセットを可能とする

ABテスト用コードの使い方

作成したものがこちらです。

Javascript + CSS コード

まずはこちらをheadタグ内、body開始直後など、必ず出し分けたいエリアの前に来るよう設置してください。

<!-- AB test -->
<script>
  (function() {
    const STORAGE_KEY = 'ab_test_pattern';
    
    // ①検証用パラメータの処理
    const urlParams = new URLSearchParams(window.location.search);
    const forceParam = urlParams.get('ab_test');

    if (forceParam === 'reset') {
      localStorage.removeItem(STORAGE_KEY);
    } else if (forceParam === 'A' || forceParam === 'B') {
      localStorage.setItem(STORAGE_KEY, forceParam);
    }

    // ②パターンの取得・決定
    let currentPattern = localStorage.getItem(STORAGE_KEY);
    if (!currentPattern) {
      currentPattern = Math.random() < 0.5 ? 'A' : 'B';
      localStorage.setItem(STORAGE_KEY, currentPattern);
    }

    // ③HTMLタグにクラスを付与
    document.documentElement.classList.add('ab-pattern-' + currentPattern);

    // ④計測用にグローバル変数にパターンを保持
    window.currentABPattern = currentPattern;
  })();
</script>

<style>
  /* ⑤HTMLタグに付与されたクラスによって出し分け */
  .ab-content-A, .ab-content-B { display: none; }
  html.ab-pattern-A .ab-content-A { display: block; }
  html.ab-pattern-B .ab-content-B { display: block; }
</style>

<noscript>
  <style>
    /* ⑥JS無効時はAを強制表示 */
    .ab-content-A {
      display: block;
    }
  </style>
</noscript>
<!-- End AB -->

HTMLコード

こちらはシンプルで、Aパターン、Bパターンそれぞれで表示させたい要素に以下のclassを追加します。
ab-content-A：Aパターンで表示したい要素
ab-content-B：Bパターンで表示したい要素

例えば、このページ最上部のテキストは以下のようにclassを指定しています。

<p class="ab-content-A"><strong>このページはAパターンのコンテンツを表示しています。</strong></p>
<p class="ab-content-B"><strong>このページはBパターンのコンテンツを表示しています。</strong></p>

解説

簡単に解説します。

    // ①検証用パラメータの処理
    const urlParams = new URLSearchParams(window.location.search);
    const forceParam = urlParams.get('ab_test');

    if (forceParam === 'reset') {
      localStorage.removeItem(STORAGE_KEY);
    } else if (forceParam === 'A' || forceParam === 'B') {
      localStorage.setItem(STORAGE_KEY, forceParam);
    }

①の処理は検証用の記述です。

?ab_test=rest：振り分けられたパターンをリセットし、再度ランダムな振り分けを行います。
?ab_test=A：強制的にAパターンを表示します。
?ab_test=B：強制的にBパターンを表示します。

今回は LocalStorage に振り分けたABパターンを保持します。
LocalStorage はブラウザに半永久的（Safariのみ最終アクセスから7日間）に情報を保持することができる機能です。
保存できるのは文字のみですが、今回のようなA、Bどちらかを保持させるには最適です。
詳しい仕様はMDN Web Docsをご覧ください。

    // ②パターンの取得・決定
    let currentPattern = localStorage.getItem(STORAGE_KEY);
    if (!currentPattern) {
      currentPattern = Math.random() < 0.5 ? 'A' : 'B';
      localStorage.setItem(STORAGE_KEY, currentPattern);
    }

②の処理はAパターン、Bパターンの振り分け処理です。
Math.random() < 0.5の 0.5 の部分を書き換えることで振り分けの比率を変えることができます。
指定した数字がAパターンの比率になり、残りがBパターンになります。

    // ③HTMLタグにクラスを付与
    document.documentElement.classList.add('ab-pattern-' + currentPattern);

③の処理は出し分けのキモとなる部分です。
振り分けられたパターンに応じてHTMLタグにclassとして ad-pattern-A もしくは ad-pattern-B を付与します。

これによりコード内⑤のCSSが有効になり、コンテンツ内のABパターンが可能となります。

    // ④計測用にグローバル変数にパターンを保持
    window.currentABPattern = currentPattern;

④は出し分け自体には使用しない、計測などの処理を行うためのコードです。
window.currentABPatternにAかBが入るので、それを使って計測タグでどのパターンが表示されているか集計を行いましょう。

どの計測タグを使用しているかによって変わるものなので、本記事では割愛します。

<style>
  /* ⑤HTMLタグに付与されたクラスによって出し分け */
  .ab-content-A, .ab-content-B { display: none; }
  html.ab-pattern-A .ab-content-A { display: block; }
  html.ab-pattern-B .ab-content-B { display: block; }
</style>

⑤は実際に表示・非表示を指定するCSSコードです。
③でHTMLタグにclassとしてab-pattern-Aもしくはab-pattern-Bが付与され、どちらが付与されたかによってab-content-Aもしくはab-content-Bのどちらかが有効（block）となります。

<noscript>
  <style>
    /* ⑥JS無効時はAを強制表示 */
    .ab-content-A {
      display: block;
    }
  </style>
</noscript>

⑥はscriptが無効となっているユーザーに対して、Aを有効とする処理です。
ほぼいないとは思いますが、念のための処理です。

まとめ

今回は簡易的なABパターンの出し分けコードを作成してみました。

実際にはGA等を使用してパターンごとに計測を行うことになるかと思いますが、④のコードで判定すれば簡単ではないかと思います。

ということで次の記事はGA4での計測方法になりそうです。

リストの形式は様々で、エクセル・PDF・テキストで箇条書き などなど…
並べ方の形式も同様に、テーブル・リンク・複雑なモジュール などなど…

数十件、数百件にもおよぶリストを一つずつコピペ。時間もかかるしミスもしやすい。何より単調でツマラナイ。

そんな時はエクセルを使ってリストからHTMLを生成しちゃいましょう。もちろんスプレッドシートでもかいません。

本記事はスプレッドシートを使用して説明します。

ステップ① 表を作成する

まずは受領したリストの内容をエクセルで表にしましょう。
元からエクセル・スプレッドシートでリストを受領している場合はここはスキップしてOKです。

シートの作成

まずは新規のエクセル・スプレッドシートを作成しましょう。
以下のように1行目には項目名、1列目には連番を入れておくと扱いやすいです。

入力し終えたら表内のいずれかのセルを選択したうえで 表示形式 > テーブルに変換 を選択し、テーブル化しておきましょう。

ステップ② ベースHTMLを作成する

テーブルの内容をどのような形でページ上に表示するか、ベースのHTMLを作成しましょう。
この記事ではHTMLのtableをベースとしてみます。

こちらのHTMLコードは以下です。

<figure class="wp-block-table">
<table class="has-fixed-layout">
<thead><tr><th>ID</th><th>商品名</th><th>仕入れ業者</th><th>仕入れ価格</th><th>販売価格</th></tr></thead>
<tbody>
<tr><td>1</td><td>りんご</td><td>A社</td><td>100円</td><td>200円</td></tr>
</tbody>
</table>
</figure>

このコードをベースにスプレッドシート内のテーブルをそのままHTML化したいなら、全ての行の<tr><td>1</td><td>りんご</td><td>A社</td><td>100円</td><td>200円</td></tr>のコードさえ作ってしまえばいいわけです。

ステップ③ ベースHTMLを張り付けて分解

スプレッドシートに新しいシート「ベースHTML」を追加し、ステップ②で作成したHTMLコードを張り付けてください。

このHTMLを少し整形します。対象は量産が必要な行、今回は5行目が対象です。
以下のように行によって内容が変わる部分と、変わらない定型部分で複数行に分解します。

内容が変わる部分はわかりやすいようにテーブルの列名を入れておくとよいでしょう。
わかりやすいように色付けしてますが、必須では必要ありません。

ステップ④ コードを生成する

いよいよベースコードを元にコードを生成していきます。

「データ」シートのテーブル右端に新しい列を追加します。今回は生成HTMLという列名にしておきます。

生成HTMLの1行目、空のセルに対してベースHTMLとテーブルの中身を&でつなげるだけの関数を作成することでHTMLを生成していきます。
ポイントとしては、ベースHTMLのセルは共通のため、F4キーを押して$A$5のように固定化すること。
表のセルは表名称[列名]の形で指定してあげると今後のカスタマイズもしやすいです。

今回は以下のような関数となりました。

='ベースHTML'!$A$5&表_1[#]&'ベースHTML'!$C$5&表_1[商品名]&'ベースHTML'!$E$5&表_1[仕入れ業者]&'ベースHTML'!$G$5&表_1[仕入れ価格（円）]&'ベースHTML'!$I$5&表_1[販売価格（円）]&'ベースHTML'!$K$5

正しく&で結合できていれば、ステップ②で作成したベースHTMLのものと同じものができがっているはずです。
正しく生成されていることが確認できたら、関数を全行にコピーしましょう。

ステップ⑤ HTMLとして貼り付け

生成HTML 列の内容はそのままページに張り付けることができます。
ステップ②のベースHTML tbody 中身を生成HTMLに置き換えてみましょう。

<figure class="wp-block-table">
<table class="has-fixed-layout">
<thead><tr><th>ID</th><th>商品名</th><th>仕入れ業者</th><th>仕入れ価格</th><th>販売価格</th></tr></thead>
<tbody>
<tr><td>1</td><td>りんご</td><td>A社</td><td>100円</td><td>200円</td></tr>
<tr><td>2</td><td>みかん</td><td>B社</td><td>50円</td><td>100円</td></tr>
<tr><td>3</td><td>ぶどう</td><td>C社</td><td>200円</td><td>400円</td></tr>
<tr><td>4</td><td>なし</td><td>D社</td><td>120円</td><td>250円</td></tr>
<tr><td>5</td><td>メロン</td><td>A社</td><td>600円</td><td>1000円</td></tr>
<tr><td>6</td><td>スイカ</td><td>D社</td><td>400円</td><td>750円</td></tr>
<tr><td>7</td><td>マスカット</td><td>D社</td><td>200円</td><td>400円</td></tr>
<tr><td>8</td><td>マンゴー</td><td>B社</td><td>150円</td><td>300円</td></tr>
<tr><td>9</td><td>もも</td><td>C社</td><td>350円</td><td>800円</td></tr>
<tr><td>10</td><td>パイナップル</td><td>B社</td><td>500円</td><td>1200円</td></tr>
</tbody>
</table>
</figure>

想定通りの形式で表示されましたね。
この方法ならテーブルが数百、数千という大量のデータでも同じ方法でHTML化が可能です。

ステップ⑥ 更新用の原稿として使用する

ある意味この生成方法の真価は、原稿として利用し更新を効率化できる。という点です。

このような大量の情報がまとまったページは更新頻度が高かったり、一度で数十行が追加・削除されるような更新が発生することがあります。

そんな時は、HTML生成のために作成したこのスプレッドシートをクライアントに共有し、「更新がある場合はこのシートを更新してください」とお伝えしましょう。

クライアントは一つずつ修正指示をする必要は無くシートを更新するだけ、コーダーは生成HTMLを一括でコピペするだけ、という非常に効率的でミスをしづらい運用になります。

まとめ

今回はエクセル・スプレッドシートを使用したコーディング術をまとめてみました。

個人的にはステップ⑥がクライアントにとっても運用が楽になる方法となっており、このコーディング術の効果を最大限生かすための重要ポイントです。

クライアントからの評価も上がると思うので是非活用してみてください。