チュートリアル: Preference Center のカスタマイズ

Current version: 10.1

Preference Center により、ユーザーは参加したいマーケティング キャンペーンを指定でき、希望する場合は今後のすべてのメール キャンペーンをオプトアウトできます。Preference Center のデフォルトの Sitecore ブランドを変更して、重要な設定を指定できます。以下の例では、デフォルトのブランドが左側に表示され、カスタム ブランドが右側に表示されています。

以下をカスタマイズできます。

  • 1. Preference Center のタイトルと色

  • 2. ヘッダーのロゴとはじめに

  • 3. マーケティング カテゴリー、タイトル、説明文

  • 4. 購読中止のテキスト

  • 5. [購読更新] ボタン

このトピックでは、次の方法について説明します。

マーケティング キャンペーン カテゴリー、タイトル、説明文を定義する

デフォルトのレイアウトを使用すると、定義した各カテゴリーが Preference Center で個別のセクションとして表示されます。マーケティング キャンペーン カテゴリーは、マーケティング カテゴリー グループごとに Preference Center に追加されます。

マーケティング キャンペーン カテゴリーを定義するには:

  1. コンテンツ エディターで、[マーケティング コントロール パネル] (sitecore/System/Marketing Control Panel) に移動します。

  2. [タクソノミー] フォルダーを展開し、[マーケティング カテゴリー] を右クリックします。そして、挿入、フォルダーをクリックして、マーケティング カテゴリー グループに追加します。

  3. 新しく作成したフォルダーを右クリックして、[挿入、テンプレートから挿入] をクリックします。

  4. [テンプレートから挿入] ダイアログ ボックスでTemplates/System/Analytics/Marketing Taxonomy/Marketing categoryに移動し、[マーケティング カテゴリー] を選択します。

    Insert from Marketing category template.

  5. [アイテム名] フィールドに、サブスクリプション カテゴリーの名前 (たとえば、ニュースレター) を入力して、[挿入] をクリックします。

  6. 追加のサブスクリプション セクションを定義するには、手順 3 ～ 5 を繰り返します。

  7. コンテンツ ツリーで先ほど定義したサブスクリプション カテゴリーの 1 つをクリックし、[コンテンツ] タブの [全般] セクションの [説明] フィールドで、[エディターを表示] ハイパーリンクをクリックします。

  8. [リッチ テキスト エディター] ダイアログ ボックスで、キャンペーン カテゴリーの説明を入力し、[OK] をクリックします。

  9. すべてのマーケティング カテゴリーを定義したら、コンテンツ ツリーで sitecore/System/Marketing Control Panelに移動します。そこで、[タクソノミー] フォルダーを展開してから、[キャンペーン グループ] をクリックします。

  10. リボンで、[タクソノミー] タブをクリックしてから、[デプロイ] をクリックします。

    The Taxonomy tab.

メディア ライブラリに新しいロゴをアップロードする

ロゴをメール設定センターに表示するには、まずロゴをメディア ライブラリにアップロードしてから、サイトを再びパブリッシュする必要があります。

ロゴをアップロードするには:

  1. コンテンツ エディターのコンテンツ ツリーで、sitecore/Media Library/Imagesに移動します。

  2. [フォルダー] タブで [アップロード] をクリックします。

  3. [アップロード] ダイアログ ボックスで [ファイルを選ぶ] をクリックし、ロゴ画像ファイルが保存されている場所を参照します。

  4. ロゴファイルを選択して [開く] をクリックしてから、[アップロード] をクリックします。

  5. リボンの [保存] をクリックします。

ブランドのスタイルを適用する

ロゴと画像を Preference Center に表示するには、最初に設定する必要があります。

ロゴと画像を設定するには:

  1. コンテンツ エディターのコンテンツ ツリーで、Preference Center のオプションを定義するマネージャー ルートを選択します。

  2. [コンテンツ] タブをクリックします。

  3. [メッセージ生成] セクションの [ベース URL] フィールドに、メール メッセージ内のリンクおよび Web サイトでホストされている画像 (たとえば、http://your.host) の Web サイト アドレスを指定します。

  4. Embed Images チェック ボックスを選択します。

  5. [デフォルトのメッセージ ヘッダー] セクションの [差出人のアドレス] フィールドに、送信者のメール アドレス (たとえば、SendersName@abc.com) を入力します。

  6. [ブランディング] セクションで、ブランド名とロゴを指定します。Preference Center のデフォルト設定を使用すると、購読中止メッセージでブランド名が使用され、Preference Center の上部にロゴが挿入されます。

  7. [マーケティング カテゴリー] セクションで、最初の手順の手順 2 で定義したマーケティング カテゴリー グループをダブルクリックして、[選択済み] リストに移動します。

  8. 変更を保存します。

Preference Center のルック アンド フィールを変更する

会社のブランドを反映するように Preference Center をカスタマイズできます。デフォルトでは、Preference Center マーケティング グループ HTML には、マーケティング グループのサブスクリプション オプションと、マーケティング ルートに対して定義したカテゴリーが表示されます。

Preference Center のルック アンド フィールを変更するには:

  1. コンテンツ エディターで、選択した Preference Center のオプションを定義するマネージャー ルートを使用して、[コンテンツ] タブをクリックします。

  2. [Preference Center] セクションまで下にスクロールします。

  3. [Preference Center タイトル] フィールドで、[Preference Center] ダイアログ ボックスのタイトルを指定します。

  4. [Preference Center イントロ] で、[エディターを表示する] ハイパーリンクをクリックし、ユーザーに Preference Center を紹介します。

  5. [Preference Center レイアウト HTML] セクションで、[HTML を編集する] ハイパーリンクをクリックします。

  6. ヘッダーと送信ボタンの色を変更するには、以下を変更します。

    • [header] セクションを以下と置き換えます。

      RequestResponseshell
      header {
            height: 90px;
            border-top: 4px solid #9D008D;
            background-color: rgba(0,0,0,.8);
            padding: 0 15px;
            color: #fff;
          }

    • [header.before] セクションを以下と置き換えます。

      RequestResponseshell
       header:before {
    position: absolute;
    right: 0;
    top: 0px;
    display: block;
    background-repeat: no-repeat;
    width: 113px;
    height: 90px;
    content: "";
    border-top: 4px #9D008D;
    }header:before {
            position: absolute;
            right: 0;
            top: 0px;
            display: block;
            background-repeat: no-repeat;
            width: 113px;
            height: 90px;
            content: "";
            border-top: 4px #9D008D; and background-color: rgba(0,0,0,.8);
          }

    • [.exmPreferenceCenter form button] セクションで、[背景色] および [ボーダーの色] 属性を変更します。

    • .exmPreferenceCenter label .description .title] セクションで、行 color: #9D008D; を追加します。

  7. [OK] をクリックして変更を保存します。

変更をパブリッシュする

Preference Center への変更を表示するには、サイトの変更をパブリッシュする必要があります。

サイトの変更をパブリッシュするには:

  1. リボンで、[パブリッシュ] タブをクリックします。

  2. [パブリッシュ、サイトのパブリッシュ] をクリックします。

  3. デフォルト (スマート パブリッシュ) を受け入れ、[パブリッシュ] をクリックします。

  4. サイトがパブリッシュされたら、[閉じる] をクリックします。

変更を確認するには、Email Experience Manager で、左画像ブロックテンプレートを使用してメール キャンペーンを作成し、送信します。

Do you have some feedback for us?

If you have suggestions for improving this article,