ClientContext

ClientContextは、現在のページと訪問者に関する特定の情報を提供するメカニズムです。 Ctrl+Alt+c(Windows)または​control+option-c(Mac)を使用して開くことができます。

パブリッシュ環境とオーサー環境の両方で、次の情報が表示されます。

• 訪問者。インスタンス固有の情報がリクエストされたものであるか、派生されたものであるかによって異なります。
• ページタグおよび現在の訪問者がそれらのタグにアクセスした回数（この情報はマウスを特定のタグの上に置くと表示されます）。
• ページ情報。
• 技術的な環境に関する情報（IP アドレス、ブラウザー、画面解像度など）。
• 現在解決されているセグメント。

アイコン（オーサー環境でのみ使用可能）を使用すると、次の ClientContext の詳細を設定できます。

• 編集 新しいページが開き、プロファイルのプロパティを編集、追加または削除できます。

• 読み込み テストを実行するプロファイルをリストから選択してプロファイルを読み込むことができます。

• リセット プロファイルを現在のユーザーのプロファイルにリセットできます。

使用できる ClientContext のコンポーネント

ClientContext には、（「編集」を使用して選択した内容に応じて）次のプロパティが表示されます。

サーファ ー情報次のクライアント側情報が表示されます。

• IPアドレス
• ​​検索エンジンのリファラルに使用するキーワード
• 使用中の​browser
• 使用中の​OS（オペレーティングシステム）
• 画面​解像度
• マウスのX​位置
• マウスのY​位置

アクティビテ ィストリーム様々なプラットフォームにおけるユーザーのソーシャルアクティビティに関する情報を提供します。例えば、AEMフォーラム、ブログ、評価などです。

​​キャンペーン作成者は、キャンペーンの特定のエクスペリエンスをシミュレートできます。このコンポーネントは通常のキャンペーンの結果とエクスペリエンスの選択をオーバーライドし、各種配列のテストを有効にします。

キャンペーンの解決は、通常、キャンペーンのpriorityプロパティに基づいておこなわれます。 エクスペリエンスは通常、分類に基づいて選択されます。

​​買い物かご製品エントリ（タイトル、数量、priceFormattedなど）、解決されたプロモーション（タイトル、メッセージなど）を含む買い物かご情報を表示します。バウチャー（コード、説明など）などの買い物かごの情報を示します。

買い物かごセッションストアは、ClientContextCartServlet を使用して（分類の変更に基づく）解決済みのプロモーションの変更をサーバーに通知します。

汎用ス トアは、ストアのコンテンツを表示する汎用コンポーネントです。汎用ストアのプロパティコンポーネントの下位レベルのバージョンです。

カスタマイズされた方法でデータを表示する JS レンダラーで汎用ストアを設定する必要があります。

汎用ストアの プロパティストアのコンテンツを表示する汎用コンポーネントです。汎用ストアのプロパティコンポーネントの上位レベルのバージョンです。

汎用ストアのプロパティコンポーネントには、設定されたプロパティを（サムネールと共に）リストするデフォルトのレンダラーが含まれます。

​​位置情報クライアントの緯度と経度を表示します。HTML5 Geolocation API を使用して現在の位置についてブラウザーでクエリを実行します。その結果、訪問者にポップアップが表示され、場所の共有に同意するかどうかを確認するブラウザーが表示されます。

コンテキストクラウドで表示されると、コンポーネントは Google API を使用してマップをサムネールとして表示します。コンポーネントは Google API の使用制限に従います。

JSONP Storeイ ンストールに依存するコンテンツを表示するコンポーネント。

JSONP 標準は JSON を補完し、同一生成元ポリシーを回避します（Web アプリケーションが別のドメインにあるサーバーと通信できないようにします）。これは、JSONオブジェクトを他のドメイン（同じオリジンポリシーに対して許可される例外）から<script>として読み込めるように、関数呼び出しでラッピングする構成です。

JSONP ストアは他のストアと同じですが、別のドメインからの情報を読み込むのに現在のドメインにその情報のプロキシを必要としない点が異なります。JSONP を介して ClientContext にデータを保存する例を参照してください。

プロファ イルデータ：ユーザープロファイルで収集された情報を表示します。例えば、性別、年齢、電子メールアドレスなどです。

解決さ れたセグメント現在解決されているセグメントを表示します（多くの場合、ClientContextに表示される他の情報に依存しています）。これは、キャンペーンを設定するときに参考となります。

例えば、マウスが現在ウィンドウの左または右の部分の上にあるかどうかなどです。このセグメントは主にテストに使用されます。変更は即座に確認できます。

ソーシャルグ ラフユーザーの友達とフォロワーのソーシャルグラフを表示します。

Tag Cloud現在 のページに設定されたタグと、サイト閲覧中に収集されたタグを表示します。タグの上にマウスを移動すると、現在のユーザーがその特定のタグを保持しているページにアクセスした回数が表示されます。

テクニカル ストアこのコンポーネントは、インストール環境によって異なります。

​​ViewedProducts買い物客が閲覧した製品を追跡します。最近閲覧した商品や、最近閲覧した商品のうち買い物かごに入っていない商品でクエリを実行できます。

このセッションストアにデフォルトの ClientContext コンポーネントはありません。

詳しくは、ClientContext の詳細を参照してください。

ClientContext プロファイルの変更

ClientContext では、次の詳細をインタラクティブに変更できます。

• ClientContext で使用されるプロファイルを変更すると、現在のページで様々なユーザーに対して表示されるものとは異なるエクスペリエンスが表示されます。
• ユーザープロファイルのほか、プロファイルの詳細を変更して様々な状況下でページエクスペリエンスがどのように異なるかを確認できます。

新しいユーザープロファイルの読み込み

次のいずれかの方法でプロファイルを変更できます。

• 読み込みアイコンを使用
• 選択スライダーを使用

完了したら、プロファイルをリセットできます。

プロファイルの読み込みアイコンを使用した新しいユーザープロファイルの読み込み

1. 次のプロファイルの読み込みアイコンをクリックします。

   

2. ダイアログが開きます。ここで読み込むプロファイルを選択できます。

   

3. 「OK」をクリックして読み込みます。

選択スライダーを使用した新しいユーザープロファイルの読み込み

次の選択スライダーを使用してプロファイルを選択することもできます。

1. 現在のユーザーを表すアイコンをダブルクリックします。セレクターが開きます。矢印で移動し、使用可能なプロファイルを確認します。

   

2. 読み込むプロファイルをクリックします。詳細が読み込まれたら、セレクター以外の場所をクリックしてセレクターを閉じます。

プロファイルの現在のユーザーへのリセット

1. 次のリセットアイコンを使用して ClientContext のプロファイルを現在のユーザーのものに戻します。

   

ブラウザープラットフォームの変更

1. ブラウザープラットフォームを表すアイコンをダブルクリックします。セレクターが開きます。矢印で移動し、使用可能なプラットフォームやブラウザーを確認します。

   

2. 読み込むブラウザープラットフォームをクリックします。詳細が読み込まれたら、セレクター以外の場所をクリックしてセレクターを閉じます。

位置情報の変更

1. 位置情報アイコンをダブルクリックします。展開されたマップが開きます。ここでマーカーを新しい位置にドラッグできます。

   

2. マップ以外の場所をクリックしてマップを閉じます。

タグ選択の変更

1. ClientContext のタグクラウドセクションをダブルクリックします。ダイアログが開きます。ここでタグを選択できます。

   

2. 「OK」をクリックして ClientContext に読み込みます。

ClientContext の編集

ClientContext の編集を使用して、特定のプロパティの値を設定（またはリセット）したり、新しいプロパティの追加や不要になったプロパティの削除をおこなえます。

プロパティの詳細の編集

ClientContext を編集して、特定のプロパティの値を設定（またはリセット）できます。これにより、特定のシナリオをテストできます（特にセグメント化とキャンペーンで役立ちます）。

プロパティコンポーネントの追加

ClientContextデザインページ​を開いた後、使用可能なコンポーネントを使用して、新しいプロパティを追加​することもできます（コンポーネントは、サイドキックまたは​Drag components or assets here​をダブルクリックした後に開く​Insert New Component<a5/ダイアログから表示されます）ボックス):

プロパティコンポーネントの削除

ClientContext デザインページ​を開いたら、不要になったプロパティを​削除​できます。このようなプロパティには、初期設定のまますぐに使用できるプロパティがあります。「リセット」を使用すると、プロパティが削除された場合に元に戻すことができます。

JSONP を介した ClientContext へのデータの保存

この例に従って JSONP ストアコンテキストストアコンポーネントを使用して、外部データを ClientContext に追加します。次に、そのデータからの情報に基づいてセグメントを作成します。この例では、WIPmania.com が提供する JSONP サービスを使用します。このサービスは、Web クライアントの IP アドレスに基づいて位置情報を返します。

この例は、Geometrixx Outdoors のサンプル Web サイトを使用して ClientContext にアクセスし、作成したセグメントをテストします。ClientContext が有効になっているページであれば、別の Web サイトを使用できます（ページへの ClientContext の追加を参照）。

JSONP ストアコンポーネントの追加

JSONP ストアコンポーネントを ClientContext に追加して、Web クライアントの位置情報の取得と保存に使用できます。

1. AEM オーサーインスタンスの Geometrixx Outdoors サイトの英語のホームページを開きます(https://localhost:4502/content/geometrixx-outdoors/en.html)。

2. ClientContextを開くには、Ctrl + Alt + Cキー(Windows)またはControl + Option + Cキー(Mac)を押します。

3. ClientContext の上部の編集アイコンをクリックして ClientContext デザイナーを開きます。

   

4. JSONP ストアコンポーネントを ClientContext にドラッグします。

   

5. コンポーネントをダブルクリックして編集ダイアログを開きます。

6. 「JSONP サービスの URL」ボックスに次の URL を入力し、「ストアを取得」をクリックします。

   https://api.wipmania.com/jsonp?callback=${callback}

   コンポーネントが JSONP サービスを呼び出し、返されたデータに含まれるすべてのプロパティがリストされます。リスト内のプロパティは、ClientContext で使用できるプロパティです。

   

7. 「OK」をクリックします。

8. Geometrixx Outdoors のホームページに戻り、ページを更新します。これで、ClientContext に JSONP ストアコンポーネントからの情報が取り込まれます。

   

セグメントの作成

JSONP ストアコンポーネントを使用して作成したセッションストアからのデータを使用します。セグメントはセッションストアの緯度と現在の日付から、クライアントの場所が冬時間であるかどうかを判断します。

1. Webブラウザーでツールコンソールを開きます(https://localhost:4502/miscadmin#/etc)。

2. フォルダーツリーで、Tools/Segmentation フォルダーを選択して、新規／新しいフォルダーをクリックします。次のプロパティ値を指定して「作成」をクリックします。

   • 名前：mysegments
   • タイトル：My Segments

3. My Segments フォルダーを選択して、新規／新しいページをクリックします。

   1. 「タイトル」には「Winter」と入力します。
   2. 「セグメント」テンプレートを選択します。
   3. 「作成」をクリックします。

4. Winter セグメントを右クリックして「開く」をクリックします。

5. 汎用ストアのプロパティをデフォルトの AND コンテナにドラッグします。

   

6. コンポーネントをダブルクリックして編集ダイアログを開き、次のプロパティ値を指定して「OK」をクリックします。

   • ストア：wipmania
   • プロパティ名：latitude
   • 演算子：is greater than
   • プロパティ値：30

7. スクリプトコンポーネントを同じ AND コンテナにドラッグし、その編集ダイアログを開きます。次のスクリプトを追加して「OK」をクリックします。

   3 < new Date().getMonth() < 12