「Craft FunctionsのIPアドレスを固定する」機能をリリースしました！

<html><head></head><body>こんにちは、Customer Engineerの島本です！ 
こないだ同僚に誘われて7月にオープンしたHUBHUB御徒街に行ってきたのですが、貸し切りでフィンランドサウナを楽しみつつ、電車の音を聞きながら整う空間が面白かったです！ 
<img src="https://ik.imagekit.io/plaid/d39818f2-235b-4807-beb4-50e88d068f1a/IMG_1546.jpg" alt="IMG_1546.jpg">
さて、KARTE では<a href="https://support.karte.io/post/37WjobkPgizqvwhIY97dpH" target="_blank" rel="noreferrer">ユーザーに対して表示回数やクリック回数に応じた接客サービスの配信停止条件</a>を設定できますが、ユーザーに対してではなく、「接客サービスに対して配信数やクリック数に応じた配信停止条件を指定したい」と思ったことはありませんか？
例えば次のようなケースです。
<ul>
<li>KARTE の接客サービスを広告枠として活用していて、配信数やクリック数が一定の閾値に達したら停止したい</li>
<li>KARTE のアンケート接客でアンケート回答数が一定の閾値に達したら停止したい</li>
</ul>
KARTE とDatahub を駆使して実現することも出来ますが、Datahub の特性上データの更新がバッチになるため、接客を停止するのに最短でも1時間のラグが出てしまいます。
しかし、<a href="https://solution.plaid.co.jp/202310-craft-counter">Craft Counter</a> を使うことでリアルタイムに接客を停止することを実現できます！ 
今回はCraft Counter を使用して「配信数やクリック数に応じた接客サービスの自動停止」を実装する手順を紹介します。
<h1 id="アウトプットイメージ">アウトプットイメージ</h1>
接客サービス側のアクション設定で配信制御をしたい項目（配信数やクリック数）と上限回数を設定できるように実装しました。 
<img src="https://ik.imagekit.io/plaid/6b9d1026-afdd-42b9-8321-1a56a6fbe32f/%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%882023-10-1717.16.41.png" alt="スクリーンショット2023-10-1717.16.41.png">
<h1 id="処理の流れ">処理の流れ</h1>
全体の処理の流れは、次の通りです。 
<img src="https://ik.imagekit.io/plaid/f18a3e31-4618-408e-bdf0-54b6d63a865b/Untitled-2023-07-28-0049.png" alt="Untitled-2023-07-28-0049.png">
接客サービス機能とCraft Functionsの連携では、次の2つの機能を利用します。
<ul>
<li><a href="https://craft.developers.karte.io/craft-functions/triggers/endpoint" target="_blank" rel="noreferrer">Craft Endpoint トリガー</a>
<ul>
<li>Craft Functionを実行するためのHTTPエンドポイント</li>
</ul>
</li>
<li><a href="https://developers.karte.io/reference/post_v2beta-action-campaign-toggleenabled" target="_blank" rel="noreferrer">Toggle campaign's enabled status API</a>
<ul>
<li>接客サービスの公開・非公開を制御するAPI</li>
</ul>
</li>
</ul>
<h1 id="実装手順">実装手順</h1>
実装の手順は次の通りです。
<ol>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Craft Functionsを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>Functionと連携する接客を作成する</li>
</ol>
順番に見てみましょう。
<h2 id="1. API v2 アプリを作成する">1. API v2 アプリを作成する</h2>
まず、Toggle campaign's enabled status API を利用するためのAPI v2アプリを作成します。 
<img src="https://ik.imagekit.io/plaid/bfe2f6a8-b78c-4c95-ad91-db59ecc03a9b/image(5).png" alt="image(5).png">
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を&nbsp;<code>token</code>&nbsp;に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.action.campaign.toggleEnabled</code>: API に必要</li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンを控えておく</li>
</ul>
「アプリタイプ」は後から変更できないため、誤って作成した場合は、アプリを再度作成し直してください。
<h2 id="2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する">2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h2>
API v2 アプリのアクセストークンを Craft Secret Manager のシークレットとして登録します。それにより、秘匿すべきアクセストークンをファンクション上に直接記述する必要が無くなります。 
<img src="https://ik.imagekit.io/plaid/116765b1-4d21-4d74-8d3e-e5a4e4431e5b/image(6).png" alt="image(6).png">
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>控えておいたアクセストークンを貼り付けて、適当な名前を付けて保存</li>
</ul>
作成したシークレットの名前は、最後に作成するCraft Functions のファンクション中に記載します。
<h2 id="3. Craft Functionsを作成する">3. Craft Functionsを作成する</h2>
次に、接客サービスからのリクエストを受け付けるCraft FunctionsのFunctionを作成します。サンプルとなるソースコードは、GitHubで公開しています。 
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/stop-campaign-by-imp-click" target="_blank" rel="noreferrer">craft-codes/craft-functions/stop-campaign-by-imp-click at main · plaidev/craft-codes</a>
作成手順は次の通りです。
<ul>
<li>[Craft &gt; ファンクション] からファンクションを新規作成</li>
<li>サンプルコードからコードやモジュールをコピー</li>
<li>Functionを有効化して保存</li>
</ul>
サンプルコードでは次の機能が実装されています。
<ul>
<li>接客サービスID毎の配信数 or クリック数をCraft Counter 上でincrement する</li>
<li>Craft Counter 上でincrement する際に上限値と比較し、上限値を超えていた場合にToggle campaign's enabled status API にリクエストを送信する</li>
</ul>
increment する項目（配信数 or クリック数）と上限値については接客サービス側で設定するため、後ほど説明します。また、上記処理には数秒程度の時間を要するため、この実装方法では上限値に達した際に接客を即座に停止できないことに留意してください。
<h2 id="4. Craft Functionsのエンドポイントを作成する">4. Craft Functionsのエンドポイントを作成する</h2>
Craft Functionsが作成できたら、接客側から実行出来るようにするためのエンドポイントを作成します。
<img src="https://ik.imagekit.io/plaid/a1c8021e-4690-40ad-8e91-2efb5cad5176/image(7).png" alt="image(7).png">
<ul>
<li>作成したファンクションの編集画面で [設定] タブを開く</li>
<li>[エンドポイント] 欄の [作成] ボタンを押す</li>
</ul>
作成したエンドポイントのURLは接客サービス側の実装で利用するので手元に控えておきます。
<h2 id="5. Functionと連携する接客を作成する">5. Functionと連携する接客を作成する</h2>
最後に、配信数やクリック数に応じて自動停止したい接客サービスを実装します。細かい接客サービスの設定方法は割愛して、アクションのHTML/JavaScriptのサンプル実装を掲載します。
<h3 id="アクションのJavaScript例">アクションのJavaScript例</h3>
実装のポイント
<ul>
<li>配信を停止したい条件に合わせてCraft 側に接客サービスIDと上限値のデータを含めてリクエストを送信</li>
<li>クリック数に応じた配信停止を行いたい場合は、クリックしたタイミングでリクエストを送信する必要があるため、widget.method を使ってHTML とバインドするイベントハンドラを定義</li>
</ul>
<pre><code class="hljs">// POSTリクエストを送信するためのデータ
var postData = {
 campaignId: "#{campaign_id}", 
 limitNumber: #{limitNumber}
};

// FunctionsのエンドポイントURL
var endpointUrl = "#{craft_endpoint}"; 

// 条件分岐(クリックの場合)
widget.method("clicked", function(e){
 if( #{click} ){
 craftPost();
 }
});

// ウィジェットを表示
widget.show();

// 条件分岐（表示回数の場合）
if( #{impression} ){
 craftPost();
}

// POSTリクエスト処理関数
function craftPost() {
 fetch(endpointUrl, {
 method: "POST",
 mode: "cors",
 headers: {
 "Content-Type": "application/json", 
 },
 body: JSON.stringify(postData), 
 })
 .then(function(result) {
 if (!result.ok) {
 throw new Error(result);
 }
 })
 .catch(function(error) {
 // エラーハンドリング
 console.error("エラー:", error);
 });
}

</code></pre>
<h3 id="アクションのHTML例">アクションのHTML例</h3>
実装のポイント
<ul>
<li>クリック数に応じた配信停止を行いたい場合は、先程widget.method で定義したイベントハンドラをkrt-on に指定</li>
</ul>
<pre><code class="hljs">&lt;div class="banner-wrapper"&gt;
 &lt;a krt-on:click="clicked" href="#{href}"&gt;
 &lt;img src="#{img}" class="banner-image"&gt;
 &lt;/a&gt;
&lt;/div&gt;
</code></pre>
<h3 id="アクションの静的変数の設定例">アクションの静的変数の設定例</h3>
JavaScript やHTML 内で変数を呼び出しているため、以下の通りに<a href="https://support.karte.io/post/3TPVVSzxiA6U3MYNRj25JJ" target="_blank" rel="noreferrer">静的変数</a>を設定します。
<img src="https://ik.imagekit.io/plaid/cd419c60-6de2-4831-8a89-910952467c20/%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%882023-10-170.27.46.png" alt="スクリーンショット2023-10-170.27.46.png">
以上で設定は完了です！
<h1 id="実際に動かしてみる">実際に動かしてみる</h1>
では、実際に動かしてみましょう！！！！ 
今回は160×600のバナーを表示回数 10回で自動停止するように設定してみました。 
<img src="https://ik.imagekit.io/plaid/1c79eb83-f4d2-47d1-9a29-4e0faf1b6de0/%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%882023-10-171.02.11.png" alt="スクリーンショット2023-10-171.02.11.png">
Craft Functions のLog Level を DEBUG にすると、接客が配信される度に該当の接客サービスIDとincrement した数と指定した上限値を確認することができます。 
そして、increment した数が上限値に達して接客サービスが停止した際に表示される"Campaign has been successfully stopped."というログを確認することが出来ました！
<img src="https://ik.imagekit.io/plaid/ff31e4da-65d2-4be8-b782-20a514da4cb3/%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%882023-10-171.10.51.png" alt="スクリーンショット2023-10-171.10.51.png">
接客サービス側も確認してみると、該当接客が停止していますね！！！ 
<img src="https://ik.imagekit.io/plaid/5400f362-f2a0-4071-baca-358a7a446a8c/%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%882023-10-171.11.52.png" alt="スクリーンショット2023-10-171.11.52.png">
<h1 id="おわりに">おわりに</h1>
今回は「配信数やクリック数に応じた接客サービスの自動停止」をCraft Counterで実装する方法について紹介しました。
これまでKARTE はWeb 接客として活用いただくことが多かったのですが、冒頭お伝えした通り、この仕組みを活用することでKARTE を新たな広告サービスとして提供することもできるようになります。
さらに、KARTE で収集している1st Party Customer Data を活用することで、精度の高いターゲティングが可能となり、広告の効果的な配信が実現できるため、昨今注目されているリテールメディアも簡単に構築できるのです。
今までKARTE で蓄積してきたデータを新たなビジネスチャンスとして活用できるなんて可能性が広がりますね！
<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>

Craft Counter を使った「配信数やクリック数に応じた接客サービスの自動停止」の方法について紹介します。