モバイル向け「カード」アクションテンプレートの詳細と使い方の説明です。

本ページの内容は、以下「対象のアクションテンプレート」に記載のテンプレートのみに対応しています。

概要

モバイル向け「カード」アクションテンプレートは、ユーザーに「見せる」テンプレート＞「カード」から選択できます。テンプレート検索窓より、「モバイル」というキーワードでの検索も可能です。

対象のアクションテンプレート

  • 【モバイル向け】#1 画像＋見出し＋詳細テキスト＋ボタン1つ＋テキストリンク
  • 【モバイル向け】#2 画像＋見出し＋詳細テキスト＋ボタン2つ (縦)
  • 【モバイル向け】#3 画像＋見出し＋詳細テキスト＋ボタン2つ (横)
  • 【モバイル向け】#4 見出し＋詳細テキスト＋画像＋ボタン1つ＋テキストリンク
  • 【モバイル向け】#5 見出し＋詳細テキスト＋画像＋ボタン2つ (縦)
  • 【モバイル向け】#6 見出し＋詳細テキスト＋画像＋ボタン2つ (横)

null

アクション設定（ベーシック）

編集画面「ベーシック」タブから設定可能な項目は、以下です。

2-1.画像

カードの画像を設定します。
「画像 / アイコン」変更方法

推奨画像サイズは、以下をご参考ください。
※縦幅は最大値として記載しています。

テンプレート 推奨画像サイズ
【モバイル向け】#1 画像＋見出し＋詳細テキスト＋ボタン1つ＋テキストリンク 横：636px、縦：344px（最大）
【モバイル向け】#2 画像＋見出し＋詳細テキスト＋ボタン2つ (縦) 横：636px、縦：636px（最大）
【モバイル向け】#3 画像＋見出し＋詳細テキスト＋ボタン2つ (横) 横：636px、縦：636px（最大）
【モバイル向け】#4 見出し＋詳細テキスト＋画像＋ボタン1つ＋テキストリンク 横：636px、縦：325px（最大）
【モバイル向け】#5 見出し＋詳細テキスト＋画像＋ボタン2つ (縦) 横：636px、縦：636px（最大）
【モバイル向け】#6 見出し＋詳細テキスト＋画像＋ボタン2つ (横) 横：636px、縦：636px（最大）

2-2.見出し・詳細テキスト

カードの見出し・詳細テキストを入力します。
空白の場合は、エリアごと非表示にできます。
【詳細テキストを左寄せにする】オプションにチェックを入れると、詳細テキストを左寄せで表示できます。

null

2-3.ボタン（テキスト・リンク先）

ボタンのテキストと、リンク先を指定できます。
【ボタンを表示する】オプションのチェックを外すと、ボタンごと非表示にできます。

null

2-4.テキストリンク（テキスト・リンク先）

テキストリンクのテキストと、リンク先を指定できます。
テキストリンク テキストが空白の場合は、エリアごと非表示にできます。

null

アクションを閉じるオプション
【アクションを閉じる】オプションにチェックを入れると、クリック時にカードを閉じる挙動にできます。

クリック時は message_close イベントが自動で発生します。

テキストリンクがあるテンプレートや、ボタンが2つあるテンプレートで、ボタンで閉じるオプションの選択ができます。

2-5.カードスタイル

  • カード幅(px)：カードの横幅を指定できます
    • ※縦幅は、カード内の要素に応じて自動で調整されます
  • 背景角丸(px)：カードの四隅に丸みを持たせることができます
  • テキストカラー：見出し・詳細テキストのカラーを指定できます
  • 背景カラー：カードの背景カラーを指定できます
  • テキストリンクカラー：テキストリンクのカラーを指定できます

2-6.ボタンスタイル

ボタンが2つ以上あるテンプレートの場合、それぞれのスタイルを変更できます。

  • ボタン背景カラー：ボタンの背景カラーを指定できます
  • ボタンテキストカラー：ボタンのテキストカラーを指定できます
  • 枠線カラー：ボタンの枠線のカラーを指定できます
  • ボタン角丸(px)：ボタンの四隅に丸みを持たせることができます
  • 枠線太さ(px)：ボタンの枠線の太さを指定できます
    • 1px以上にすることで枠線を付けられます
  • テキストの太さ：ボタンテキストの太さを指定できます

2-7.閉じるボタン

  • 閉じるアイコン：閉じるボタンのアイコンを指定できます
  • アイコンカラー：アイコンのカラーを指定できます
  • 背景カラー：背景のカラーを指定できます
  • アイコン幅(px)：アイコンを表示する幅を指定できます
  • ボタン上位置(px)、ボタン右位置(px)：アイコンの表示位置を指定できます

アクション設定（カスタマイズ）

編集画面「カスタマイズ」タブから、HTML/CSS/JavaScriptを変更し、より高度なカスタマイズが可能です。

※アクションの具体的なカスタマイズ方法関しては、チャットでのお問い合わせも含めサポート対象外となります、予めご了承ください。

表示設定

アクションの表示位置・アニメーションを指定できます。
「表示位置・表示タイミング」変更方法

表示位置（画面中央）を選択すると、全画面での表示ができます。
※カード表示時に後ろの画面上での操作ができません（グレーアウト状態）。
null

データ管理

ユーザー情報変数を指定することで、ユーザーごとに紐づく値を動的に出しわけができます。
参考：「静的変数・ユーザー情報変数」利用方法・仕様

その他

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を入力} に等しい（完全一致）
    null

接客詳細画面での確認方法
「指標のカスタマイズ」をクリックし、作成したフィルターイベントを選択する
null
null

6-3.カスタムテンプレートを追加する

作成したアクションは、テンプレートとして追加することで、別の接客作成時に参照できます。詳細は、カスタマイズしたアクションをカスタムテンプレートに追加する方法をご参照ください