WEBページのバナーを日次で切り替える方法紹介

和からよもやま話

公開日

2021年12月29日

更新日

2021年12月29日

この記事の主な内容

どっちのバナーが良い？

和からの松中です。弊社のWEBページ(つまり今本記事をご覧いただいているWEBページ)の各種バナーは数学講師兼数学アーティストの岡本がデザインしたものです。

ある日、社内のチャットツールに以下のメッセージが流れてきました。

どうやら和からの無料動画視聴サービスに新しく載せることになった「統計その前に」シリーズのバナーについての相談のようです。投票の結果「案1」と「案2」できれいに票数が割れました。(ちなみに私は「案3」に投票しましたが、私しか投票していませんでした。)

「案1」も「案2」も捨てがたいということで、適当なタイミングで2つのバナーを切り替えるように対応しましたので、簡単ではありますが、そのやり方を紹介したいと思います。

本記事の内容を動画で見たい方はこちら↓↓↓

PHPでの実装

企業のWEBページはWordPressで作られているものが多く、弊社もWordPressを使用しています。WordPressはサーバ側の処理はPHPで実装しますので、まずはPHPによる実装を紹介します。

今回は日次でバナーが切り替わるようにしてみたいと思います。つまり、「12月1日が『案1』のバナー」、「12月2日は『案2』のバナー」、「12月3日は『案3』のバナー」のような形です。

PHPのコードは以下の通りです。

　　
  <?php
  date_default_timezone_set('Asia/Tokyo');
　$today = new DateTime('now');
　$base = new DateTime('2021-01-01');
　$diff = $base->diff($today)->format('%a');
　if ( $diff%2 == 0 ) : ?>
　  <section>
　　  <a href="(遷移先URL)"><img src="(案1のURL)"></a>
　　</section>
　<?php else: ?>
　　<section>
　　　<a href="(遷移先URL)"><img src="(案2のURL)"></a>
　　</section>
  <?php endif; ?>

　
順に解説します。

まずはこの部分で後の部分で取得する日時を標準時間ではなく日本時間で取得できるようタイムゾーンを設定しています。日本時間は標準時間から9時間ずれていますから、この設定がないと毎朝9時にバナーが切り替わるという動きになり、少し気持ち悪いので書いておきましょう。

　　
  date_default_timezone_set('Asia/Tokyo');

　
次に、こちらの部分で「現在」と「2021年1月1日 00:00:00」の日時を取得しています。

　　
　$today = new DateTime('now');
　$base = new DateTime('2021-01-01');

　
今回バナーは日次で切り替えるわけですが、そのため2021年1月1日から何日経過したのかを取得し、それが偶数か奇数かでバナーを切り替えるようにします。最初は本日日付の偶奇で判定しようと思ったのですが、例えば1月31日の翌日は2月1日となり奇数が続いてしまうこともあります。それは少し微妙なので今回の方式にしました。

PHPのDateTimeクラスにはdiffというメソッドが用意されており、こちらを使うことで2つのDateTime変数間の経過時間を取得することができます。diffで返却される変数はDateIntervalクラスになるようなのですが、そのクラスが持つformatメソッドにより好きな形で経過時間を取得することができます。

formatメソッドに指定する文字列の種類はこちらを参照しました。

https://www.php.net/manual/ja/dateinterval.format.php

今回は総日数が知りたかったので「%a」としています。誤って「%d」を指定しないように注意しましょう。例えば本日日付が12月23日であれば、1月1日から12か月23日経過しているということになり「%d」の結果は23が返ってきてしまい、望む実装になっていません。

　　
　$diff = $base->diff($today)->format('%a');

　
DateIntervalのformatメソッドの戻りは数値型となっており、この「$diff」の偶奇でバナーを切り替えればよいです。(記事を書きながら切り替えるのはimgタグのsrcのところだけなので、srcの部分だけを変数にして、そこを「$diff」の偶奇で切り替えればよかったな、と少し後悔しました。何か手を加える際は修正したいと思います。)

偶奇の判定は2で割って0余るか(偶数)、1余るか(奇数)で行っています。

　　
　$diff = $base->diff($today)->format('%a');
　if ( $diff%2 == 0 ) : ?>
　  <section>
　　  <a href="(遷移先URL)"><img src="(案1のURL)"></a>
　　</section>
　<?php else: ?>
　　<section>
　　　<a href="(遷移先URL)"><img src="(案2のURL)"></a>
　　</section>
  <?php endif; ?>

　
こちらの処理により見事日次つまり、AM00:00のタイミングでバナーが自動で切り替わる処理を実現できました。

JavaScriptでの実装

サーバ側の言語はPHP以外にも様々ですが、クライアント側はJavaScript一択なので、JavaScriptによる実装も書いてみました。サーバ側でPHP以外の言語を使っている方はこちらを参考にしていただければと思います。

まずはhtmlにバナーの部品をおいておきます。imgタグのsrcはJavaScriptで動的に設定するので空にしておいて問題ありません。JavaScriptから制御できるようidを指定しておきます。

　　
  <a href="(遷移先URL)"><img id="bannar" src=""></a>

　
こちらがJavaScriptのコードになります。

　　
    <script type="text/javascript">
        window.onload = function() {
            const today = new Date();
            const base = new Date(2021, 1, 1, 0, 0, 0);
            const diff_ms = today.getTime() - base.getTime();
            const diff_day = Math.floor(diff_ms / (1000 * 60 * 60 * 24));
            if (diff_day % 2 == 1) {
                src_ = "(案1のURL)";
            } else {
                src_ = "(案2のURL)";
            }
            document.getElementById('bannar').setAttribute('src', src_);
        }
    </script>

　
考え方はPHPのコードと同じなので、

こちらでページが読み込まれた際にコードが実行されるようにしています。

　　
  window.onload = function() {
    (省略)
  }

　
JavaScriptのDateオブジェクトのgetTimeでは1970年1月1日00:00:00からの経過時間がミリ秒で取得されます。そのため「today.getTime() – base.getTime()」とすることで、基準に知事からの経過ミリ秒がわかるのですが、今回は経過日数を知りたいので、1000*60*60*24で割ることで日数を取得しています。この値は普通小数になるため整数にするためにMath.floorで小数点以下を切り捨てています。

　　
　　const diff_ms = today.getTime() - base.getTime();
    const diff_day = Math.floor(diff_ms / (1000 * 60 * 60 * 24));

　
最後にid指定でimg部品を取り出し、srcを設定しています。

　　
　　document.getElementById('bannar').setAttribute('src', src_);

最後に

WEB制作の現場ではバナーやボタンなどのデザイン案が複数あるときに、ABテストと呼ばれる手法を使ってどちらのデザインの方がクリック率が高くなるかを検証することがあります。ABテストでは利用者がページに訪れた際に、ランダムにデザインを切り替え、それぞれのデザインでクリックされた回数を記録していきます。一定日数経過後にその回数からどちらのデザインの方が優れているのか、あるいは差がないのかを統計の検定という手法で判定します。

ABテストの観点からは日次でデザインを切り替えるのではなく、ランダムにデザインを切り替える実装の方が好ましいですが、ABテストのためのプラグイン等を入れなくても少なくともバナーの切り替えに関しては本記事で紹介したような方法で実装できます。

なお、ABテストなど統計の手法を考え方から学んでみたい方にはこちらのセミナーがおすすめです。