Tailwind Logo

Personalize で利用をするサンプルの作成

Personalize

公開日: 2024-10-17

まず最初に Personalize で利用するサンプルを1つ作成したいと思います。Sitecore Personalize にはテンプレートという形でサンプルのコードが用意されているため、簡単なポップアップなどは何も書かずに簡単に実装できます。

サンプルの Experience を作成する

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

personalizesample01.png

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

personalizesample02.png

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

personalizesample03.png

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

personalizesample04.png

コンテンツの作成

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

personalizesample05.png

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

personalizesample06.png

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

personalizesample07.png

詳細を確認する

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

personalizesample09.png

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

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

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

personalizesample08.png

まとめ

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

関連タグ