DrSmile社のウェブサイトを最適化し、最先端の実験を迅速に行えるようにする

#Jamstack #JavaScript #WordPress #cdn #static_site_generator
#CSS #Next .js #Netlify #HTML #Gatsby #Hugo

今回はDrSmile社の事例について、ご紹介いたします！

DrSmileの急速な成長を後押しするために、迅速な実験を行える最適な環境を構築しました。
著者：Thom Krupa 2021年10月7日
原文：https://bejamas.io/blog/ab-testing-edge-case-study/

1. DrSmileについて

2016年に設立されたDrSmileは、ヨーロッパ中で注目されている歯科会社です。彼らの使命は、歯科市場を民主化し、すべての人が自信を持って笑顔になれるようにすることです。彼らは、最新で手頃な価格の歯の矯正用透明アライナー技術という主力製品を通じて、それを実現してきました。

2. DrSmileとBejamas：Jamstackへの道

Bejamasのリード・デベロッパーの一人であるPatrycja Dzaluk氏は、DrSmileに関する素晴らしいケーススタディを書いています。その中で、DrSmileがどのようにして、現代的な歯科医療を提供する企業としての評判を確立したのか、ハイテクを駆使したアプローチや独自の専門知識の活用、最高の顧客サービスの提供にどのように力を注いだのかが紹介されています。

自分たちのマーケティングが自分たちの評判に合っているかどうかを確認し続けるためには、継続的にテストを行う必要があると考えたのです。そこで彼らは、成功した成長戦略を支え、強化するために、A/Bテスト戦略を導入したいと考えました。

3. A/B/nテストとは？

A/Bテストとは、パフォーマンスに関する特定のKPIを測定するために、同じページの複数のバリエーションをテストする手法のことです。グロースマーケティングでは、実験を支援することが一般的です。A/Bテストの主な目的は、既存のウェブサイトや製品を継続的に改善し、同じようなページの異なるバージョンに対するユーザーの反応を知ることです。

例えば、簡単なヒーローのテキストと画像をテストして、全く異なる2つのバージョンのページを比較することができます。

A/Bテストを実行する最も簡単な方法は、Optimizely、VWO、Google Optimizeなど、このような実験を行うために設計されたアプリを使用することです。

さて、これらのツールを導入する際には、いくつかのルートがあります。そこで、A/Bテスト戦略を実施する際の主な課題について説明します。

3－1 A/Bテスト導入の課題とは？

A/Bテストは、マーケターがマーケティングの成功を評価するための優れた手法ですが、そのためには導入戦略が必要です。そして、それぞれの導入戦略には、いくつかの副作用が伴います。

このような実験を行う最も簡単な方法を考えると、クライアントサイドのJSスクリプトをインストールすればいい、ということになります。そうすることで、各ツールがスニペットを生成し、テストしたいページの要素に入力してもらいます。

ここでの問題は、スタイルのちらつきを避けるために、スクリプトがレンダーブロックを行っていることです。つまり、スクリプトが読み込まれて実行されるまで、ブラウザは何もレンダリングできないということです。

・テスト結果に影響を与える可能性のある深刻なパフォーマンス問題
・読み込みが遅くなり、コンバージョン率が低下する
・ひどいユーザーエクスペリエンス

それならば、サーバーサイド・エクスペリメントを使ってA/Bテストを実施しよう、ということになります。しかし、このオプションは、Jamstackをフル活用する場合には、私たちが持っていないサーバーを必要とします。言うまでもなく、スケーラビリティやキャッシングはサーバーにとって容易ではありません。

Jamstackを完全に活用するためには、できるだけユーザーの近くで実験を行い、最速の体験を保証したいと考えています。そして、ここからがEdgeの出番です。

Cloudflare WorkersやNetlify Edge Handlersなどのサーバーレス機能を、興味深い改良を加えて利用することができます。コールドスタートを最小限に抑えることができるので、ページ上での直接変更にも最適です。

4. Edgeとは？

Edgeコンピューティングでは、ユーザーのすぐ近くでコードを実行することができます。この特性により、レイテンシーが減少し、レスポンスが向上します。標準的なセットアップでは、すべてのコードはオリジンサーバーまたはクラウドデータセンターで実行されます。エッジ関数の実行限界は50ミリ秒程度であることが多いため、Edgeは、小さなスクリプトを高速に実行したいときに最適な選択肢です。

一般的な使用例としては、以下のようなものがあります。
・ユーザー認証。Edgeで直接ユーザーを確認することができます。
・コンテンツのローカライズ。
　リクエストの場所に応じてコンテンツを翻訳します。
・パーソナライズド広告
・A/Bテスト

5. Edgeでのカスタマイズ

DrSmileでは、Cloudflare Workersを使ってHTMLレスポンスを修正し、各ユーザーに異なるバリエーションの実験を提供することにしました。この応答は、当社がEdgeで生成し、cookiesに保存した匿名のユーザーIDに基づいています。

IDを取得したら、OptimizelyのAPIからデータを取得し、選択されたバリアントを表示します。

ここでは、新規ユーザーがウェブサイトにアクセスしたときの様子をご紹介します。

1.ユーザーIDがない場合は、ワーカーが新しい固有のIDを作成します。
2.作業者はOptimizelyに実験のために選択されたバリアントを求めます。
3.ワーカーは、HTMLを修正し、カスタマイズされたバージョンのページを
   ユーザーに返します。
4.ユーザーは、cookieのヘッダーにIDを取得します。

リピーターの場合は、cookieに保存されているIDをすでに知っているので、最初のステップは省略できます。戻ってきたユーザーを検出すると、ワーカーは同じバリアントで戻ってきて、複数のセッションでテストの一貫性を保ちます。

6. エディターエクスペリエンスの変革

今こそ、エディター・エクスペリエンスを向上させる時です。ここでは、私たちが取り組んでいることを紹介します。DrSmileはヘッドレスCMSとしてContentfulを使用しており、OptimizelyはContentfulに接続するプラグインを用意しています。

そこで、編集者が簡単に実験できるように、プレビュー環境を作りました。

各コンポーネントにはシンプルなタブがあり、コントロールやバージョンを切り替えることができます。

7. 結果

大きな成果を得るためには、目的に応じた最適な戦略を立てていくことが必要です。DrSmile社は、顧客に最も洗練されたデジタル体験を提供したいと考えており、そのためにはJamstackを中心としたアーキテクチャが適していると考えました。

ユーザーフレンドリーなエディタを使用して、マーケティングチームは数分でA/Bテストを作成、実行することができます。顧客体験がいかに重要であるかを知っているので、素早くテストできることで、どのコンテンツや機能が顧客にとって最適であるかを自信を持って判断できるようになりました。

技術面では、Cloudflareのグローバルネットワークを活用できるCloudflare Workersを選択したことが成功の一因だと考えています。また、Cloudflare Workersへのデプロイは1秒以内にグローバルに伝播するため、ユーザーへの実験配信をスムーズに行う上で重要な役割を果たしています。軽量であるため、Cloudflare Workersはすべてのリクエストの前に実行することができ、ユーザーがどの実験を行うべきかを決定します。

7－1 コア・ウェブ・バイタルの修正

これらは過去30日間のデータです。全体像を見てみると、何ヶ月も前からパフォーマンスの問題に悩まされていました。

新しい設定は7月に導入され、それ以来、パフォーマンスが向上しています。8月は、DrSmileがCore Web Vitalsの評価に完全に準拠した最初の月です。

DrSmileのJosé Adameさんは次のように語っています。

クライアント側のA/Bテストアプリで発生するフリッカーに対処することは、これまでは、必要不可欠な苦痛でした。しかし、今はもうそんなことをしなくてよいのです。Optimizely Full StackとCloudflare Workers Edgeの技術を組み合わせることで、シームレスで高速なユーザーエクスペリエンスを実現するとともに、トラッキングやレポーティングを正確に行うことができます。
Alberto Adame
DrSmileのシニア・プロダクト・マネージャー

私たちは、BejamasとDrSmileがコラボレーションできたことをとても嬉しく思います。そして、彼らのサイトがJamstackを使用してこれからも繁栄していくことを期待しています！

最後まで読んで下さり、ありがとうございました。

Jamstackに関心がある方はこちらまでお問合せください！
株式会社ヒューマンサイエンス
https://www.science.co.jp/document/jamstack.html