<Webキャンペーンが表示される基本的な流れ>

1.Web SDKの動作開始：訪問者の行動を検知

訪問者がWebサイトにアクセスすると、サイトに組み込まれたプログラム「Web SDK」（ビーコンとも呼ばれます）が動作を開始します。
Web SDKは、訪問者の行動（どのページを見たか等）を検知し、その情報をPersonalizationのサーバーへ送信します。
Personalization では定義された Webテンプレートに基づいて次の通りデータを準備して、ユーザーに応答します。

2.サーバーサイドでの処理：訪問者に合わせた表示用データの準備

Web SDKから送られた情報と、Personalizationに蓄積されている訪問者のデータ（過去の行動履歴など）を元に、Personalizationで処理が行われます。
ここでの処理の一つとして、「Serverside Code」が動作し、データを準備します。
このデータには、キャンペーンの内容だけでなく、必要に応じて Personalization の保持する該当ユーザーの情報（氏名や会員ランクなど）を含めることも可能です。（FAQ Q1参照）

3.クライアントサイドへのデータ送信：準備したデータをブラウザへ

Personalization で準備された表示用データが、訪問者の Webブラウザ（クライアントサイド）へ送信されます。

4. Clientside Code の実行：訪問者ブラウザ側での表示準備

表示用データを受け取った訪問者のブラウザ側で、キャンペーンテンプレートに含まれる「Clientside Code」が実行されます。
このコードは、受け取った表示用データを処理し、最終的な表示内容を組み立てる準備を行います。

5.HandlebarsによるHTML生成やCSS 適用：表示内容の組み立て

Handlebarsは、訪問者ごとにパーソナライズされたHTMLコンテンツ（Webページに表示される内容の骨組み）を動的に生成します。

【重要】
Handlebarsは、データに基づいて表示内容の骨組みとなるHTMLを作成する役割を担います。
そのHTMLの具体的なデザイン（色、フォント、レイアウトなど）や、ギミックなどの動作といったインタラクティブな要素は、通常、キャンペーンテンプレートに含まれるHTML/CSSやJavaScriptといったWebサイト側のフロントエンド技術によって実現されます。これらはPersonalization の機能固有のものではなく、一般的なフロントエンド技術に依存します。（FAQ Q 2 参照）

6. Content Zoneへのレンダリング：組み立てた内容をWebサイトへ表示

Handlebarsで生成されたHTMLコンテンツは、Clientside Codeによって、Webサイト上のあらかじめ指定された表示領域である「Content Zone」に挿入され表示されます。

7. キャンペーン統計のトラッキング：効果測定の準備

キャンペーンが表示されたこと（インプレッション）やクリックされたことなどが記録され、後で効果測定ができるようにPersonalizationサーバーへ送信されます。

参考)
詳細はこちらのドキュメントおよび配下のドキュメントに記載されています。

FAQ：よくある質問

Q1: Webキャンペーンのコンテンツで訪問者のユーザー情報（名前や会員ランクなど）を利用できますか？
A1: はい、可能です。

例えば上記ステップ 2 で、「Serverside Code」を利用して訪問者のユーザー情報を取得し、表示用データに含めることができます。
表示用データに含まれたユーザー情報は、ステップ 5 の Handlebars テンプレートを利用して HTMLコンテンツ内に表示させたり、表示内容を出し分ける条件として利用したりすることが可能です。

具体的には、こちらのドキュメントの "Server-Side TypeScript Example" に Handlebars テンプレートにサーバーサイドの情報を折り返す方法の一例があります。Handlebars テンプレートではこちらのドキュメントのような方式でサーバーサイドの情報を利用したコードを記載できます。

この仕組みを使って例えば以下のようなことが可能となります。

活用例:
・Webキャンペーンのコンテンツにユーザーの名前を差し込む
・会員ランクに応じて表示内容を出し分ける

なお、この方式を用いて Web サイト上のユーザー情報を Personalization の仕組みを利用する方式を見据えた問い合わせがあります。
Personalization は、手持ちの Web サイトのログインのシステムや、ユーザーのデータベースの情報等とは連動しておりませんので、整合性をPersonalizationで担保することは難しく、推奨しません。しかしながら、何らかの制約により Personalization で実装しなくてはならない場合、様々なシナリオにおける入念な試験を事前に検討ください。

Q2: Webキャンペーンのコンテンツの『見た目』や『動作』が期待通りにならない
    あるいは、コンテンツの見た目や動作をある要件の通りに実装したいが実現が可能か

A2: PersonalizationはWebサイトの最終的な「見た目」（デザイン、レイアウト）や「動作」（ボタンの反応、アニメーションなど）を直接制御する機能は持っておりません。
これらは、お客様のWebサイトやキャンペーンテンプレートを構成するHTML、CSS、JavaScriptといったフロントエンド技術によって実現されます。そのため、これらのフロントエンド技術に関する詳細なコーディング、サンプル提供やデバッグ、問題修正などは、Webサイトやテンプレートの構築を担当されている開発者様への確認をお願いします。
一方で、ユーザー情報が正しく準備されているか、ターゲット設定が適切か、HTMLが指定のContent Zoneに配信されているか、といった点はPersonalizationの機能に依存することが多いため、この点は対応が可能です。

【Webサイト開発者への相談を推奨する例】
下記は HTML/CSS/JavaScript 、およびブラウザー固有の挙動といった一般的な Web のフロントエンド技術に依存するため 開発者に確認することを推奨します。
・画像の表示サイズや位置を調整したい
・ポップアップに特定のギミックをつけたい
・画像の余白が想定した通りにならない
・ボタンをクリックしても反応しない、または意図したページに移動しない
・特定のブラウザ（例: スマートフォンの特定のブラウザ）やデバイスで表示が崩れてしまう

【Personalizationの挙動として調査可能な例】
・表示用データに含まれるはずのユーザー情報（例: 会員ランク）がキャンペーンのHTMLに反映されていない
・ターゲットとして設定した条件と違う訪問者にキャンペーンが表示されているように見える
・設定したContent Zoneとは異なる位置にキャンペーンが表示される