静的要素とは、通常、ユーザーの操作や入力に応じて変化せず、一定の内容を保持するコンテンツのことを指します。これらの要素は、HTMLとCSSのコードを使用して簡単に作成することができます。たとえば、企業のウェブサイトのヘッダーやフッターにある製品のロゴやナビゲーションメニューは、静的な要素です。

一方、動的な要素は、ウェブサイト上のユーザーの相互作用の種類、アクセスされる時期や場所、ユーザーの設定、使用されるデバイスなどに基づいて頻繁に変化し、より機能的です。これにはHTMLとCSSだけでなく、スクリプト（サーバーとクライアント）も含まれ、ビジネスのウェブサイト上で動的に変化するコンテンツを表示します。例えば、ユーザーの位置に基づいて変化するウェブサイト上の天気や気温、閲覧されている商品によって変化するECサイト上の商品説明や価格などです。

バリエーション内の静的および動的コンテンツを編集するための適切な方法を選択する

ウェブサイト上の動的な要素のHTMLを編集することがどのような効果をもたらすのかを理解するための例を見てみましょう：あなたはSaaSビジネスを所有しており、ウェブページに着陸するすべての新規ユーザーに対してパーソナライズされたコンテンツを持つCTAボタンの色をテストしたいと思っています。「ルーシー、今すぐトライアルを開始しましょう！」。

ここでは、ユーザーの入力に基づいてユーザー名としての「Lucy」という名前が動的に変化し、このボタンの色を緑から青に変更することを決定します。エディタのフローティングツールバーを使用するか、このコンテンツに影響を与えずにボタンのCSSカラープロパティを変更します。

このボタンは、A/Bテストのこのバリエーションに含まれるすべてのウェブページで青色になります。

ただし、異なるユーザーに基づいて変化する動的に生成された名前「ルーシー」を含む「今すぐ始める、ルーシー！」というテキストに置き換える場合、このテキストの一部とともに、テキスト全体が静的なコンテンツになります。

これはつまり、このA/Bテストのバリエーションに含まれるすべてのウェブページで、「<username>、今すぐトライアルを開始しましょう！」ボタンは代わりに「ルーシー、今すぐ始めましょう！」と表示されます。ユーザーが名前として入力した内容に関係なく、です。