サンプルの Experience を作成する

今回は新しいパーソナライズの設定を作成するにあたって、Experience から手プレートを利用して作成をしていきます。まず Sitecore Personalize の管理画面に移動をしてください。以下の画面は初期設定で何もない状況です。

右上の Create のボタンをクリックすると３つほど選択肢が出ます。今回は Web でのパーソナライズをするため、Web を選択します。

今回はわかりやすく、Sample Experience という名前で作成をします。

まだ空っぽですが、パーソナライズの設定の準備ができました。

コンテンツの作成

上記の画面を見ると、No content created yet とコンテンツが作成されていない状況を確認することができます。ここで、Create variant のボタンをクリックすると、テンプレートの選択が表示されます。

今回は、Corner Popup (Boxever Library) を選択します。すると画面が変わって、すでにサンプルのポップアップが表示されています。

サンプルで利用するパラメータは右側に表示されている画面で設定をすることができます。例えばポップアップの画像に関して、画像の URL を追加すると以下のように画像が追加されます。

詳細を確認する

このコンポーネントはどのように作成されているのでしょうか？ここは Advanced Edit のボタンをクリックすると、以下のように編集画面が変わります。

このテンプレートで用意されている HTML や CSS 、JavaScript が用意されており、それぞれがこの右側の項目で入力できるように設定されています。例えば背景となる画像に関しては、CSS で以下のように定義されています。

/*
[[Image URL | string || {required:true, group: General, order: 1}]]
*/

#pers-{{ref}} #pers-transition-card .img-container__image {
    margin: 0;
    background: [[Background Image Colour]];
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-h4);
    background-image: url("[[Image URL]]");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

HTML やスタイルシートに対して変数を設定して、実際にはプレビューでは入力して作成をするようにしています。サンプルをベースにしてテンプレートを作成して登録することも可能です。

今回はデフォルトのままで保存をして、サンプルの準備が完了となります。

まとめ

テキストやリンクの URL などを設定してこのパーソナライズの設定を完了します。これで、サンプルの準備ができました。このサンプルを使いながら、ポップアップを表示する部分を作成していきたいと思います。

関連タグ

• Personalize