メインコンテンツへスキップ

Web接客（オプション）

更新

対象サービス・関連トピック

ℹ️EngageCrosのみのオプションです。

目次

Web接客機能の概要

Web接客機能とは

お申込み手順

ご利用の流れ

Web接客機能の用語説明

プロジェクト

プロジェクトの新規作成と設定

プロジェクトの編集

プロジェクト名変更・対象ドメイン追加

埋め込みタグの発行

カスタムパラメータの追加と設定

カスタムパラメータのレコード検索

Webページへの埋め込みタグの追加

バナーテンプレート

バナーテンプレートの新規作成

オブジェクトのプロパティ設定

バナーテンプレートの編集

シナリオ

シナリオの新規作成

シナリオの編集

シナリオの公開・再公開

シナリオの停止

Web接客シナリオのレポート確認

イベント　※機能提供準備中

Web接客｜補足

カスタムパラメータとセグメントのバナー表示の挙動

ハッシュ化されたユニークID（ハッシュ値）とは

 

Web接客機能の概要

📝EngageCrosの「Web接客」機能は有償オプションです。

ご利用にはオプションのお申込みが必要ですので、担当営業またはサポートセンターまでお問合せください。

⇒「お申込み手順」参照

Web接客機能とは

Web接客とは、Webページ上にバナーを表示し、その表示数やクリック数をレポートに出力する機能です。

作成・設定したバナーをユーザの属性やサイトのページごとに出し分けたり、ABテストに利用したりすることで、サイト閲覧者のニーズなどの把握が可能です。


EngageCrosの管理画面でWeb接客用の埋め込みタグを発行し、ご運用のWebサイトにそのタグを設定することで、埋め込みタグ経由でバナーが表示されます。

 

お申込み手順

Web接客機能を利用するには、下記手順で適用申請を行います。

  1. 【お客様】担当営業またはサポートセンターにWeb接客機能適用を依頼
  2. 【お客様】Web接客で利用するコンタクトのカラムを提示
    💡このコンタクトのカラムを使ってバナーの出し分けを行います。
  3. 【当社】Web接客機能適用までの納期をご連絡
  4. 【当社】Web接客機能を適用

 

ご利用の流れ

Web接客機能は以下の流れで利用します。

STEP 内容 手順
STEP 1 アカウントのロール設定 EngageCros管理画面左メニュー＞［設定］で、既存アカウントに対して必要に応じてロール権限に「Web接客」を設定します。
STEP 2 Web接客のプロジェクトを作成し、埋め込みタグを取得 ［プロジェクト］＞［プロジェクトの新規作成と設定］参照

カスタムパラメータを利用する場合は下記を実施

  • Web接客共有鍵を取得
  • カスタムパラメータを設定
STEP 3 お客様にてご運用のWebページのHTMLヘッダに、Web接客のバナー表示用の埋め込みタグやコードを設定 ［プロジェクト］＞［Webページへの埋め込みタグの追加］参照
STEP 4 バナー作成 ［バナーテンプレート］および ［シナリオ］参照
STEP 5 バナーを表示させるためのシナリオを作成 ［シナリオ］＞［シナリオの新規作成］参照
STEP 6 作成したシナリオを公開
（Webページ上にバナーが表示される） 		［シナリオ］＞［シナリオの公開・再公開］参照
STEP 7 レポート確認 ［シナリオ］＞［Web接客シナリオのレポート確認］参照
STEP 8 （必要な場合、）シナリオ停止・再公開 ［シナリオ］＞［シナリオの停止］または［シナリオの公開・再公開］参照

 

Web接客機能の用語説明

用語 説明
プロジェクト

Web接客機能を管理する単位です。

1つのWebサイトにつき、1つの「プロジェクト」を設定します。

⚡プロジェクト作成上限数：3件
シナリオ

プロジェクトには、複数のシナリオを設定することができます。

各シナリオでは、バナーの配信方法、表示条件、公開期間などを設定します。

⚡公開シナリオ上限数：5件
バナー

バナーの表示内容（画像・テキスト・ボタン）、アクション、配置、サイズなどを設定します。

テンプレートを作成し、複数シナリオに設定することが可能です。

バナーは2種類あります。

◆テンプレートとして作成するバナー（上図の青枠のバナー）

複数シナリオに設定可能です。

⚡シナリオ上でバナーを編集・保存しても、その変更内容は元のバナーテンプレート側には反映されません。

💡テンプレート自体を更新する場合は、テンプレート編集画面から直接修正を行います。

◆シナリオ設定時に作成するバナー（上図のオレンジ枠のバナー）

そのバナーを設定したパターン上のみで利用可能です。

⚡テンプレート化や他シナリオでの利用は不可
カスタムパラメータ

Webサイトの来訪者から取得するリアルタイムな属性や行動情報（カスタムパラメータレコード）の項目です。

プロジェクトごとに必要な項目を定義し、バナーの表示条件として活用します。

⚡1プロジェクトの有効上限数5件、有効と無効を合わせて20件まで登録可

⚡削除不可

⚡一度無効化したものは、有効化できません

💡バナーシナリオ作成時における配信方法の選択肢名として表記されることもあります。　
レポート バナーのクリック結果等がシナリオごとに出力されます。

 

プロジェクト

プロジェクトは、Web接客のバナーを表示するWebサイト（ドメイン）ごとに作成します。

作成後、画面は以下3つのメニューで構成され、画面左側の垂直タブをクリックすることで各設定画面に切り替わります。

［プロジェクト］ プロジェクト名、対象ドメインの設定を行います
［埋め込みタグ］ Webサイトに設置する専用タグの発行・コピーが可能です
［カスタムパラメータ］ 接客条件に使用するカスタムパラメータの追加、無効化を行います

 

プロジェクトの新規作成と設定

  1. 左メニュー［Web接客］＞［プロジェクト］よりWeb接客プロジェクト一覧を表示
  2. 右上の［プロジェクト作成＋］ボタンをクリック
  3. 必要な情報を入力・設定する
項目 必須 説明
プロジェクト名 ●

Web接客のプロジェクト名を設定します。
プロジェクト名はWeb接客メニュー内に表示されます。

  • 最大32文字
対象ドメイン ●

Web接客で作成したバナーを表示するWebページのドメインを設定します。

  • 最大128文字
  • 英数字と記号（-と.）のみ利用可能

💡［＋ドメインを追加］をクリックすることで、最大3件までドメインを設定できます。 

⚡設定するドメインはバナーを表示させるWebページのドメインと完全一致している必要があります。
サブドメインをご利用の場合は、後方一致はできないため、完全一致で複数設定してください。
  1. ［登録］ボタンをクリックして登録
     
  2. プロジェクトを登録後、［＜］よりWeb接客プロジェクト一覧ページへ戻る
    プロジェクトを登録すると、左メニューの［Web接客］内にプロジェクト名のメニューが作成され、サブメニューとして［シナリオ］［イベント］が表示されます。
    💡プロジェクトは最大3件まで登録できます。
    ⚡作成したプロジェクトは削除できません。

 

プロジェクトの編集

  1. 左メニュー［Web接客］＞［プロジェクト］よりWeb接客プロジェクト一覧を表示
    1. 各タイトルをクリックすると、そのプロジェクトのシナリオ一覧表示が可能
  2. 一覧の操作列の3点リーダより［プロジェクトの編集］をクリック
  3. プロジェクト編集画面が表示される。
    1. プロジェクト名の変更や対象ドメインの追加が可能
    2. ［埋め込みタグ］をクリックすると、埋め込みタグの確認やJavaScriptのコピーが可能

プロジェクト名変更・対象ドメイン追加

プロジェクト画面では、プロジェクト名の変更や対象ドメインの追加が可能です。

更新後は、[保存] ボタンをクリックして、保存してください。

 

埋め込みタグの発行

  1. プロジェクト編集ページの垂直タブ［埋め込みタグ］をクリックして、埋め込みタグを表示
  2. コピーアイコンをクリックして埋め込みタグ文字列をコピー

‼️重要｜必ず実施してください

バナーを表示させるための事前準備として、この埋め込みタグを、バナーを表示するWebページに設定してください。

⇒「Webページへの埋め込みタグの追加」参照

 

カスタムパラメータの追加と設定

カスタムパラメータを利用する場合、事前に追加と設定を行います。

  1. プロジェクト編集ページの垂直タブ［カスタムパラメータ］をクリックして、設定画面を表示
     

  2. ［パラメータの追加］よりカスタムパラメータの編集画面を開き、取得したい属性や行動に合わせて各項目を設定
    ⚡Webサイト側でのカスタムパラメータ設定および値の取得処理を実装してください。

    項目 必須 説明
    物理名 ●

    カスタムパラメータの物理名を設定します。
    物理名は埋め込みコード内で利用します。

    • 最大32文字
    • 英数字('a-z','0-9')と下線('_')のみ利用可能

    ⚡再編集はできません。
    論理名 ●

    カスタムパラメータの論理名を設定します。
    論理名はカスタムパラメータバナーの表示条件設定画面に選択肢として　表示されます。

    • 最大20文字
    タイプ  

    カスタムパラメータのタイプを整数／文字列／真偽値／日時から1つ選択します。

    各タイムの詳細は「＜カスタムパラメータ「タイプ」詳細＞」参照

    ⚡各タイプに合致していない値が１つでも取得された場合、そのレコードはカスタムパラメータレコードに登録されません

    ⚡再編集はできません。

    ＜カスタムパラメータ「タイプ」詳細＞

      型 上限値 許容値 備考
    整数 integer 15桁 null

    少数は不可。少数を登録した場合、小数点以下は切り捨てられます。例）1.5 → 1

    全角数字は半角数字に自動置換されます。
    文字列 string 256 bytes 空文字, null UTF-8のみ可
    真偽値 boolean 0 / 1 null 0（true）または1（false）を取得
    日時 detetime 13桁までのミリ秒 null

    エポックミリ秒表示 

    📝エポックミリ秒とは、1970年1月1日 0時0分0秒（UTC：協定世界時）」を起点として、そこから何ミリ秒（1000分の1秒）経過したかを表す数字です。

    例）エポックミリ秒が「0」は「1970年1月1日 00:00:00.000 (UTC)」を表す

     

  3. 各項目を追加後、［追加］ボタンをクリックして登録 
     
  4. パラメータの追加後は、［保存］ボタンをクリックして保存
     

💡1つのプロジェクトにつき、有効なカスタムパラメータは最大5件、有効／無効を含めて合計20件まで登録可能です。

⚡一度保存したカスタムパラメータは無効化できますが、再有効化はできません。また、削除もできません。

 

カスタムパラメータのレコード検索

カスタムパラメータを利用して収集した来訪者のリアルタイムな行動や属性情報は、プロジェクトごとにユニークID（UIDなど）ごとに紐づくカスタムパラメータレコードとして蓄積されます。

カスタムパラメータのレコード検索を行うことで、意図通りに値が取得・反映されているかを確認することができます。

  1. 左メニュー［Web接客］＞［プロジェクト］よりWeb接客プロジェクト一覧を表示
    • 各タイトルをクリックすると、そのプロジェクトのシナリオ一覧表示が可能
  2. 一覧の操作列の3点リーダより［プロジェクトの編集］をクリック
  3. プロジェクト編集画面で［カスタムパラメータ］をクリック
  4. ［レコードの検索］ボタンを押下
    • 現在のレコード数（カスタムパラメータレコードに登録されているユニークID数）の確認が可能
  5. ［ユニークID］欄にユニークIDを入力し、［レコードを取得］ボタンを押下
  6. 該当するレコード内容が表示される
    ・［ユニークID］：UIDなどユーザを識別できる値のハッシュ値
    ・［パラメータ］：カスタムパラメータで登録された各パラメータ
    💡値がない場合は「-」が表示されます。
    💡真偽値は、trueは「0」、falseは「1」に置換されています。
    💡日時はエポックミリ秒に置換されています。
    💡1ユニークIDにつき、最新のデータ1件が表示されます。既存のレコードと最新の登録レコードに違いがある場合は異なる値のみ上書き更新されます。

⚡カスタムパラメータとして取得した値は、個人情報閲覧権限の設定にかかわらず、Web接客のロール権限を持つ全運用者が参照可能です。
 

Webページへの埋め込みタグの追加

バナーを表示させるために、プロジェクト作成時に発行された埋め込みタグを、バナーを表示するWebページのHTMLヘッダに設定します。
 

▼埋め込み手順（例）
⚡下記の手順は一例です。お客様のWebサイト管理に合わせて実施してください。

  1. 対象プロジェクトの編集画面（「プロジェクトの編集」参照）で、［埋め込みタグ］のコピーアイコンをクリックしてコピーする。　
  2. 1を、プロジェクト作成時に設定した対象ドメイン配下の全てのWebページのHTMLヘッダに追加

    💡将来的にページ表示などのトラッキングを可能にするため、プロジェクトで設定した対象ドメイン配下のすべてのページに、トラッキングコードを一律で埋め込んでください。

📝参考｜特定のユーザーにバナーを表示するJavaScriptタグの例

▼サンプルコード（全体）

<script type="text/javascript">
   (function () {
    var s = document.createElement('script');
    s.src = "{埋め込みタグのURL部分（https://～/index.js）を貼り付け}";
    s.defer = true;  
    s.onload = function() {
     exTracker.start();
    };
    document.head.appendChild(s);
  })();
</script>

▼解説

上記の「exTracker.start();」の括弧内に、お客様のWebページの来訪者を判別するための「UID（例：10001）」を下記のようにセットすることで、特定のユーザのみにバナーを表示させることができます。

exTracker.start('10001');　

「UID」は、EngageCrosのコンタクトと連携しているユーザを一意に識別するためのIDで、コンタクトテーブルの「uid」カラムに格納されている値です。

このバナーの表示制御を行うには、シナリオの［配信方法］を「セグメント」に設定します。

［配信方法］が「シングル」または「ABテスト」の場合は、上記括弧内は空欄のままで問題ありません。

具体的な利用例は下記のとおりです。

  1. エンドユーザーがECサイトへのログイン成功時に、UIDを保持しておく。（UIDはお客様システムで管理しており、かつ、EngageCrosに連携しているもの）
  2. Webページに埋め込んだJavaScriptの「exTracker.start();」の括弧内にエンドユーザのUIDの値をセットする。
  3. 条件に一致した、UIDに紐づくバナーが表示される。

 

📝参考｜カスタムパラメータを利用してバナーを表示するJavaScriptタグの例

▼サンプルコード（全体）

<script type="text/javascript">
  (function () {
     var s = document.createElement('script');
     s.src = "{EngageCrosから取得した埋め込みタグ}";
     s.defer = true;
    s.onload =async function() {
       // 1. 変数宣言を追加
      // uidを指定
        const uid = '{uid}';
      // saltを指定
        const salt = '{EngageCrosから取得したWeb接客共有鍵の値}';
       // 2. ハッシュ値の取得
        const encoder = new TextEncoder();
        const data = encoder.encode(uid + salt);
        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
        const hashArray = Array.from(new Uint8Array(hashBuffer));
        const hashUid = hashArray
        .map((b) => b.toString(16).padStart(2, '0'))
        .join('');
      // 3. SDK起動
        exTracker.start({
         uid: hashUid, 
         secure: true
        });
      // 4. カスタムパラメータ送信（定義）
      data = {
 　{カスタムパラメータの物理名}: {カスタムパラメータの値}, 
 };
       exTracker.sendCustomParameter(data);
     };
    document.head.appendChild(s);
  })();
</script>

▼解説

以下に、各部分ごとに説明します。

<script type="text/javascript">
  (function () {
     var s = document.createElement('script');
     s.src = "{EngageCrosから取得した埋め込みタグ}";
     s.defer = true;
    s.onload =async function() {

カスタムパラメータ利用時は「async」が必須です。

        // 1. 変数宣言を追加
      // uidを指定
        const uid = '{uid}';

システム側で動的に任意のUIDの値を設定します。

💡UIDに設定する値の例：会員の場合は会員ID（コンタクトに登録されているUIDなど）、非会員の場合はサイト訪問時に付与しているユーザを識別するIDなど。

       // saltを指定
        const salt = '{EngageCrosから取得したWeb接客共有鍵の値}';

⇒共有鍵の取得方法は、「EngageCros 設定＞セキュリティ」参照

        // 2. ハッシュ値の取得
        const encoder = new TextEncoder();
        const data = encoder.encode(uid + salt);
        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
        const hashArray = Array.from(new Uint8Array(hashBuffer));
        const hashUid = hashArray
        .map((b) => b.toString(16).padStart(2, '0'))
        .join('');

カスタムパラメータの場合、上記記述は必須です。

       // 3. SDK起動
        exTracker.start({
         uid: hashUid, 
         secure: true
        });

secureの値により挙動が変わります。

  • trueの時：uidをハッシュ化
    ⚡セグメントバナーは表示されません。
  • falseの時：uidをハッシュ化しない。カスタムパラメータの登録、参照が不可。
    ⚡カスタムパラメータバナーは表示されません。 
       // 4. カスタムパラメータ送信（定義）
      data = {
 　{カスタムパラメータの物理名}: {カスタムパラメータの値}, 
 };

値を取得したいカスタムパラメータを設定します。

例：
uid: 100018,      　
birthday: 946566000000,　
visited_at: Date.now(),
boolean: 1,
member_id: 100019

⚡取得された日時タイプのカスタムパラメータの値がエポックミリ秒でない場合は、バナーの条件設定での利用はできません。

💡Date.now()は、バナーにアクセスした日時を自動取得しています。

💡同じ名前のカスタムパラメータを複数記述した場合、後（下方）に記述したパラメータの値が取得されます

⚡存在しない、または無効のカスタムパラメータを記述した場合、カスタムパラメータレコードの取得はできません。その結果、バナーの表示もできません。

⚡検索可能なカスタムパラメータレコードは、個人情報閲覧権限の設定にかかわらず、Web接客のロール権限を持つ全運用者が参照できます。

        exTracker.sendCustomParameter(data);
     };
    document.head.appendChild(s);
  })();
</script>


 

 

 

バナーテンプレート

バナーテンプレート作成／編集画面では、お客様Webページ上に表示させるバナーの登録や編集が行えます。　

 

バナーテンプレートの新規作成

バナーテンプレートを作成します。

  1. 左メニュー［Web接客］＞［バナー］よりWeb接客/バナーテンプレート一覧を表示
  2. 右上の［バナーテンプレート作成＋］ボタンをクリック
  3. 必要な情報を入力・設定する

項目 必須 説明
タイトル  

バナーテンプレートのタイトルを設定します。
タイトルはWeb接客/バナーテンプレート一覧に表示されます。

  1. ［編集］ボタンクリックでタイトル入力欄表示
  2. ［決定］ボタンで入力内容を保存、［キャンセル］ボタンで戻る
タグ  

バナーテンプレートにタグ付けすることができます。Web接客/バナーテンプレート一覧でタグを使った検索が可能になります。

  1. ［タグの編集］ボタンクリックでタグの作成・検索欄表示
  2. 任意の文字列を入力すると作成済みのタグの検索結果（部分一致）が表示される。
  3. 検索結果の中に
    ▼該当のタグがある場合
    タグをクリックすることでタグ付け
    ▼該当のタグがない場合
    Enterキー、または［＋新しいタグを作成］ボタンクリックでタグ付け　
    ・タグ名をクリックするとタグ付けを解除可能
  4. ［決定］ボタンで入力内容を保存、［キャンセル］ボタンで戻る
PC（①）
モバイル（②）		  

［PC］または［モバイル］の枠をクリックし、それぞれPC向け、モバイル向けにWebページに表示するバナーの設定を行います。

また、各トグルをONにすることでそれぞれのバナー設定が有効になります。

💡［PC］または［モバイル］向けのバナー編集をしているときは、編集中の種別のボタン下部が青線で表示されます。

⚡PC／モバイル向けの表示は、表示する端末ではなく、Webページの画面表示幅により切り替わります。
768pxより大きい時はPC向けのバナーが表示され、それ以下の時はモバイル向けのバナーが表示されます。

⚡PCまたはモバイルのどちらか片方のみ設定した場合、すべての端末に同じバナーが表示されます。（例：PCのバナーのみ設定し、幅768px以下の画面（モバイル）で表示してもPCのバナーが表示されます。）

💡EngageCrosのシナリオ編集画面等に表示されるバナーのサムネイルは、PC向けに設定したバナー画像が表示されます。
PCのバナー画像がないとサムネイルが「NO DATA」と表示される場合があります。

実際のWeb画面でのバナー表示は前述の仕様のとおりです。
同期（③）  

クリックで、バナーの設定内容を同期します。

それぞれ以下の挙動になります。

  • ［PC］のバナー編集時に［同期］ボタンをクリックすると、［モバイル］の設定内容を［PC］に上書きします。
  • ［モバイル］のバナー編集時に［同期］ボタンをクリックすると、［PC］の設定内容を［モバイル］に上書きします。
テキスト（④）   バナー（⑦）上にテキスト記入エリアを追加します。
イメージ（⑤）  

画像選択画面が表示されます。

画像選択画面からバナー用画像をアップロードでき、選択することで、バナー（⑦）内に画像を追加します。
ボタン（⑥）   バナー（⑦）上にボタンを追加します。
バナー（⑦）   作成中のバナーを表示しています。
プレビュー（⑧）  

プレビュー画面を表示します。

［PC］または［モバイル］タブをクリックすることで、表示の切り替えが可能です。

⚡プレビュー内の配置位置は目安です。
複製（⑨）  

オブジェクト（テキスト・イメージ・ボタン）を複製します。

💡オブジェクトを選択時のみ表示されます。
削除（⑩）  

オブジェクト（テキスト・イメージ・ボタン）を削除します。

💡オブジェクトを選択時のみ表示されます。

⚡キーボードのDELボタンでは削除できません。画面内の［削除］ボタンから削除をしてください。
プロパティ設定（⑪）  

バナーや選択しているオブジェクト（テキスト・イメージ・ボタン）の表示や挙動に関する設定ができます。

［バナー］ではそれぞれ以下の設定が可能です。
バナーの枠外をクリックすることで、バナーのプロパティに切り替わります。

  • 配置とサイズ
  • 背景とスタイル
  • アクション

［テキスト］は以下の設定が可能です。

▼ダブルクリック時

  • テキストのプロパティ

▼シングルクリック時

  • アクション
  • レイヤー

［イメージ］では以下の設定が可能です。

  • スタイル
  • アクション
  • 画像設定
  • レイヤー

［ボタン］では以下の設定が可能です。

▼ダブルクリック時

  • ボタンのプロパティ

▼シングルクリック時

  • アクション
  • レイヤー

各詳細は「オブジェクトのプロパティ設定」をご確認ください。
オブジェクト一覧（⑫）  

バナー上のオブジェクトをリスト表示しています。

クリックすることで、バナー上のオブジェクトを選択できます。

⚡リストは上から順に最背面→最前面で表示しています。
  1. ［保存］ボタン押下で一時保存し、［保存して終了］ボタン押下でWeb接客/バナーテンプレート一覧画面に戻る

 

オブジェクトのプロパティ設定

選択しているオブジェクトにより、設定可能なプロパティ項目が変わります。

項目 説明
配置とサイズ

バナーの配置位置や余白、幅や高さなどのサイズ、バナー外のオーバレイの色やバナー外をクリックした際の挙動を設定できます。

💡幅や高さ、余白の単位はpxです。
背景とスタイル

バナー内の背景色、背景画像の選択や背景画像の透明度、角丸の調整、バナーのクローズボタンの表示を設定できます。

💡角丸の単位はpxです。
アクション バナー、テキスト、ボタンをクリックした際の挙動を設定できます。
レイヤー オブジェクト間の前後の表示位置（最前面、最背面など）を調整できます。
スタイル

バナーの不透明度、枠線の色や太さ、角丸の調整、影の有無を設定できます。

💡枠線の太さや角丸の単位はpxです。
画像設定 バナーが表示されなかった場合の代替テキスト（alt）を設定できます。
テキストのプロパティ テキストのフォントやフォントサイズ、フォントの太さ、行間、文字揃えや色、フォントの背景色、斜体、下線、取り消し線が設定できます。
ボタンのプロパティ

ボタンの色、枠線の色や太さ、角丸の調整、ボタン内文字のフォント、フォントサイズや太さ、行間、ボタン内フォントの色、斜体、下線を設定できます。

💡枠線の太さや角丸の単位はpxです。

💡色の表示値は8桁のHEX値です。

 

バナーテンプレートの編集

作成済みのバナーテンプレートを編集します。一覧で各種操作が可能です。

  1. 左メニュー［Web接客］＞［バナー］よりWeb接客/バナーテンプレート一覧を表示
    • ID・タイトルで検索可能
    • ［条件で絞り込む］をクリックすると、お気に入りやタグでフィルター可能
    • 一覧の右上にある⚙️（設定）ボタンから一覧に表示する列を選択可能
    • 項目名の右側に▼または▲がある項目（ID・タイトル・更新日時等）はクリックまたは［並び替え］欄で選択することで昇順・降順での並び替え可能
    • ［表示件数］欄で一覧表示件数を指定可能
    • 対象行の左端のチェックボックスにチェックして［一括操作］欄で操作を選択することで一括操作可能
  2. 対象行に対し下記操作が可能
    • お気に入りに追加
      • 右端の🤍（ハート）マークをクリック
    • 複製
      • 右端の3点リーダから［複製］をクリック
    • 削除
      • 右端の3点リーダから［削除］をクリック
  3. 対象のバナーテンプレートの［ID］または［タイトル］をクリックして編集画面へ
  4. ［保存］ボタン押下で一時保存し、［保存して終了］ボタン押下でWeb接客/バナーテンプレート一覧画面に戻る

 

シナリオ

シナリオでは、どのバナーを、いつ、どのような条件でWebページ上に表示し、何をゴールとして計測するかという公開の条件や集計の設定ができます。

シナリオの新規作成

シナリオを作成します。

  1. 下記いずれかよりWeb接客シナリオ一覧を表示
    ・左メニュー［Web接客］＞［プロジェクト］
    ・左メニュー［Web接客］＞［シナリオ］
  2. 右上の［シナリオ作成＋］ボタンをクリック
  3. 必要な情報を入力・設定する
項目 必須 説明
シナリオ名 ●

Web接客のシナリオ名を設定します。

  • 最大32文字
メモ  

Web接客のシナリオに関するメモを入力可能です。

貴社内のWeb接客/シナリオの運用管理等に利用可能です。

Web接客機能には影響しません。
  1. 入力完了後、［保存］ボタンをクリック
  2. 保存したシナリオのWeb接客シナリオ編集画面が表示されたら、必要な情報を入力・設定
    💡Web接客シナリオ編集画面では、各項目を編集した際、自動で保存が行われます。
項目 必須 説明
シナリオ名 ●

シナリオ作成時に設定したシナリオ名を編集できます。
シナリオ名はWeb接客シナリオ一覧に表示されます。

  1. ［編集］ボタンクリックでシナリオ名入力欄表示
  2. ［決定］ボタンで入力内容を保存、［キャンセル］ボタンで戻る
タグ  

シナリオにタグ付けすることができます。Web接客シナリオ一覧でタグを使った検索が可能になります。

  1. ［タグの編集］ボタンクリックでタグの作成・検索欄表示
  2. 任意の文字列を入力すると作成済みのタグの検索結果（部分一致）が表示される。
  3. ▼該当のタグがある場合
    タグをクリックすることでタグ付け
    ▼該当のタグがない場合
    Enterキー、または［＋新しいタグを作成］ボタンクリックでタグ付け　
    ・タグ名をクリックするとタグ付けを解除可能
  4. ［決定］ボタンで入力内容を保存、［キャンセル］ボタンで戻る
コメント  

シナリオについてのコメントを設定します。

  1. ▼コメントなしの場合
    ［設定されていません（ペンアイコン）］をクリックで、コメント入力欄を表示
    ▼コメントありの場合
    ［（コメント）...（ペンアイコン）］をクリックで、コメント入力欄を表示　
  2. ［決定］ボタンで入力内容を保存、［キャンセル］ボタンで戻る
バナー ●

まず、バナーの配信方法を選択し、選択した配信方法ごとにパターンを設定します。

パターンの設定では、バナーテンプレートから選択したバナーを編集して保存するか、または新規バナーを作成して保存することが可能です。

⚡ここで保存したバナーは、他のパターンやシナリオで利用することはできません

 

［配信方法］は「シングル」「セグメント」「カスタムパラメータ」「ABテスト」から選択できます。

 ⚡「カスタムパラメータ」は、事前に［プロジェクト編集］画面でカスタムパラメータを設定済みの場合に表示されます。

 

▼「シングル」を選択した場合

Webページ上に表示するバナーを1つ設定できます。
このバナーは来訪者全員に表示されます。　

表示対象の条件設定は不可で、追加できるパターンも1件のみです。

 

▼「セグメント」を選択した場合

Webページ上に表示するバナーを複数設定できます。
これらのバナーは、設定された条件ごとに、その条件に一致した来訪者それぞれに表示されます。　
⇒「カスタムパラメータとセグメントのバナー表示の挙動」参照

［セグメント］から登録済みのセグメントを設定し、バナーを表示するユーザの絞り込みが可能です。

💡表示対象の条件設定が可能であり、表示するバナーのパターンは最大5件追加できます。

⚡バナーの出し分けを行う場合、Webページ側の埋め込みタグにてエンドユーザのUIDをEngageCrosに渡す仕掛けが必須です。
実装例は、［Webページへの埋め込みタグの追加］内の「参考｜特定のユーザーにバナーを表示するJavaScriptタグの例」をご参照ください。

💡表示対象の条件設定は、パターンから追加、または新規作成した際に表示されるバナー編集画面のヘッダにある［バナー表示条件］ボタンをクリックして行います。　

💡［バナー表示条件］では最大4つの条件を指定可能です。
💡複数の条件を指定する際、「AND」と「OR」で複合条件を設定することができますが、一律で「AND」または「OR」の条件になります。
⚡条件として設定できる項目は、Web接客お申し込み時に提示いただいたコンタクトカラムのみです。

 

▼「カスタムパラメータ」を選択した場合

⚡事前に［プロジェクト編集］画面でカスタムパラメータを設定済みの場合に表示されます。

Webページ上に表示するバナーのパターンを複数設定できます。（パターン1件につき、バナー1つ表示可）
これらのバナーは、設定された条件ごとに、その条件に一致した来訪者それぞれに表示されます。
UIDの有無に関係なく、すべての来訪者が表示対象です。　　

⇒「カスタムパラメータとセグメントのバナー表示の挙動」参照

💡表示対象の条件設定が可能であり、表示するバナーのパターンは最大5件まで追加できます。

⚡バナーの出し分けを行う場合、Webページ側でカスタムパラメータ設定および値の取得処理の実装を行ってください。
実装例は、［Webページへの埋め込みタグの追加］内の「参考｜特定のユーザーにバナーを表示するJavaScriptタグの例｜カスタムプロパティ」をご参照ください。

💡表示対象の条件設定は、パターンから追加、または新規作成した際に表示されるバナー編集画面のヘッダにある［バナー表示条件］ボタンをクリックして行います。　

💡［バナー表示条件］では最大4つの条件を指定可能です。

💡複数の条件を指定する際、「AND」と「OR」で複合条件を設定することができますが、一律で「AND」または「OR」の条件になります。

💡表示対象の条件設定が可能であり、表示するバナーのパターンは最大5件追加できます。

⚡タイプが「日時」のカスタムパラメータを使ったバナーの表示条件は、相対日付の設定ができません。

⚡カスタムパラメータバナー（シナリオ）は、Webサイトの該当ページの来訪者全員が表示対象になるため、会員のみに表示させることはできません。
💡会員のみを表示対象とする場合は、Webサイト側で会員判定を行い、該当ページの来訪者を会員のみにする必要があります。

 

▼「ABテスト」を選択した場合

複数のバナーを設定し、Webページの来訪者に対し、各バナーを表示したい割合を設定できます。　

💡バナーのパターンを最大5件まで追加でき、それぞれに表示割合を設定できます。

⚡「バナー表示割合」は、バナーが表示される確率を設定するものであり、表示比率を保証するものではありません。（例えば、設定値が1：1：2の場合でも、必ずしも、その比率通りに表示されるわけではありません。）

  1. パターンを最大5件まで選択します。　　　
  2. ［パターン］を設定後、［表示割合］の［表示割合を設定］ボタンが有効になるのでクリックします。
  3. バナー表示割合画面が表示され、バナー毎の表示の比率を設定します。
    💡［均等に割り当てる］ボタンをクリックすると、複数のバナーに対して均等の比率を割り当てることができます。

 

💡設定したバナーはサムネイルが表示されるまで時間がかかる場合があり、その際は「NO DATA」と表示されますが、すぐに解消します。
条件  

バナーが表示されるWebページの来訪者毎の行動に応じて、条件を設定できます。

▼［遅延］

来訪者がWebページを表示してからバナーを表示するまでの時間（秒）を設定できます。

💡秒数は0～99秒まで設定ができます。

▼［停止］

シナリオを停止するまでの来訪者のX日ごとのバナー表示回数を設定できます。

💡表示回数は0〜9日ごとの0～9回まで設定ができます。

▼［終了］

シナリオの終了条件を設定できます。

  • 来訪者のバナーの表示回数
  • 来訪者がバナーを閉じた回数
  • 来訪者がバナーのリンクをクリックした回数

💡回数はそれぞれ0～9回まで設定ができます。

▼［URLフィルタ］

バナーを表示させるWebページのページの絞り込みを設定できます。

例えば、プロジェクトで設定したWebページのドメインの全てのページに表示させるのではなく、URLでフィルタをかけることで一部のページのみバナーを表示させることができます。

💡URLフィルタの設定条件数は4件まで設定ができます。
ゴール  

ゴールを設定することで、バナーを閲覧後、特定のWebページに到達した来訪者を集計することができます。

ゴールでは、到達したとみなすページのURL条件を設定できます。

例えば、商品購入完了ページのURLを設定することで、バナー経由での到達結果をレポートから確認することができます。

例：「https://aaa.example.com/item/」配下のページをゴールとしたい場合、4つ目の条件入力欄に「aaa.example.com/item/」と入力します。
計画  

シナリオの公開期間や間隔を設定できます。

▼［公開期間］

バナーを公開する期間を設定できます。

年月日時分で公開開始日時、終了日時を設定できます。

▼［公開間隔］

特定の曜日、特定の時間帯でバナーを表示させるように設定できます。
⚡日付を跨いだ設定はできません。
 

⚡公開後に、変更、適用した場合は、Webシナリオ編集ページで ［変更を公開］ ボタンのクリックが必要です。
  1. ［公開］ボタン押下で「シナリオの公開（確認）」画面が表示されるため、［公開予約］ボタン押下
    ⚡一度公開したWeb接客シナリオは、「計画」項目以外、編集できません。
  2. 左上の［＜］ボタンでWeb接客シナリオ一覧画面に戻る

 

シナリオの編集

作成済みのシナリオを編集します。一覧で各種操作が可能です。

  1. 下記いずれかよりWeb接客シナリオ一覧を表示
    ・左メニュー［Web接客］＞［プロジェクト］
    ・左メニュー［Web接客］＞［シナリオ］
    • ID・タイトルで検索可能
    • ［条件で絞り込む］をクリックすると、お気に入りやタグ等でフィルター可能
    • 一覧の右上にある⚙️（設定）ボタンから一覧に表示する列を選択可能
    • 項目名の右側に▼または▲がある項目（ID・タイトル・更新日時等）はクリックまたは［並び替え］欄で選択することで昇順・降順での並び替え可能
    • ［表示件数］欄で一覧表示件数を指定可能
    • 対象行の左端のチェックボックスにチェックして［一括操作］欄で操作を選択することで一括操作可能
  2. 対象行に対し下記操作が可能
    • お気に入りに追加
      • 右端の🤍（ハート）マークをクリック
    • 複製して保存
      • 右端の3点リーダから［複製して保存］をクリック
    • 削除
      • 右端の3点リーダから［削除］をクリック
        ⚡シナリオの状態が「公開」の場合は削除不可
    • レポート
      • 右端の3点リーダから［レポート］をクリック
        💡シナリオの状態が「公開」、「停止」の場合のみレポートを参照可能
  3. 対象のシナリオの［ID］または［タイトル］をクリックしてWeb接客シナリオ編集画面へ
  4. 内容を編集する
    💡Web接客シナリオ編集画面では、各項目編集した際、自動で保存が行われます。
  5. ［公開］ボタン押下で「シナリオの公開（確認）」画面が表示されるため、［公開予約］ボタン押下　
  6. 左上の［＜］ボタンでWeb接客シナリオ一覧画面に戻る

⚡シナリオの公開可能上限数は最大5件です。

⚡シナリオが同じWebページに対して複数公開設定されている場合、以下を満たすもののうち1つのみ表示されます。
　・状態が「公開」かつシナリオに設定した表示条件、計画を満たすもの
　・シナリオのIDの降順が優先的に表示

⚡公開したシナリオはWeb接客シナリオ編集画面では［計画］以外変更不可です。
ただし、公開の停止や再公開はできます。

⚡［配信方法］を「セグメント」に設定したバナーを表示させるには、来訪者のUIDの取得が必要になりますが、お客様のWebサイトでのUIDの取得実装に誤りがあった場合、全てのシナリオのバナーが表示されなくなり、閲覧不可となる場合がありますのでご注意ください。
 

シナリオの公開・再公開

  1. 状態が「下書き」または「停止」のシナリオを編集し、Web接客シナリオ編集画面を表示すると、画面下部に［公開］ボタンが表示されます。
  2. ［公開］ボタン押下でシナリオの公開確認が表示され、［公開予約］ボタン押下で公開または再公開することができます。

公開後、Web接客シナリオ一覧画面の状態はWebページ上での公開のタイミングに関わらず、「公開処理中」を経て、「公開」となります。

「公開処理中」が表示される前に「公開」となる場合もあります。　

⚡シナリオの状態が「公開」に切り替わっても、サービスの処理の都合でWebページ上にバナーの反映や表示がされるまで少々時間がかかる場合があります。

 

シナリオの停止

  1. シナリオの［停止］ボタンは、状態が「公開」のWeb接客シナリオの編集画面の右上に表示されます。　
  2. ［停止］ボタン押下でシナリオのWebページ上での公開を停止することができます。
     

Web接客シナリオのレポート確認

お客様のWebページの来訪者がバナーを表示したり、アクションを設定したテキスト、ボタン、イメージなどのオブジェクトをクリックした結果を確認することができます。

  1. 左メニュー［Web接客］＞ 該当のプロジェクト名の下にある［シナリオ］よりWeb接客シナリオ一覧を表示
    💡プロジェクト名が意図するものと異なる場合は、左メニュー［Web接客］＞［プロジェクト］からWeb接客プロジェクト一覧を表示し、該当のプロジェクトのタイトルを押下してください。　
  2. レポートを確認したいシナリオの行の3点リーダから［レポート］をクリック
    💡シナリオの状態が「公開」または「停止」の場合のみレポートを参照可能です。
項目 説明
レポートの概要

バナーの表示回数やクリック数、ゴール数を確認できます。

▼［表示数］

バナーが表示された総回数

▼［クリック数］

バナー、テキスト、ボタンの「アクション」で設定したクリックアクションをクリックした総数

▼［ゴール数］

Webページの来訪者が、バナーの閲覧を経て、あらかじめ設定されたゴールに到達した総数　
時間別推移

レポートの概要の［表示数］、［クリック数］、［ゴール数］の時間別推移グラフが表示されます。

💡日付の範囲指定が可能です。

集計単位として「時間別」、「日別」で表示できます。
ゴール別レポート

設定したゴール毎に以下の情報を表示します。

  • ID
  • ゴール名
  • 条件
  • ゴール数
パターン別レポート

パターン（設定したバナー）毎に以下の情報を表示します。

  • パターン名
  • 表示数
  • クリック数

💡パターン別レポートのクリック数は、バナーとオブジェクト（テキスト・イメージ・ボタン）を合算して表示されます。

💡Web接客シナリオレポートの更新頻度
レポートデータ（バナー表示・クリック等の実績）は、15分間隔で集計・更新されます。
各集計タイミングでは、その時点から10分前〜25分前のデータが反映されます。
例：10:15の集計タイミングでは、09:50 〜 10:05 の実績が集計・表示される。

⚡負荷状況やデータ量により、集計完了までに追加の時間を要し、表示が遅れる場合があります

 

イベント　※機能提供準備中

‼️重要｜2025年12月時点では、Web接客のイベント機能はご利用いただけません。

イベントの登録およびシナリオ内のバナーへのイベントの設定は可能ですが、動作しない状態ですのでご注意ください。

本機能のリリースは、「アップデート作業のお知らせ【EngageCros】」にてご案内します。


Web接客｜補足

 

カスタムパラメータとセグメントのバナー表示の挙動

 

配信方法が「カスタムパラメータ」の場合

Webサイト閲覧者に対して、配信方法がカスタムパラメータのシナリオ（バナー）を表示する場合の挙動は下記の通りです。

あらかじめ埋め込みタグに設定したカスタムパラメータの値が、ユニークIDごとにカスタムパラメータレコードに登録されます（上図①）。

この時、各ユーザを特定するユニークIDはハッシュ値で登録されます（上図②）。

また、ハッシュ化されたユニークIDに紐づくユーザ情報（上図③）が、あらかじめカスタムパラメータのシナリオで設定した条件（上図④）と合致（マッチング）した際にバナーが表示されます（上図⑤）。
⇒「ハッシュ化されたユニークID（ハッシュ値）とは」参照
 

配信方法が「セグメント」の場合

Webサイト閲覧者に対して、配信方法が「セグメント」のシナリオ（バナー）を表示する場合の挙動は下記の通りです。

あらかじめ設定した埋め込みタグが取得したユニークID（上図①）が、
Web接客のコンタクト上のUID（上図②）に存在するかが確認され、
さらにシナリオ表示条件（上図③）と合致（マッチング）すると、バナーが表示されます（上図④）。

上図の場合は、UID102のユーザにのみバナーが表示されます。

⚡新規登録ユーザ（UID103）は、そのUIDがWeb接客のコンタクトへ同期されるまでは、バナー表示対象になりません（上図⑤）

💡上図の「Web接客のコンタクト（複製）」は、ハッシュ化されたユニークIDを持っていますが、セグメントバナーの条件として参照されるのは、UID（ハッシュ化されていないユニークID）です。
⇒「ハッシュ化されたユニークID（ハッシュ値）とは」参照
 

ハッシュ化されたユニークID（ハッシュ値）とは

ハッシュ値は、データの「指紋」のようなもので、あるデータを特定の計算ルール（ハッシュ関数）に通した際に得られる固定長の文字列のことです。

本サービスご利用者様のサーバーサイドで生成してください。

ハッシュ値の3つの特徴

  • 同一性：同じデータからは、常に同じハッシュ値が生成されます
  • 不可逆性：ハッシュ値から元のデータ（メールアドレス等）を復元することはできません
  • 一意性：1文字でもデータが違えば、全く異なるハッシュ値になります

なぜサーバーサイドでの生成が必要なのか？

ハッシュ値は「同じアルゴリズム」と「元のデータ」さえ揃えば、誰でも全く同じ値を生成できます。

そのため、Web接客のカスタムパラメータとして利用する場合、ブラウザ側（JavaScript）でハッシュ化を行うと、悪意のあるユーザーが計算ロジックを盗み見たり、値を偽造したりするリスクがあります。

そのため、第三者が手出しできない「本サービスご利用者様のサーバサイド」で、ハッシュ値を生成して付与することで、データの真正性と安全性を担保しています。
 

 

この記事は役に立ちましたか？

0人中0人がこの記事が役に立ったと言っています

関連記事