こんにちは、Customer Engineerの島本です！
先月同僚と吉祥寺にできたMONSTER SAUNAに行ってきました！最上段に座ることができないくらいアツアツで水風呂はプール並みに広かったです。
IMG_1764(1).jpg

さて、KARTEではあらゆるデータを顧客軸でリアルタイムに解析・可視化し、一人ひとりに合わせた体験の提供をすることができますが、通常機能ではKARTE のプロジェクトを横断してリアルタイムに解析することはできません。しかし、「管理上プロジェクトが分けているが、一方のプロジェクトで発生したイベントを別のプロジェクトに転送したい」と思ったことはありませんか？

例えば次のようなケースです。

ECサイトのプロジェクトで発生した購入イベントをブランドサイトのプロジェクトに転送して接客の出し分けに活用したい
特定サービスのプロジェクトで発生したCV イベントを別サービスのプロジェクトに転送して接客の出し分けに活用したい

そこで今回は、KARTE Craft を使って「プロジェクトB で発生したイベントデータをAPI経由で取得してプロジェクトA にイベントを転送する方法」について紹介します。

アウトプットイメージ

最終的なアウトプットイメージは次の通りです。

スクリーンショット_2024-02-27_12_44_36.png

構成図は次の通り。

今回はサイトA からサイトB へのリンクをクリックしたユーザーを対象にします。KARTE のスクリプト接客を使ってリンクURL のクエリパラメータにサイトA 側のvisitor_id を付与することで、サイトA のvisitor_id をサイトB に紐付くKARTE プロジェクトに引き継げるようにしています。

接客サービス機能とCraft Functionsの連携では、次の3つの機能を利用します。

設定手順

設定の手順は次の通りです。
大きく分けてプロジェクトA（転送先）側とプロジェクトB（転送元）側のそれぞれの設定があります。

[A] URL にプロジェクトA のvisitor_id を付与する接客を作成する
[B] クエリキーの設定をする
[A] API v2 アプリを作成する
[B] API v2 アプリを作成する
[B] API v2 アプリのアクセストークンを Craft Secret Manager に登録する
[B] Craft Functions を作成する
[B] Craft 用接客を作成する

順番に見てみましょう。

1. [A] URL にプロジェクトA のvisitor_id を付与する接客を作成する

まず、今回はプロジェクトA のvisitor_id がプロジェクトB で計測ができていることが前提条件になるため、KARTE でプロジェクトA のvisitor_is をプロジェクトB で計測しているサイトに遷移するURL に付与する接客を作成します。

細かいKARTE の設定方法は割愛して、接客を実装する上でサンプルコードを掲載します。
サンプルコードなので、必ずサイトの仕様に合わせて書き換えてください。

KARTE のスクリプト接客で設定するJavaScript 例

パラメーターはユーザーにも表示されるため、クエリキーはvisitor_id ではなくkrtid としています。

var atag = document.querySelectorAll("a");

var cookieKey = 'krt.vis';
var visitorId = getCookie(cookieKey);

function getCookie(key) {
    var arr = document.cookie.split('; ');
    var c = arr.find(function(c) {
        return c.split('=')[0] === key;
    });
    if (!c) return null;
    return decodeURIComponent(c.split('=')[1]);
}

for (a of atag) {
    var href = a.getAttribute("href");
    if (href && href.indexOf("サイトBのドメイン") !== -1) {
        var originalHref = href;
        var modifiedLink = originalHref + '?krtid=' + visitorId;
        a.setAttribute("href", modifiedLink);
    }
}

2. [B] クエリキーの設定をする

クエリキーは通常「閲覧ページのクエリ文字列」としてクエリ文字列全体で保存されるため、特定のパラメータを独立した項目として識別するためにクエリキーの設定を行います。

クエリキー(query Key)の確認、登録方法

[Insight > サイト設定 > 保存するクエリキー] から編集
[クエリキー] に krtid を設定
保存する

以上で、krtid を独立した項目として識別するための設定が完了しました。

3. [A] API v2 アプリを作成する

プロジェクトA でKARTEのAPIを利用するために、API v2アプリを作成します。

[ストア > API v2設定] からアプリを新規作成
[アプリタイプ] を token に設定
必要なscopeを追加
- track.event.write
アプリを保存し、一度だけ表示されるアクセストークンをメモしておく

4. [B] API v2 アプリを作成する

プロジェクトB でKARTEのAPIを利用するために、API v2アプリを作成します。

[ストア > API v2設定] からアプリを新規作成
[アプリタイプ] を token に設定
必要なscopeを追加
- beta.track.event.get
アプリを保存し、一度だけ表示されるアクセストークンをメモしておく

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

プロジェクトA とプロジェクトB で作成したAPI v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、それぞれCraft Secret Manager に登録します。

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

6. [B] Craft Functionsのファンクションを作成する

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

[Craft > ファンクション > 新規作成 > テンプレートから作成] を選択
「 KARTEのイベントデータをAPI経由で取得して別のプロジェクトにイベントを転送します 」というテンプレートを検索し[取得]ボタンをクリック
[反映] ボタンをクリック
[変数] タブで次の変数の値を設定する
- LOG_LEVEL
  - 出力するログのレベル
- KARTE_APP_TOKEN_SECRET
  - API v2 アプリのアクセストークンを登録したシークレットの名前
- OTHER_PROJECT_KARTE_APP_TOKEN_SECRET
  - プロジェクトA のAPI v2 アプリのアクセストークンを登録したシークレットの名前
- PER_DATA_TIMEOUT_SEC
  - リトライのタイムアウト時間(秒)。イベント取得APIエラー時のリトライ処理の実行時間を指定
- [設定 > ファンクションの有効化] にチェックを付けて [保存]

なお、テンプレートのソースコードはGitHubで公開しています。
craft-codes/craft-functions/get-events-and-write-to-other-projects at main · plaidev/craft-codes

7. [B] Craft 用接客を作成する

Functionをトリガーする条件を指定するための接客サービスを作成します。

接客サービス画面を開く
Craft Functions連携 テンプレートを利用してアクションを追加
- ※ テンプレートが表示されない場合は、Craftの利用申請が必要です

スクリーンショット2023-07-2415.09.18.png

今回は、転送したいイベントが発生したことをきっかけにFunction をトリガーするため、次のようにCraft 接客の配信設定を行います。

「アクション」
- 配信率: 100%
  - ※ アクションの中身の設定については後述
「対象ユーザー」
- 全員
  - ※ 対象ユーザーを絞りたい場合は、条件を指定します
  - ※ 検証中はテスト配信用のセグメントを設定してください
「対象イベント」
- 「転送したいイベントが発生した」という条件になるように配信トリガーを以下のとおりに設定
- 転送したいイベント > date > 存在する
- 配信頻度: アクション毎
「オプション」
- 同時配信: OK
保存をする

次に、接客サービスに登録したアクションの設定をしていきます。ここで設定した内容がCraft Functions 側に渡されます。

「アクション設定」を埋めていく
- 「ファンクション名」
  - トリガーしたいFunctionの名称（今回の例では get-events-and-write-to-other-projects ）を設定
- 「name」
  - 今回は利用しないので「ファンクション名」と同じ値を設定
- 「data」
  - JSONでuser_id と転送したいイベント名と発生日時（date）とkrtidを設定

{
"userId": "#{ user_id }",
"date" : "#{ date }",
"otherProjectVisitorId" : "#{ krtid }"
"eventName" : "転送したいイベント名"
}

「データ管理」をクリック
- ユーザー情報変数を次のとおりに設定
  - 変数名：date
    - すべての期間 > 転送したいイベント > date > 最新の値
  - 変数名：krtid
    - すべての期間 > 閲覧 > access.uri.queryKey.krtid > 最新の値
保存する

以上で、転送したいイベントが発生したタイミングで、Craft Functions 側にuser_id と転送したいイベントの日時とプロジェクトA のvisitor_id を渡す設定が完了しました。

実際に動かしてみる

では、実際に動かしてみましょう！！
今回はbuy イベントを転送するように実装してみました。

まず、プロジェクトA で計測しているサイトから、プロジェクトBで計測しているサイトに遷移するリンクをクリックします。プロジェクトB でkrtid が計測されていることを確認できました。
スクリーンショット_2024-02-27_13_15_42.png

次に、商品を購入してbuy イベントを発生させます。buy イベントが発生したタイミングでCraft 用接客が配信されていますね。
スクリーンショット_2024-02-27_13_19_39.png

最後に、プロジェクトA にbuy イベントが転送されているか確認します。無事に転送されていることを確認できました！buy イベントが転送されたことにより、セグメントの更新がかかって「初回購入のお客様」セグメントに入っていることが分かりますね。
スクリーンショット_2024-02-27_13_20_28.png

補足

「ユーザー情報変数を利用すればわざわざAPI 経由でイベントデータを取得する必要はないのでは？」と思った方もいるかと思いますが、ユーザー情報変数の場合、オブジェクト配列を全部連携することが出来ない仕様のため、これまではイベントデータをまるっと連携することができなかったのです。

ただ、KARTE Craft を使ってAPI 経由でイベントデータを取得すれば、イベントデータをまるっと転送できるようになります！

おわりに

今回はKARTEのイベントデータをAPI経由で取得して別のプロジェクトにイベントを転送する方法について紹介しました。

これまではプロジェクトを分けることで歯抜けになってしまった顧客データも、API 経由でイベントを取得して転送することにより、今まで以上に一人ひとりに合わせた体験の提供をすることができるようになります。管理とやりたいことを両立できるためとても便利ですね！

ぜひ皆さんも試してみてください！

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

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

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

↓ PLAIDで働きたい