はじめまして、Customer Engineerの神谷と申します！

ラーメンと格闘技が大好きで、最近はアジア・オセアニアNo.1決定戦出場のために行ったシンガポールの食べ物にハマり、チキンライスやバクテーなどを家で作りまくってます！

さて今回は、KARTEを導入しているWebサイトにおいて、特定のイベントが発生した際に、KARTE Craftを使ってそのことをSlackに通知する方法をご紹介します。何か重要なイベントが起きた時は、そのことがすぐにわかった方が、その後の動きに素早く繋げられそうだと思いませんか？

例えば、以下のような場合です。

解約フォームが閲覧された場合にSlack通知
イチオシ商品が購入された場合にSlack通知

解約フォームのような本来あまり見られないであろうページが閲覧されたり、今イチオシの商品が購入された場合に通知が来れば、なぜ解約フォームを見る必要があったのか、どうしてイチオシの商品を買ってくれたのか、KARTEで得られた直近のユーザー行動などと合わせ、深く分析していくことができるかもしれません。

他にも様々なことに応用できると思いますので、気になった方は是非一度お試しください。

処理の流れ

スクリーンショット2023-12-2211.54.12.png
ユーザーに特定のイベントが発生したことをトリガーにするよう、KARTEで設定します。次にそれをきっかけにKARTE CraftのFunctionが起動し、その内容をSlack API経由で送信します。最後に、設定しておいた内容が、Slackのチャンネルに通知される仕組みになっています。

実装手順

大まかな実装手順は、以下の通りです。大きく分けると、Slackの設定、KARTEの設定、KARTE Craftの設定の3つがあります。

Slackアプリを作成する
Slackアプリを通知したいチャンネルに追加する
Slack アプリのOAuth トークンをCraft Secret Managerに登録する
Craft Functions を作成する
Slack通知用の接客サービスを作成する
Craft Functions連携アクションを追加してSlack通知文面を設定する

ここから順を追って、説明していきます。

1. Slackアプリを作成する

まず、Slack チャンネルに通知をするための Slack アプリを作成します。

[slack api > Your Apps] からCreate New Appをクリックしてください
Create an appの画面でFrom scratchを選択してください
次の画面でSlackアプリの名前と、それを適用するSlackのワークスペースを指定してください

Slackアプリの名前は特に規則はないので、ご自身でわかりやすいものにすれば問題ないです。ワークスペースは、皆さんが所属している組織のものになるでしょう。アプリの作成が完了したら、次にSlack アプリに必要なスコープの設定とOAuth トークンを取得します。

スコープの設定

作成したアプリを選択して、[Features > OAuth & Permissions]をクリックしてください
ページ内のScopesの項目のBot Token ScopesのAdd an OAuth Scopeをクリックしてください
プルダウンメニューからchat:writeを選択してください

OAuthトークンの取得

OAuth & Permissions ページ内のOAuth Tokens for Your WorkspaceのInstall to Workspaceをクリックしてください
アプリがワークスペースにアクセスするための権限を許可するために、許可するをクリックしてください
自動的に生成されるOAuth トークン（Bot User OAuth Token）を控えておいてください

2. Slackアプリを通知したいチャンネルに追加する

作成したSlackアプリを使って通知を実行するには、通知を飛ばしたいチャンネルに追加する必要があります。

通知を飛ばしたいチャンネルの詳細ページを表示します
[インテグレーション > App]のアプリを追加するをクリックしてください
今回作成したアプリを追加します

通知を飛ばすSlackチャンネルのチャンネルIDが後で必要になるため、控えておいてください。チャンネルIDは、チャンネル情報タブの1番下にあります。Slack側の基本的な設定はここまでで、次からはKARTE側の設定になります。

3. Slack アプリのOAuth トークンをCraft Secret Managerに登録する

Slack アプリのOAuth トークンを、Craft Secret Managerのシークレットとして登録します。それにより、秘匿すべきアクセストークンをファンクション上に直接記述する必要がなくなります。
スクリーンショット2023-12-1913.06.31.png

[Craft > シークレット] からシークレットを新規作成
控えておいたOAuth トークンを貼り付けて、適当な名前を付けて保存

作成したシークレットの名前は、次に作成するCraft Functionsの中に記載します。

4. Craft Functions を作成する

特定のイベントが発生した際に、Slackに通知を飛ばすためのCraft Functionsのファンクションを作成します。サンプルとなるソースコードは、GitHubで公開しています。

craft-codes/craft-functions/event-trigger-slack-notification

ソースコードの取得手順は、以下の通りです。

[Craft > ファンクション > 作成 > テンプレートから作成] を選択
ユーザーに特定のイベントが発生した際に、KARTE Craftを使ってSlackに通知する方法というテンプレートを検索し「取得」ボタンをクリック
「反映」ボタンをクリック
Functionを有効化して保存

実装内容は、以下の通りです。

KARTEからのデータを元に、通知メッセージを取得
Slackトークンの取得
Slack Web APIクライアントの初期化
Slack APIのchat.postMessageを使ってメッセージを送信

最初の方で、1つ前のセクションで作成したシークレットを指定していますが、これは画面の変数タブから設定可能になります。
スクリーンショット2023-12-2210.28.22.png

const SLACK_TOKEN_SECRET = '<% SLACK_TOKEN_SECRET %>';
const LOG_LEVEL = '<% DEBUG %>';

作成できたら、右上の保存ボタンを押してください。保存されるのに多少時間がかかりますが、時間がかかる場合はページをリロードすると、既に保存されていることが多いです。

5. Slack通知用の接客サービスを作成する

Craft Functionsの作成ができたら、KARTEでSlack通知用の接客サービスを作成していきましょう。KARTEのグロナビから、[Action > 接客サービス]と遷移し、右上の作成をクリックしてください。

今回は例として、特定のページを閲覧したユーザーのユーザーIDと、そのページのURL及びページタイトルを変数として含んだ文面を作ってみます。
スクリーンショット2023-12-1913.34.32のコピー.png

まずは、配信率や対象ユーザー、Slack通知の起点となるイベントの設定をしていきます。

配信率の設定

スクリーンショット2023-12-1914.26.36.png
今回は検証も兼ねているので、必ず接客サービスが起動するよう、配信率を100%に設定しています。特定のページ閲覧やその他のイベント発生時にSlack通知したい場合、一部の通知しか来ないのも変なので、ここは基本的に100%にしておいてください。

対象ユーザーの設定

スクリーンショット2023-12-1914.27.16.png
配信対象となるユーザーの設定は任意ですが、今回はわかりやすくするため、全員に対して配信します。実際に使われる場合は、ビジターのみ、あるいはユーザーのみに配信したりと、適宜変更してください。

対象イベントの設定

スクリーンショット2023-12-1914.29.17のコピー.png
今回は、特定のページを閲覧したことをトリガーにするので、画像のように閲覧イベントの中で閲覧ページのURLが指定したものに等しいことを条件として、配信します。検証なのでわかりやすくするため、配信頻度をアクセス毎に設定して、そのページが閲覧される度に毎回必ずSlackに通知が飛ぶようにしていますが、実際に使われる場合は必要に応じて変更してください。ここで指定したURLは、後に通知文面の設定でも使用します。

6. Craft Functions連携アクションを追加してSlack通知文面を設定する

次に、Craft Functionsと連携するためのアクションを設定していきます。

テンプレートの選択

まずはCraft用のテンプレートを選択するところから始まります。

KARTEのグロナビから、[Action > 接客サービス]と遷移し、右上の作成をクリックします
接客サービス名を入力し、アクションを追加をクリックして、テンプレート選択へ進みます
テンプレートの検索ボックスにCraftと入力して出てくるもののうち、Craft Functions連携を選択します

変数と通知文面の設定

アクション部分の右側にある、編集をクリックしてください。この部分で、Slackに通知する具体的な文面の設定をすることができます。

なるべく汎用化して使いやすくするため、Craft Functionsのコードをいじらずに、アクションでの設定だけで通知する文面を変えられる手法に、今回はなっています。それにより、コードを見るのには抵抗がある方でも、アクションの画面上から簡単に編集できるはずです。

スクリーンショット2023-12-1914.20.16のコピー.png
具体的なやり方は、以下の通りです。

ファンクション名には、任意の名前を設定します
nameにも同様に、任意の名前を設定してください
data部分には、以下のようなデータを入れてみてください

{ "slack_channel_id": "チャンネルID", "notification_text":  "ユーザーID：#{user_id}さんが、以下のページを閲覧しました。\nページURL：#{page_url}\nページタイトル：#{page_title}" }

data部分の内容について、少し詳しく説明しておきます。

slack_channel_idには、通知が来るチャンネルのIDが入ります。2で控えておいたチャンネルのIDを、ダブルクォーテーションで囲ったうえで挿入してください。

notification_textには、通知の際に送られてくる実際の文面が入ります。その中に必要な変数を埋め込んでおり、user_id、page_url、page_titleの3つがそれに該当します。やや長ったらしいですが、このようにアクション内に文章を直接埋め込むことで、コードをいじらなくとも、ここから通知文面を直接変えることができるようになります。\nを入れることで、通知の際にその前後で改行することも可能です。

次はデータ管理をクリックし、上で設定した変数を定義しておきます。
スクリーンショット2023-12-1914.23.40.png

page_urlとpage_titleは、画像のように最新の値に設定しておいてください。

user_idがないと思われたでしょうが、実はuser_idに関しては設定不要です。user_idは、予めKARTE上でプリセットされたものなので、わざわざ改めて定義しなくても使えるようになっています。他にもいくつかそのような最初から変数として使用できるものがあり、こちらのドキュメントを参照してください。

ここまでできたら、接客サービスを公開してください。これで、実装及び基本的な設定は完了です。

検証

実際に、ページが閲覧されたらSlackで通知が飛んでくるか検証してみましょう。正しく設定できていれば、ページを見た人のユーザーID及び、ページURLやページタイトルを含んだ文面が、Slackに飛んでくることが確認できるはずです。

補足

ここではもう少し、見栄えや通知文面をリッチにする方法をご紹介します。必要に応じて、試してみてください。

通知文面の冒頭にメンションを追加する

単にSlackに流すだけじゃなく、チャンネル全体もしくは担当者へのメンションも入れて、より早く通知に気づけたらいいですよね？それは簡単に実装可能で、以下のように行います。

アクションの編集画面を開きます
dataのnotification_textの冒頭に、チャンネル全体や特定のメンション先を追加します
@channelとしたい場合は<!channel>、特定の人に通知したい場合は<@SlackのユーザーID>、複数のユーザーをまとめたユーザーグループにメンションしたい場合は、<!subteam^グループID>と書いてください

{ "slack_channel_id": "チャンネルID", "notification_text":  "<!channel>\nユーザーID：#{user_id}さんが、以下のページを閲覧しました。\nページURL：#{page_url}\nページタイトル：#{page_title}" }

{ "slack_channel_id": "チャンネルID", "notification_text":  "<@ユーザーID>\nユーザーID：#{user_id}さんが、以下のページを閲覧しました。\nページURL：#{page_url}\nページタイトル：#{page_title}" }

{ "slack_channel_id": "チャンネルID", "notification_text":  "<!subteam^グループID>\nユーザーID：#{user_id}さんが、以下のページを閲覧しました。\nページURL：#{page_url}\nページタイトル：#{page_title}" }

SlackのユーザーIDは、プロフィールページのURLに含まれているものです。Slackでユーザー名をクリックして、プロフィールとアカウントを選択すると確認できます。
例：https://your-workspace.slack.com/team/U12345678の場合、U12345678がそれに該当します

ユーザーグループのグループIDは、SlackのアプリもしくはWebページから取得できます。

その他 > 自分のオーガナイゼーション > メンバーディレクトリ の順に進んでください
検索して出てきたユーザーグループを選択し、メンバーを編集の横の「・・・」からグループIDをコピーできます

Slackアプリのアイコンと名前を変える

アイコンがデフォルトのままだったりすると何だか味気ないので、せっかくなら変えてみましょう。
スクリーンショット2023-12-1914.44.09.png

Slackアプリの画面で、Your App > App Nameの順に進みます
Basic Informationの下の方に、Display Informationという部分があり、ここでアイコン画像と表示される名前を設定します
アップロードできる画像は正方形で、512px〜2000pxまでのものであることだけ注意してください

こうすると、下のように見栄えがリッチになって、より実務の中で使えるイメージが湧いてくるのではないでしょうか。
スクリーンショット2023-12-1914.46.47のコピー.png

おわりに

今回は、KARTEで特定のイベントが発生した際にKARTE Craftを使ってSlackに通知する方法をご紹介しました。
ご紹介したページの閲覧イベント以外にも、様々なトリガーを設定したり、通知文面もコードをいじらずアクション画面から簡単に編集できるので、ぜひ試してみてください！

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！
ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい

KARTEで特定のイベントが発生した際に、KARTE Craftを使ってSlackに通知する方法