Google Search Consoleの掲載順位が変動したら、Craft Functionsを使ってSlackに通知する方法

<html><head></head><body>最近は寒くて寒くて布団から出てくるまでにかかる時間がどんどん伸びています 
こんにちは、Customer EngineerのUGです！
さて、皆さんは日々KARTEを運用している時に、外部サービスの行動もKARTE側に紐づけたいなぁであったり、外部サービスで特定の行動をした際にKARTE側でも検知したいというようなことを考えたことはありませんか？そんな皆様に向けて今回は、外部サービスからWebhookをトリガーにKARTEのユーザーにイベントを発火させるについて紹介します。これにより、外部サービスで特定の行動をしたことをKARTE側でも検知して、自社のサイトでの施策に活かしたりすることができるようになります。
<h1 id="全体像">全体像</h1>
実現する処理の全体像は、次の通りです。 
<img src="https://ik.imagekit.io/plaid/dfdd1063-5634-4e47-8c58-dda4b2b00572/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-01-1621.36.11.png" alt="スクリーンショット2024-01-1621.36.11.png">
今回は外部サービスの例としてKARTE Academyを運用しているthinkificからのWebhookをトリガーにKARTEイベントを発火させてみます。thinkificの場合、thinkific側でKARTE Academyのコース受講完了などのユーザー行動を検知して外部にWebhookを飛ばすことができます。そのユーザー行動をKARTEのイベントとしてサーバーサイドで連携することで、KARTEで取得しているWebやアプリ上のユーザー行動と外部サービス上の行動をまとめてトラッキングでき、特定のコースを完了したユーザーに特定の施策を実施すると言うようなことも可能になります。
<h1 id="実装手順">実装手順</h1>
実装の手順は次の通りです。
<ol>
<li>API v2 アプリを作成する</li>
<li>Webhookを受け取ってイベント発火するCraft Functionsを作成する</li>
<li>thinkific側でWebhookの設定をする 
（この手順に関しては実際に利用している外部サービスに置き換えて実装してください）</li>
</ol>
順番に説明します。
<h2 id="1. API v2 アプリを作成する">1. API v2 アプリを作成する</h2>
まず、今回のSolutionで使用するAPI v2 アプリを作成していきます。 
以下の画面を参考に、ストア&gt;API v2設定からAPI v2 アプリを作成してください。
<img src="https://ik.imagekit.io/plaid/805e84e7-6f7e-4353-af10-8d011f16f29e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-01-1621.47.39.png" alt="スクリーンショット2024-01-1621.47.39.png">
スコープにはtrack.event.writeとbeta.track.event.writeAndExecActionを設定してください。作成時にシークレットを保存して、シークレット名をコピーしておいてください。function作成の際に変数部分に入れる必要があります。ここまででAPI v2 アプリの作成は終了になります。
<h2 id="2. Webhookを受け取ってイベント発火するCraft Functionsを作成する">2. Webhookを受け取ってイベント発火するCraft Functionsを作成する</h2>
次に、今回のSolutionのメインになるCraft Functionsの作成をしていきます。サンプルとなるソースコードは以下に掲載しています。 
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/events-from-webhook" target="_blank" rel="noreferrer">https://github.com/plaidev/craft-codes/tree/main/craft-functions/events-from-webhook</a>
作成手順は次の通りです。
<ul>
<li>[Craft &gt; ファンクション &gt; 作成 &gt; テンプレートから作成] を選択</li>
<li><code>外部サービスからWebhookをトリガーにKARTEのユーザーにイベントを発火させる</code>というテンプレートを検索し「取得」ボタンをクリック</li>
<li>「反映」ボタンをクリック</li>
<li>Functionを有効化して保存</li>
</ul>
処理の全体的な流れは以下の通りです。
<ol>
<li>thinkific側からユーザーの行動に合わせてWebhookを受け取る。</li>
<li>それをトリガーとしてKARTE側でイベントを発生させる。</li>
</ol>
以下でスクリプトや変数の簡潔な説明をしていきます。 
まずは変数に関してはそれぞれ以下のような意味合いになります。必要に応じて適切な値を入力してください。
<ul>
<li><code>LOG_LEVEL</code>では出力するログレベルを入力します。
<ul>
<li>例：ERROR</li>
</ul>
</li>
<li><code>KARTE_APP_TOKEN_SECRET</code>ではKARTE API v2アプリのtokenを登録したシークレット名を入力します。
<ul>
<li>例：KARTE_API_TOKEN_THINKKIFIC_EVENT_WRITE</li>
</ul>
</li>
<li><code>EVENT_NAME</code>ではKARTEの中で発生させたいイベント名を入力します。</li>
<li><code>VALUES_FIELDS</code>ではWebhookで送られてくるデータの中にあるfieldの内でイベントのvaluesで送信したいfieldの名前をカンマ区切りで入力します。
<ul>
<li>例：email,name,rank</li>
</ul>
</li>
<li><code>USER_ID_FIELD</code>ではpayloadの中のuser_idが格納されているfield名を入力します。
<ul>
<li>例：user_id</li>
</ul>
</li>
<li><code>VISTOR_ID_PREFIX</code>では生成するvistor_idにつけたいプレフィックスの文字列
<ul>
<li>例：thinkific</li>
</ul>
</li>
</ul>
以下の部分でイベントを発火させています。
<pre><code class="hljs"> try {
 await karteApiClient.postV2betaTrackEventWriteandexecaction({
 keys: { visitor_id: VISTOR_ID_PREFIX+'-'+userId },
 event: {
 event_name: EVENT_NAME,
 values,
 },
 });
 logger.log(`academy_signin Event sent successfully.`);
 } catch (e) {
 logger.error(e);
 }
}
</code></pre>
ここまでできたら下記の画像を参考に、設定からエンドポイントを作成してください。
<img src="https://ik.imagekit.io/plaid/1d4c53f1-3621-4aa8-b288-3919e0aa6022/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-01-1622.03.37.png" alt="スクリーンショット2024-01-1622.03.37.png">
ちなみに今回のイベントを発生させる際に、thinkific側のuser_idを使ってKARTEのvisitor_idを独自に生成しています。しかし、これらは元々KARTEで計測しているWebやAppのユーザーのvisitor_idとは違うものなので、このままではそれらのユーザーとthinkific側のユーザーはマージされません。しかし、元々KARTEのidentifyイベントで取得しているuser_idと同じIDを外部サービス側で保持している場合は、それを使ってthinkific側のビジターに対してidentifyイベントを発生させuser_idを連携することで、メンバーにマージすることができます。thinkificでのsign inの際に連携されるWebhookのbody内に、KARTE側のアカウントIDが含まれるように連携の実装をしています。そのKARTE側アカウントIDをuser_idとして指定した上でthinkific IDベースのビジターにidentifyイベントを発生させ、thinkific側アカウントとKARTE側アカウントをKARTE上でマージしています。利用している外部サービスによって、名寄せのIDに何を使うか、それをどう連携するかは異なってきます。
<h2 id="3. thinkific側でWebhookの設定をする">3. thinkific側でWebhookの設定をする</h2>
ここのパートは使用する外部サービスによって変わるので、参考程度にご紹介させて頂きます！thinkificの場合、setting&gt;code&amp;analytics&gt;webhookから新規Webhook先を登録できます。利用している外部サービスにもWebhookを飛ばす機能がある場合、その設定画面を想定してください。
赤枠で囲った部分に、先ほど作成したエンドポイントをペーストしてください。利用している外部サービスに合わせて、適切な箇所にエンドポイントを設定してください。 
<img src="https://ik.imagekit.io/plaid/f2619d8c-f40f-45ed-8bac-0010279a2753/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-01-1622.11.19.png" alt="スクリーンショット2024-01-1622.11.19.png">
<h1 id="実際に動かしてみる">実際に動かしてみる</h1>
実際に動作を確認してみましょう。thinkific側からテストでWebhookを送信してみると、実際にKARTE側にもイベントが発火していることが確認できました。
<img src="https://ik.imagekit.io/plaid/020b6468-e0ee-4df2-8596-1379c5fe1317/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-01-1622.16.45.png" alt="スクリーンショット2024-01-1622.16.45.png">
<h1 id="おわりに">おわりに</h1>
今回は外部サービスからWebhookをトリガーにKARTEのユーザーにイベントを発火させるを紹介しました。他にも、外部サービスからのWebhookをトリガーにしてアクションテーブルの更新と言ったKARTE内の別のアクションを起こしたり、スプレッドシートに書き出すというようなKARTE外のサービスに何かアクションを起こすといった応用も考えられます。
ぜひ皆さんも、外部サービスからのWebhookをトリガーにして様々なことをしてみてください！
<hr>
プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。
↓ パートナー企業になりたい
<ul>
<li><a href="https://ecosystem.plaid.co.jp/" target="_blank" rel="noreferrer">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
↓ PLAIDで働きたい
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer" target="_blank" rel="noreferrer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer" target="_blank" rel="noreferrer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>
</body></html>

外部サービスからWebhookを送信して、それをトリガーとしてKARTE内で特定のユーザーに対してイベントを発火させるSolution