Craft FunctionsとCraft Counterで当たり上限数のあるくじ引き施策を実装する

Craft FunctionsとCraft Counterを利用して当たり上限数を考慮したくじ引き施策を実装する方法について紹介します。

Soichiro Yamaguchi
Solution
10 May, 2024

こんにちは、Customer Engineerの山口です！先日、名探偵コナンの劇場版最新作を観に行きました。ラスト3分で驚きの新事実が・・・。徹夜で予習したおかげで、とても楽しめました！

さて本記事では、KARTEの接客サービスとCraftを組み合わせて、上限が設定された当たり数を持つくじ引き施策の実装する方法をご紹介します。

KARTEの標準機能のみを使用してくじ引きアクションを実装する場合、当たりが出た回数をカウントすることが困難です。たとえカウントできたとしても、上限数に達した際に適切な通知を行い、担当者がタイムリーにアクションを停止させるオペレーションが必要になります。

しかし、Craft FunctionsとCraft Counterを活用することで、当たりが出た回数を自動で集計し、当たりが上限数に達した場合に何らかの処理を行うようなアクションを実装できます。

この方法を用いることで、運用の手間を削減しつつ、ユーザーに適切なくじ引き施策を提供することが可能になります。本記事では、その具体的な実装手順について詳しくご紹介します。

アウトプットイメージ

本記事で紹介するくじ引き施策の最終的なアウトプットは、以下のイメージ図の通りです。

くじ引き施策のアウトプット

このイメージは、ユーザーから見えるくじ引きの結果画面を表しており、当たりやハズレが直感的に理解できる接客アクションになっています。

さらに、システムの全体構成を示した図を以下に示します。

システム構成

この図は、ユーザーのアクションに基づいてCraft Functionsがどのように動作し、当たりが出た回数を管理しつつ、結果として当たりまたはハズレを返すのかを示しています。

注意点

この施策を実施する前に、以下の点に注意してください。

CraftのGrowthプラン以上を利用していることを前提としています。
実際にくじ引き施策を行う際には、くじ引きAPIの不正利用を防ぐために認証システムとの連携等も検討してください。
本記事では、同一ユーザーがくじ引きに参加できるのは設定した時間間隔に1回にすることで、簡易的に不正利用を防ぐような設定としています。
当選ユーザーの一覧を抽出したい場合、Datahubの契約が必要になります
当選ユーザーの管理を、/track/event/write API経由で発生させたKARTEのイベントで実施します。APIの分間リクエスト制限を超える場合は、上限を引き上げる必要があります
https://developers.karte.io/reference/api-v2-limitation
実際にこのような施策を運用する場合には、景品表示法の観点から、当たり残数が0になった時点で速やかにキャンペーンを終了してください。

設定手順

設定の手順は次の通りです。

API v2 アプリを作成する
API v2 アプリのアクセストークンを Craft Secret Manager に登録する
Craft Functionsのファンクションを作成する
Craft Functionsのエンドポイントを作成する
セグメントを作成する
接客サービスを作成する順番に見てみましょう。

1. API v2 アプリを作成する

KARTEのAPIを利用するために、API v2アプリを作成します。

ストア > API v2設定からアプリを新規作成
アプリタイプを token に設定

必要なscopeを追加
track.event.write
アプリを保存し、一度だけ表示されるアクセストークンをメモしておく

2. API v2 アプリのアクセストークンを Craft Secret Manager に登録する

API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。

Craft > シークレットからシークレットを新規作成
名前に、わかりやすい名前を入力
メモしておいたAPI v2 アプリのアクセストークンをシークレットの値に入力し、作成
シークレット名をメモしておく

3. Craft Functionsのファンクションを作成する

Craft Functionsのファンクションを作成します。作成手順は次の通りです。

Craft > ファンクション > 新規作成 > テンプレートから作成を選択
「 Craft FunctionsとCraft Counterで当たり上限数のあるくじ引き施策を実装する」というテンプレートを検索し取得ボタンをクリック
反映ボタンをクリック
変数タブで次の変数の値を設定する
PRIZES
当たり種別の名称を設定します。カンマ区切りで複数指定可能です。
例: 1等,2等,3等
LIMITS
当たりの上限数を設定します。カンマ区切りで複数指定可能で、PRIZESと同じ順番で対応する上限数を設定します。
例: 10,50,100
LOSE_PROBABILITY
ハズレの確率を設定します。0から1の間の小数値で指定します。
例: 0.5
USER_PARTICIPATION_INTERVAL_MINUTES
同一ユーザーがくじ引きに連続して参加できない時間を分単位で設定します。0を指定すると制限なしになります。
KARTE_APP_TOKEN_SECRET
手順2でメモしたKARTE API v2アプリのアクセストークンのシークレット名を設定します。
その他の変数は、ひとまずデフォルト値のままで問題ありません
保存する
デプロイ完了後、設定 > ファンクションの有効化にチェックを付ける

当たり判定のロジックについて

このテンプレートにおける当たり/はずれを判定するロジックについて説明します。各賞品の当たり確率は、次のように計算されます：

その賞品の当たり残数 / 全体の当たり残数 * (1 - はずれ確率)

次のような状況を具体例として想定します：

PRIZES: 1等,2等,3等
LIMITS: 10,50,100
LOSE_PROBABILITY: 0.5

初期状態での確率は、次の通りです：

はずれの確率: 0.5
当たりの確率: 0.5
内、1等の当選確率: 10 / (10 + 50 + 100) * 0.5 ≒ 0.031 (約3.1%)
内、2等の当選確率: 50 / (10 + 50 + 100) * 0.5 ≒ 0.156 (約15.6%)
内、3等の当選確率: 100 / (10 + 50 + 100) * 0.5 ≒ 0.313 (約31.3%)

たとえば1等が残り6個、2等が残り15個、3等が残り40個になった場合の確率は次の通りです：

はずれの確率: 0.5
当たりの確率: 0.5
内、1等の当選確率: 6 / (6 + 15 + 40) * 0.5 ≒ 0.049 (約4.9%)
内、2等の当選確率: 15 / (6 + 15 + 40) * 0.5 ≒ 0.123 (約12.3%)
内、3等の当選確率: 40 / (6 + 15 + 40) * 0.5 ≒ 0.328 (約32.8%)

これにより、動的に各当たりの確率が変化します。当たり残数が無くなった賞品は自動で当たり確率が0になり、もう当たらなくなります。

なお、テンプレートのソースコードはGitHubで公開しています。

craft-codes/craft-functions/lottery-with-limits-of-wins at main · plaidev/craft-codes

4. Craft Functionsのエンドポイントを作成する

作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。

作成したファンクションの編集画面から設定 > エンドポイント > 作成をクリック
表示されたエンドポイントURLをメモしておく

5. 接客サービスを作成する

くじ引き機能をユーザーに提供するために、KARTEの接客アクションを利用して、くじ引き画面をポップアップ形式で作成します。このポップアップは、設定した時間内にくじ引きに参加していないユーザーに対して表示されます。

くじ引きアクションのJavaScript実装

以下のJavaScriptコードは、ユーザーが「くじを引く」ボタンをクリックした際に実行されます。このコードは、くじ引きのリクエストを送信し、当たり/ハズレの結果に応じてstateを更新します。 CRAFT_ENDPOINT_URLは手順4でメモしたエンドポイントURLに置き換えてください。 LOTTERY_KEYはくじ引き施策同士を区別するための識別子です。当たり時のイベント等に含まれます。

var CRAFT_ENDPOINT_URL = “https://xxx.cev2.karte.io/functions/yyyyy";var LOTTERY_KEY = “lottery_key”;widget.setVal(“isLoading”, false);widget.method(“onClick”, function () { // Display loading indicator until the request is complete widget.setVal(“isLoading”, true); // Send the lottery request fetchData(function (item, error) { if (error) { console.error(error); widget.setState(3); // State for error: not winning } else { widget.setVal(“result”, item.result); // Change the state based on whether a prize was won if (item.result && item.result !== “No prize won”) { widget.setState(2); // State for winning } else { widget.setState(3); // State for not winning } } widget.setVal(“isLoading”, false); });});function fetchData(cb) { var payload = { userId: “#{user_id}”, lotteryKey: LOTTERY_KEY, }; fetch(CRAFT_ENDPOINT_URL, { method: “POST”, headers: { “Content-Type”: “application/json”, }, body: JSON.stringify(payload), }) .then(function (response) { return response.json(); }) .then(function (item) { cb(item); }) .catch(function (err) { cb(null, err); });}widget.show();

くじ引きポップアップの実装

くじ引きの結果に応じて表示される接客サービスは以下の通りです。ユーザーが「くじを引く」ボタンをクリックすると、JavaScriptがCraft Functionsへリクエストを送信し、結果に応じて当たりまたはハズレの画面が表示されます。

<div class=“karte-temp-whole”> <div class=“karte-temp-state1” krt-if=“state==1”> <i class=“karte-temp-close karte-close karte-temp-hover” krt-if=”#{close.use}"></i> <div class=“karte-temp-card”> <div class=“karte-temp-mainvisual”><img src="#{mainvisual}" alt="#{mainvisual_alt}" /></div> <div class=“karte-temp-wrap”> <div class=“karte-temp-title”>#{title}</div> <div class=“karte-temp-description”>#{description}</div> <a class=“karte-temp-btn karte-temp-hover” krt-on:click=“onClick”> <span krt-if="!isLoading">#{btn}</span> <div krt-else class=“drawing”> <i class=“loader” aria-hidden=“true”></i> #{loading_btn} </span> </a> </div> </div> </div> <div class=“karte-temp-state1” krt-if=“state==2”> <i class=“karte-temp-close karte-close karte-temp-hover” krt-if="#{close.use}"></i> <div class=“karte-temp-card”> <div class=“karte-temp-mainvisual”><img src="#{winvisual}" alt="#{winvisual_alt}" /></div> <div class=“karte-temp-wrap”> <div class=“karte-temp-title”>{{result}}#{win_title}</div> </div> </div> </div> <div class=“karte-temp-state1” krt-if=“state==3”> <i class=“karte-temp-close karte-close karte-temp-hover” krt-if="#{close.use}"></i> <div class=“karte-temp-card”> <div class=“karte-temp-mainvisual”><img src="#{losevisual}" alt="#{losevisual_alt}" /></div> <div class=“karte-temp-wrap”> <div class=“karte-temp-title”>#{lose_title}</div> </div> </div> </div></div>実際には接客サービスを配信したい状況に合わせた配信設定を実施してください。

実際に動かしてみる

設定が完了したら、実際に動作を確認してみましょう。

まずは、くじを引くボタンを押下するところから始めます。くじ引きが始まり、結果が表示されるプロセスを以下の画像で確認できます。

lucky_draws_won3prize

次に、設定を変更して、当たりの上限数を0にしてみます。これにより、すべてのユーザーがハズレになるはずです。

lucky_draws_000

上記の設定変更後、再度くじを引くボタンを押下すると、以下のようにハズレが出ることが確認できます。

lucky_draws_lose

くじ引き機能の動作確認が行えて、設定に応じた結果が得られることがわかりました。

くじ引きイベントの送信について

くじ引きをすると、当たりやハズレの結果に応じてイベントがFunctionsから送信されます。

当たりのイベント:
ハズレのイベント:

例えば、運用上で当たりユーザーの一覧を抽出したい場合など、対象者をDatahubクエリで抽出することが可能です。

おわりに

本記事では、Craft FunctionsとCraft Counterを使って、当たり上限数を考慮したくじ引き施策の作り方をご紹介しました。

今回のソリューションでは当たり確率が当たり残数に応じて変動するため、「予定していた数より当たり数を出してしまった」という事態を、運用の手間をかけずに自動で避けることができます。

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

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

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

↓ PLAIDで働きたい

Customer Engineer | 募集ポジション | 株式会社プレイド
Product Engineer | 募集ポジション | 株式会社プレイド