「ハーフモーダル」アクションのテンプレート（アプリ専用）の詳細と使い方の説明です。
本テンプレートは、KARTE for Appご契約中のお客様のみご利用できます
概要
「ハーフモーダル」とは、画面の一部を覆いつつ、背後のコンテンツを閲覧・操作できるポップアップの形式です。操作の中断が最小限に抑えられることから、モバイルアプリでよく使用されます。
「ハーフモーダル」テンプレートは、ユーザーに「見せる」テンプレートから選択できます。
テンプレートの種類
- 【アプリ専用】#1 画像＋見出し＋詳細テキスト＋ボタン1つ＋テキストリンク
- 【アプリ専用】#2 画像＋見出し＋詳細テキスト＋ボタン2つ (縦)
- 【アプリ専用】#3 画像＋見出し＋詳細テキスト＋ボタン2つ (横)
- 【アプリ専用】#4 見出し＋詳細テキスト＋画像＋ボタン1つ＋テキストリンク
- 【アプリ専用】#5 見出し＋詳細テキスト＋ボタン1つ＋テキストリンク (画像なし)
- 【アプリ専用】#6 画像100%背景＋ボタン1つ
- 【アプリ専用】#7 見出し＋画像2つ＋ボタン1つ
- 【アプリ専用】#8 見出し＋画3つ＋ボタン1つ
- 【アプリ専用】#9 見出し＋画像4つ＋ボタン1つ
アクション設定（ベーシック）
編集画面「ベーシック」タブから設定可能な項目は、以下です。
2-1.画像
ハーフモーダルの画像を設定します。
「画像 / アイコン」変更方法
推奨画像サイズは、以下をご参考ください。
※縦幅は最大値として記載しています。
| テンプレート | 推奨画像サイズ |
|---|---|
| #1 画像＋見出し＋詳細テキスト＋ボタン1つ＋テキストリンク | 横：780px、縦：324px（最大） |
| #2 画像＋見出し＋詳細テキスト＋ボタン2つ (縦) | 横：780px、縦：280px（最大） |
| #3 画像＋見出し＋詳細テキスト＋ボタン2つ (横) | 横：780px、縦：372px（最大） |
| #4 見出し＋詳細テキスト＋画像＋ボタン1つ＋テキストリンク | 横：700px、縦：288px（最大） |
| #6 画像100%背景＋ボタン1つ | 横：780px、縦：536px（最大） |
| #7 見出し＋画像2つ＋ボタン1つ | 横：334px、縦：289px（最大） |
| #8 見出し＋画3つ＋ボタン1つ | 横：205px、縦：288px（最大） |
| #9 見出し＋画像4つ＋ボタン1つ | 横：334px、縦：289px（最大） |
2-2.見出し・詳細テキスト
ハーフモーダルの見出し・詳細テキストを入力します。
空白の場合は、エリアごと非表示にできます。
【詳細テキストを左寄せにする】オプションにチェックを入れると、詳細テキストを左寄せで表示できます。
2-3.ボタン（テキスト・リンク先）
ボタンのテキストと、リンク先を指定できます。
【ボタンを表示する】オプションのチェックを外すと、ボタンごと非表示にできます。
2-4.テキストリンク（テキスト・リンク先）
テキストリンクのテキストと、リンク先を指定できます。
「テキストリンク テキスト」項目が空白の場合は、エリアごと非表示にできます。
アクションを閉じるオプション
【アクションを閉じる】オプションにチェックを入れると、クリック時にモーダルを閉じる挙動にできます。
クリック時はmessage_closeイベントが自動で発生します。
テキストリンクがあるテンプレートや、ボタンが2つあるテンプレートで、ボタンで閉じるオプションの選択ができます。
画面上の表示イメージ（一例）：
2-5.リスト
複数画像を設定できるテンプレートで設定できる項目です。
- 画像：画像を設定します
- テキスト：画像の下に表示する詳細テキストを指定できます
- リンク先：画像タップ時の遷移先を指定できます
【2行以上のテキストは省略する】オプションにチェックを入れると、2行以上の場合に「..」で省略して表示されます。 （チェックを外すと、全てのテキストが表示されます）
2-6.カードスタイル
- 背景角丸(px)：モーダルの四隅に丸みを持たせることができます
- テキストカラー：見出し・詳細テキストのカラーを指定できます
- 背景カラー：モーダルの背景カラーを指定できます
- テキストリンクカラー：テキストリンクのカラーを指定できます
2-7.ボタンスタイル
ボタンが2つ以上あるテンプレートの場合、それぞれのスタイルを変更できます。
- ボタン背景カラー：ボタンの背景カラーを指定できます
- ボタンテキストカラー：ボタンのテキストカラーを指定できます
- 枠線カラー：ボタンの枠線のカラーを指定できます
- ボタン角丸(px)：ボタンの四隅に丸みを持たせることができます
- 枠線太さ(px)：ボタンの枠線の太さを指定できます
- 1px以上にすることで枠線を付けられます
- テキストの太さ：ボタンテキストの太さを指定できます
2-8.閉じるボタン
- 閉じるアイコン：閉じるボタンのアイコンを指定できます
- アイコンカラー：アイコンのカラーを指定できます
- 背景カラー：背景のカラーを指定できます
- アイコン幅(px)：アイコンを表示する幅を指定できます
- ボタン上位置(px)、ボタン右位置(px)：アイコンの表示位置を指定できます
アクション設定（カスタマイズ）
編集画面「カスタマイズ」タブから、HTML/CSS/JavaScriptを変更し、より高度なカスタマイズが可能です。
※アクションの具体的なカスタマイズ方法関しては、チャットでのお問い合わせも含めサポート対象外となります、予めご了承ください。
表示設定
アクションの表示位置・アニメーションを指定できます。
ハーフモーダルテンプレートでは、デフォルトの設定でのみ動作確認を行っているため、表示位置・アニメーションの変更は推奨しておりません。
※変更する場合は、サポート対象外となります、ご了承ください。
データ管理
ユーザー情報変数を指定することで、ユーザーごとに紐づく値を動的に出しわけができます。
参考：「静的変数・ユーザー情報変数」利用方法・仕様
その他
6-1.リンク先の指定について
アプリ内の特定画面に遷移させたい場合は、ディープリンクを指定します。
※Android/iOSでディープリンクが異なる場合は、それぞれ接客の作成が必要です。
参考：KARTE for Appで配信される接客のリンク制御
一つのテンプレート上で、WEB/iOS/Androidすべての遷移先を指定したい場合は、アクションのカスタマイズが必要です。
※アクションの具体的なカスタマイズ方法関しては、チャットでのお問い合わせも含めサポート対象外となります、予めご了承ください。
6-2.クリックできる箇所が2つ以上ある場合の注意点
クリックできる箇所が2つ以上あり、ボタンの「アクションを閉じる」オプションを選択していない場合、クリック操作に対し、共通の message_click イベントが自動で発生します。
参考：「接客サービスをクリック」というイベントが発生する条件について
どの箇所がクリックされたかを判別するためには、message_click イベントの「メッセージクリックのリンク先」フィールドを指定した「フィルターイベント」を各リンクごとに作成します。
「ゴールイベントに設定」することで、接客公開後の接客詳細画面から、それぞれのクリック率を確認できます。
フィルターイベントの作成方法
「すべてのメニュー＞Insight＞イベント＞カスタムイベントを作成」から、「フィルターイベント」を作成します。
「ゴールイベントに設定する」にチェックを入れると、接客詳細画面での分析時に利用できます。
設定条件：接客サービスをクリック（message_click）イベントの
- 接客アクション名（message.shorten_id）が {アクション名を入力} に等しい（完全一致）AND
- メッセージクリックのリンク先（url）が {リンク先URLを入力} に等しい（完全一致）
接客詳細画面での確認方法
「指標のカスタマイズ」をクリックし、作成したフィルターイベントを選択する
6-3.カスタムテンプレートを追加する
作成したアクションは、テンプレートとして追加することで、別の接客作成時に参照できます。詳細は、カスタマイズしたアクションをカスタムテンプレートに追加する方法をご参照ください