このハンズオンでは、Webに配信されるアクションのカスタマイズを試してみましょう。その第一歩として、テンプレートのHTMLを編集し、リンククリック時の挙動を変更してみます。

接客サービスをテスト配信する

まず、題材となるアクションをテスト配信するための接客サービスを作成します。
接客サービスのテスト配信の手順がわからない場合は、こちらの記事を参考にしてください。
特定ユーザーにのみテスト配信することはできますか?
(必ず、テストセグメントに限定して配信するようにしてください。)

なお、アクションは [ユーザーに「見せる」> カード > 画像 + テキスト + ボタン] というテンプレートを使って作成しましょう。

null

テスト配信の設定を完了し、Webサイト上でテンプレートがそのまま自分に配信できることを確認します。

null

表示されない場合は、次の設定を確認します。

  • アクションの配信率が100%になっているか?
  • 同時配信がOKになっているか?
  • 自分がテストセグメントに入っているか?

リンク先ページが同一タブで開くことを確認する

まず、何もカスタマイズしない状態のアクションについて、挙動を確認してみます。
なお、ここからはKARTE管理画面とアクション表示先Webサイトを交互に行き来します。

KARTE側の設定

  1. アクション編集画面を開きます
  2. リンク先URLを https://plaid.co.jp に設定し、保存します

null

Webサイトでの表示確認

  1. ページ更新し、再び表示されたアクションのボタンをクリックします。このとき、遷移先のページがブラウザの同一タブで開くことを確認します

リンク先ページを別タブで開くようにカスタマイズする

いよいよ、HTMLをカスタマイズしてリンククリック時のブラウザの挙動を変更してみます。

KARTE側の設定

  1. アクション編集画面のカスタマイズタブを開きます
  2. 右ペインのHTMLタブの中で、aタグを探します
  3. aタグの開始タグ内の最後に、target属性を次のように追加します
    • target=``"``_blank``"

null

  1. アクションを保存します

Webサイトでの表示確認

  1. ページ更新し、再び表示されたアクションのボタンをクリックします。
  2. このとき、遷移先のページがブラウザの別タブで開くことを確認します。

以上で、アクションの簡単なカスタマイズを実現することができました。
KARTEでWebに配信されるほとんどのアクションは、HTMLを自由に書き換えて配信することができます。

注意点

「アクションのHTML/CSS/JavaScriptのカスタマイズをしたけど動きません」といった問い合わせは、チャットサポートの範囲外となります。
詳しくは チャットサポートポリシー をご参照ください。
ただし、KARTE自体の仕様に関するお問い合わせはお受けできます。
不明点があればお気軽にお問い合わせください

次におすすめのハンズオン

より高度なカスタマイズを学ぶには、こちらのハンズオンがおすすめです。