Solution Blog

Kazuhisa Fukuda

Kazunori Kamiya

Yusuke Kobayashi

Masamichi Kanakubo

Kazuki Shimizu

Shin Yamamoto

Yuichiro Kohata

Shiori Megumi

Kai Murakami

Shogo Michihata

Yuji Yoshida

Akihiro Nakano

Kasumi Shimamoto

Daikichi Sasamori

Yuusuke Hasegawa

Jumpei Ikegami

Manabu Yazawa

Yusuke Yajima

Kippei Wada

Ikumi Watanabe

Jumpei Koshio

<p>こんにちは、Customer Engineerのkazです！最近、『チ。-地球の運動について-』に夢中になっています。学生時代に感じた物理への憧れを思い出させてくれる作品で、ぜひ皆さんにもおすすめしたいです。私はピャスト伯が好きです。</p>
<p>さて、近年企業が顧客理解を深めるためにアンケートやレビューなどの1st Partyデータを活用することが一般的になっています。しかし、膨大な量のフリーテキスト回答データを人手で分析するのは大変な作業です。</p>
<p>KARTE Craft AI Modules では、アンケートなどで収集された自由記述データに対して、文意の成分ごとの大きさをベクトルサイズで表現する機能を提供します。これにより、肯定的な感情を含む回答を効率的に抽出したり、回答の傾向を数値化することができます。</p>
<p>具体的な活用事例としては、大規模アンケートの感情分析や、商品・サービスに対するユーザーの評価把握などが考えられます。KARTE Craftのこの機能を使えば、膨大なテキストデータの中から重要なインサイトを見出すことができるでしょう。</p>
<p>ぜひ、KARTE Craft AIモジュールを活用して、テキストデータの高度な分析に挑戦してみてください。</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。<br>
今回は、一例として食品についてのレビューに「商品に満足している」「商品に不満がある」という文意が、それぞれどの程度含まれているかを分析しました。</p>
<p>分析を実行すると、スプレッドシーに入力されているテキストごとに、Craft Functions変数で指定したキーワードの文意の含有量が計算され、 Google スプレッドシートに出力されます。</p>
<p><img src="https://ik.imagekit.io/plaid/4ee22366-446e-452e-8653-dbfaa0fdf048/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0514-40-59.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0514-40-59.png"></p>
<p>文意の大きさは 0~1 の数値で 1 に近いほど文意が強いことを表しています。<br>
一例として2行目の商品レビューを例にデータを読み解いてみると、文意の大きさは</p>
<ul>
<li>「商品に満足している」: 0.392</li>
<li>「商品に不満がある」：0.301</li>
</ul>
<p>となっています。そのため、このレビューは「商品に満足している」という意味合いの強いレビューだと解釈することができます。このように、この分析によるアウトプットは膨大な量のフリーテキストから定量的に文意を抽出することで、回答の傾向を数値化するのに役立つでしょう。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>KARTE Craft Functions, KARTE Craft AI Modules を利用していることを前提としています。</li>
<li>Google SpreadSheet API を使用することを推奨しています。</li>
<li>本ソリューションは Google Spread Sheet API を通わずに使用することも可能ですが、配布しているテンプレートは SpreadSheet を使ってデータの入出力を行うように作られているため、Spread Sheet APIを使用しない場合は Functions を適宜カスタマイズしてご利用ください。</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Googleサービスアカウントを作成する</li>
<li>GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</li>
<li>Googleサービスアカウントに対象スプレッドシートへの権限を付与する</li>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>Craft</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.craft.aimodules.openai.embeddings</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>3. Googleサービスアカウントを作成する</h3>
<p>GoogleのサービスでAPIを利用するために、Googleサービスアカウントを作成します。</p>
<ul>
<li>Google Cloudのコンソール画面を開く
<ul>
<li>アカウントやプロジェクトが無い場合は作成してください</li>
</ul>
</li>
<li>[IAMと管理 &gt; サービスアカウント &gt; サービスアカウントを作成] から適当な名称のサービスアカウントを作成</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/227adf6a-c6bc-42ea-8235-8f3c762422eb/%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-08-1413.15.34.png" alt="スクリーンショット2023-08-1413.15.34.png"></p>
<ul>
<li>作成したサービスアカウントを選択し、[キー &gt; 鍵を追加 &gt; 新しい鍵を作成] からJSON形式のキーファイルをダウンロード</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/faefbf7a-98af-4a2f-a672-e436f2e8cf0c/%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-08-1413.16.12.png" alt="スクリーンショット2023-08-1413.16.12.png"></p>
<p>ダウンロードしたキーファイルは、後の手順で利用します。</p>
<h3>4. GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</h3>
<p>Googleサービスアカウントの認証情報をCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1cb0539c-a074-47aa-b2f4-569647617236/create_service_account_secret.png" alt="create_service_account_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Googleサービスアカウントに対象スプレッドシートへの権限を付与する</h3>
<p>Google Sheets APIを有効化したとしても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシート毎に、対象のGoogleサービスアカウントに対して権限を付与する必要があります。</p>
<ul>
<li>対象スプレッドシートを開き、右上の [共有]ボタンをクリック</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/1d490492-2ff5-409a-97e2-8f256b0eee49/%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-08-1514.20.04.png" alt="スクリーンショット2023-08-1514.20.04.png"></p>
<ul>
<li>ダウンロードしたキーファイルに含まれるclient_emailの値を入力し、権限には [編集者] を選択して [送信]</li>
</ul>
<h3>6. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>自由回答テキストに含まれる文意を Text Embedding で成分ごとにスコア化する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベル</li>
</ul>
</li>
<li><code>CRAFT_APP_TOKEN_SECRET_NAME</code>
<ul>
<li>API v2 アプリのアクセストークンを登録したシークレットの名前です。</li>
</ul>
</li>
<li><code>EMBEDDING_KEYWORDS</code>
<ul>
<li>に用いるキーワード</li>
<li>複数指定する場合はカンマ区切りで指定します。
<ul>
<li>例：<code>商品に満足している,商品に不満がある</code></li>
</ul>
</li>
</ul>
</li>
<li><code>SERVICE_ACCOUNT_KEY_SECRET</code>
<ul>
<li>Googleサービスアカウントを登録したシークレットの名前</li>
</ul>
</li>
<li><code>SPREADSHEET_ID</code>
<ul>
<li>GoogleスプレッドシートID</li>
<li>スプレッドシートのURLの <code>https://docs.google.com/spreadsheets/d/#{SPREADSHEET_ID}/</code> より取得できる英数字です。</li>
</ul>
</li>
<li><code>SHEET_NAME</code>
<ul>
<li>連携対象のGoogleスプレッドシートのシート名</li>
<li>例：<code>Sheet1</code></li>
</ul>
</li>
<li><code>TEXT_EMBEDDING_MODEL</code>
<ul>
<li>Text Embedding に使用するモデル名</li>
<li>現在使用できるモデルは <a href="https://developers.karte.io/reference/post_v2beta-craft-aimodules-openai-embeddings">Developer Portal - Enterprise grade embeddings</a> の <code>BODY PARAMS</code> より確認できます。</li>
</ul>
</li>
</ul>
</li>
<li>[保存] する</li>
<li>デプロイ完了後、[設定 &gt; ファンクションの有効化] にチェックを付ける</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/survey-text-embedding-scoring">craft-codes/craft-functions/survey-text-embedding-scoring at main · plaidev/craft-codes</a></p>
<h2>7. Craft Functionsのエンドポイントを作成する</h2>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。まずスプレッドシートのA1に <code>input</code> というヘッダを作成し、続くA列のセルに分析したいテキストデータを入力します。</p>
<p><img src="https://ik.imagekit.io/plaid/443c9b62-01f7-4b3b-b660-143bbc5e0d6e/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0516-19-46.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0516-19-46.png"></p>
<p>つづいて、[変数] タブの <code>EMBEDDING_KEYWORDS</code> に文意の大きさを測定したいキーワードを入力し、[保存]します。</p>
<p>最後に、ターミナルなどの適当な実行環境からエンドポイントへのリクエストを送信します。</p>
<pre><code class="language-bash">curl https://t.karte.io/hook/xxxxxxxx/craft/xxxxxxxx
</code></pre>
<p>問題なく設定できていれば、次のような表示が実現できるはずです。</p>
<p><img src="https://ik.imagekit.io/plaid/4ee22366-446e-452e-8653-dbfaa0fdf048/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0514-40-59.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0514-40-59.png"></p>
<p>なおKARTE Datahubの<a href="https://developers.karte.io/docs/datahub-federation-table">フェデレーションテーブル</a>機能を使うことで、スプレッドシート上のデータに対してDatahubからSQLクエリを発行し、スプレッドシート上のデータを直接抽出することができます。その結果をDatahubのダッシュボードで可視化したり、紐付けテーブルにエクスポートしてKARTE上のユーザーに紐付けてセグメント条件に利用したりといった活用もできます。</p>
<h2>補遺1：スコアの算出の仕方</h2>
<p>文意の大きさを算出する際、本ソリューションでは以下の流れで数値計算を行なっています。</p>
<ol>
<li>Craft Functions変数で指定したキーワードを Text Embeddings によりベクトル化</li>
<li>スプレッドシートから入力されたテキストを Text Embeddings によりベクトル化</li>
<li>2つのベクトルのコサイン類似度を計算したものを文意の大きさとして採用</li>
</ol>
<h2>補遺2：ユークリッド距離を使って文意の大きさを算出する</h2>
<p>ユークリッド距離を使って文意の大きさを算出することもできます。ユークリッド距離を用いた文意の大きさの算出を有効化するには Craft Functions の[コード]の中から以下の行を検索し、該当行のコメントアウト、及びコメントインを行った上で[保存]してください。</p>
<pre><code class="language-javascript">async function outputData(sheets, scores) {
  const scoresFlatten = scores.slice(1).map(score =&gt; {
    const wk = [
      score.input,
      // コサイン類似度によりスコアリング
      ...score.scores.map(_score =&gt; _score.scoreDotProduct),
      // ユークリッド距離によりスコアリング
      // （使用するには、コサイン類似度によるスコアリングをコメントアウトし、以下の行をコメントインする）
      // ...score.scores.map(_score =&gt; _score.scoreEuclideanDistance),
    ];
    return wk;
  });
  const header = ['input', ...EMBEDDING_KEYWORDS.split(',')];

  // A1行にデータを出力
  updateSsValues(sheets, `${SHEET_NAME}!A1:Z`, [header, ...scoresFlatten]);
}
</code></pre>
<p>ユークリッド距離を使った算出では、埋め込みベクトル同士の幾何学的な距離（L2ノルム）を文書同士の類似度とみなします。ユークリッド距離を尺度とする場合、数値が0に近いほど元の文書の文意に近いと解釈します。コサイン類似度とは類似度の大小関係が逆になる点に注意してください。また、算出される数値の値域は 0~2 の間となります。</p>
<h2>おわりに</h2>
<p>今回は、KARTE Craft AIモジュールを使ったアンケートデータの高度な分析について紹介しました。大量のテキストデータの中から、感情情報や傾向を効率的に抽出できる強力な機能だと言えるでしょう。</p>
<p>アンケートを活用して顧客理解を深めることは、企業にとって重要な取り組みです。KARTE Craft AIモジュールを活用すれば、そのプロセスを大幅に効率化できます。ぜひ、この機能を活用して、アンケートデータの高度な分析に挑戦してみてください。</p>
<p>より深い顧客洞察が得られることで、製品・サービスの改善にもつながるはずです。KARTE Craft AIモジュールを最大限活用し、顧客理解を深めていきましょう！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


自由記述のテキストに含まれる感情の強さを、ベクトル埋め込みにより肯定的/否定的などの感情ごとにスコア化します。

AIがテキストの意味的要素を数値化！KARTE Craft AI Modulesを使ったテキスト分析

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法を紹介します。

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法

<p>こんにちは、Customer EngineerのUGです！最近、肩の筋トレの成果が出てきて喜んでいます！</p>
<p>みなさんはWebページに来訪してくれたユーザーが花粉がたくさん飛んでいるエリアからアクセスして来た時に花粉症対策用の製品のレコメンドしたりしたいと考えたことは有りませんか？そこまでピンポイントなことは考えていなくても、ユーザーアクセスしているエリアの花粉情報を使ってなんか施策が考えられるかもなぁくらいは思ったことがあるのではないでしょうか？今回はGoogle Maps Platformの新機能である<a href="https://developers.google.com/maps/documentation/pollen/overview?hl=ja">Pollen API</a>を使って、Webブラウザ側から取得したユーザーの緯度経度のエリアの花粉情報をKARTEにイベントとして連携してみたいと思います！</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。下記の画像のようにユーザーのアクセスしてきたエリアの花粉情報がイベントとしてKARTE側に発生している状態になります。<br>
<img src="https://ik.imagekit.io/plaid/a29eaf2f-7eb2-4862-93b3-97bd3261faf7/%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-03-1617.21.24.png" alt="スクリーンショット2024-03-1617.21.24.png"></p>
<p>位置情報を利用する前に下記のようなダイアログでエンドユーザーに許諾を取ります。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/c673bc32-7b0c-4787-a57c-f61be62c3f7d/%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-03-1618.09.55.png" alt="スクリーンショット2024-03-1618.09.55.png"></p>
<p>Webブラウザから緯度経度情報を取得してCraft Functionsに連携します。その情報を下にGoogle Maps PlatformのPollen APIを利用して、花粉情報を取得してKARTEイベントを発生させます。今回のブログでは緯度経度をWebブラウザ側から連携するためにKARTE Actionのスクリプト配信を利用します。スクリプト配信でなくとも今回のCraft Functionsは利用可能です。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>CraftのGrowthプラン以上を利用していることを前提としています</li>
<li>KARTE Webのスクリプト配信を利用していることを前提としています
<ul>
<li>スクリプト配信を利用しなくても今回のCraft Functionsは利用可能ですが今回のブログではスクリプト配信を利用することを前提に話していきます</li>
</ul>
</li>
<li>Google Maps Platformの利用を前提としています
<ul>
<li>リクエスト数に応じて<a href="https://developers.google.com/maps/billing/gmp-billing?hl=ja#geocoding">課金が発生する可能性</a>があります</li>
</ul>
</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Google Cloud PlatformでAPIキーを発行する</li>
<li>KARTE Actionからスクリプト接客を配信する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>ブラウザ側から緯度経度の情報を取得して、Craft functionsからGoogle Maps PlatformのPollen APIを利用して花粉情報を取得してKARTEイベントを発生させる</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定してください</li>
</ul>
</li>
<li><code>KARTE_APP_TOKEN_SECRET</code>
<ul>
<li>KARTE API v2アプリのtokenを登録したシークレット名を指定してください</li>
</ul>
</li>
<li><code>GOOGLE_MAPS_APIKEY</code>
<ul>
<li>Google Cloud Platformで発行したAPI Keyを指定してください</li>
</ul>
</li>
<li><code>EVENT_NAME</code>
<ul>
<li>KARTEで発生させるイベント名を指定してください</li>
</ul>
</li>
<li><code>FIELD</code>
<ul>
<li>イベント内で花粉情報を連携する際のフィールド名を指定してください</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/pollen-api">craft-codes/craft-functions/pollen-api at main · plaidev/craft-codes</a></p>
<h3>2. Craft Functionsのエンドポイントを作成する</h3>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h3>3. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>track.event.write</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>4. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Google Cloud PlatformでAPIキーを発行する</h3>
<p>Google Maps APIを利用するために、GCPにてAPIキーを発行します。<br>
GCPを利用したことがない方に関してはプロジェクトの作成から始めてください。参考までに<a href="https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja">GCPの公式ドキュメントはこちら</a>になります。</p>
<ul>
<li>[APIとサービス &gt; 認証情報 &gt; 認証情報を作成] からAPIキーを作成する</li>
<li>作成したAPIキーが以下のAPIを利用できるか確認してください
<ul>
<li>Pollen API</li>
</ul>
</li>
</ul>
<p>参考までに私が作成した際のコンソールの画面は下記になります。<br>
<img src="https://ik.imagekit.io/plaid/56a350ca-1bcf-477d-b5b0-c455bec7446d/%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-03-1618.19.29.png" alt="スクリーンショット2024-03-1618.19.29.png"></p>
<h3>6. KARTE Actionからスクリプト接客を配信する</h3>
<p>Webブラウザから緯度経度情報をCraft Functionsに連携するために、KARTE Actionの接客サービスからスクリプト配信します。</p>
<ul>
<li>[KARTE Action &gt; 接客サービス] からスクリプト配信の接客を作成する</li>
<li>緯度経度を取得したいページとタイミングで配信する</li>
</ul>
<p>スクリプトの例として今回のブログの検証では下記のスクリプトを配信しています。参考スクリプトと接客アクションの編集画面は以下になります。<br>
<img src="https://ik.imagekit.io/plaid/935bb34f-1d7a-4e3c-8541-63cfe829619d/%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-02-2813.59.08.png" alt="スクリーンショット2024-02-2813.59.08.png"></p>
<pre><code>if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(sendPositionToServer, handleError);
} else {
    alert(&quot;Geolocation is not supported by this browser.&quot;);
}

function sendPositionToServer(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var endpoint = &quot;xxx&quot;;  // 送信先のCraft Functionsのエンドポイントを指定

    // HTTP POSTリクエストの設定
    fetch(endpoint, {
        method: &quot;POST&quot;,
        headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
        body: JSON.stringify({
            latitude: latitude,
            longitude: longitude,
            visitor_id: &quot;#{visitor_id}&quot;,
        }),
    })
    .then(function(response) {
        if (!response.ok) {
            throw new Error(&quot;Network response was not ok&quot;);
        }
        return response.json();
    })
    .then(function(data) {
        console.log(&quot;Server response:&quot;, data);
    })
    .catch(function(error) {
        console.error(&quot;Error during fetch operation:&quot;, error);
    });
}

function handleError(error) {
    console.error(&quot;Error getting geolocation:&quot;, error.message);
}

</code></pre>
<p>問題なければ以下のように緯度経度取得のためのダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。<br>
まずはスクリプト配信をしているページでユーザーが訪問したら以下のようなダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>Craft Functions側でエラーが発生しなければ下記のようなイベントが発生するはずです。<br>
<img src="https://ik.imagekit.io/plaid/a29eaf2f-7eb2-4862-93b3-97bd3261faf7/%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-03-1617.21.24.png" alt="スクリーンショット2024-03-1617.21.24.png"></p>
<h2>おわりに</h2>
<p>今回はWebブラウザ側から取得したユーザーの緯度経度のエリアの花粉情報をCraft Functions × Google Maps PlatformのPollen APIで取得してKARTEのに連携してみました。</p>
<p>これによりユーザーが花粉の多い地域からアクセスしてきた場合に花粉対策商品をレコメンドするといったような事が可能になります！これからのシーズン花粉症で苦しむ方も多いと思いますので是非活用してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Webのスクリプト配信機能を利用してブラウザ側から緯度経度の情報をCraft functionsに連携して、その情報を元にGoogle Maps PlatformのPollen APIを利用して花粉情報を取得してKARTEイベントを発生させるSolution

「緯度経度」からCraft Functions × Google Maps PlatformのPollen APIで「花粉情報」を取得してKARTEに連携する

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のユーザーセグメント分析レポートを作成する方法の紹介です。Google Analytics Data APIを使うと、GA4のデータ分析を簡単に行うことができ、今回はユーザーセグメント分析の方法をご紹介します。

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のユーザーセグメント分析レポートを作成する方法

<p>こんにちは、Customer Engineerの島本です！</p>
<p>先日友達と築地にあるトーセイホテル ココネ築地銀座プレミアに行ってきました！サウナよりも湯船に浸かっている時にどこからか吹いてくる冷風が気持ちよかったです。<br>
<img src="https://ik.imagekit.io/plaid/9cdd01c2-38c0-4f90-ba2a-ae3fadb22528/IMG_1719.jpg" alt="IMG_1719.jpg"></p>
<p>さて、Craft Functionsを使用すると、社内外のさまざまなシステムから情報を取得し、KARTEとの連携をスムーズに行うことができます。ただし、1 実行あたりの起動時間の上限が 10 秒という制約や、KARTE のサーバーサイドAPIのリクエスト制限があるため、複数件レコードを一括で連携するには設計上で工夫が必要でした。</p>
<p>しかし、Craft Functionsを使用してGoogle Cloud Storage にファイル保存することで、複数件レコードを一括で連携することができます！</p>
<h2>構成図</h2>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/14fa7717-737d-4ff0-b5ab-ad5dcb5b35aa/blog%E7%94%A8.png" alt="blog用.png"></p>
<p>また、そもそも保存先のGCS の用意ができないという方もいると思いますが、<a href="https://developers.karte.io/docs/about-datahub">KARTE Datahub</a> をご利用頂いている場合は、KARTE からGCS バケットを払い出すことができます！<br>
今回はKARTE が払い出したGCS バケットを利用する方法で紹介します。</p>
<h2>注意点</h2>
<p>取得するデータサイズが大きくなると、APIからデータを取得する時間およびGCS への書き込み時間が伸びて、Craft Functions の実行時間制限を超過する可能性があります。</p>
<p>また、取得したデータがメモリサイズを超過することにより、Craft Functions が異常終了する可能性もあります。実際に処理できるデータ量を検証の上で本ソリューションの利用を検討してください。</p>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>KARTE が払い出したGCS バケットへの権限付与を有効化する</li>
<li>Googleサービスアカウントを払い出す</li>
<li>サービスアカウントに対象バケットへの権限を付与する</li>
<li>サービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</li>
<li>Craft Functions でそのサービスアカウントを使ってファイルを保存する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. KARTE が払い出したGCS バケットへの権限付与を有効化する</h3>
<p>まず、KARTE Datahub の管理画面からGCS バケットへの権限付与を有効化します。</p>
<ul>
<li>グローバルナビゲーションの[データハブ設定]を開く</li>
<li>[サービスアカウント管理]のタブを開く</li>
<li>[GCSバケットへの権限付与済みGoogleサービスアカウント]の部分で、[権限付与]ボタンが表示されているか確認</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/895df45f-3a23-4868-a17c-4f42a9813625/%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-04-0123.19.18.png" alt="スクリーンショット2024-04-0123.19.18.png"></p>
<p>有効化されていない場合は、営業担当にお問い合わせください。</p>
<h3>2. Googleサービスアカウントを作成する</h3>
<p>払い出しGCS バケットへの権限付与をするGoogleサービスアカウントを払い出します。</p>
<ul>
<li>[Datahub設定] &gt; [サービスアカウント管理]タブを開く</li>
<li>[払い出しGoogleサービスアカウント]の[Googleサービスアカウント作成]ボタンを押す</li>
<li>ダウンロードするkeyFileのキータイプを次の選択肢から選ぶ
<ul>
<li>JSON(推奨)</li>
<li>P12</li>
</ul>
</li>
<li>認証用のkeyFileが自動でダウンロードされる
<ul>
<li><strong>一度しかダウンロードできないため、大切に保管してください</strong></li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/836ee1fa-2e98-4aa6-ad9e-6fdc698db791/%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-04-0123.23.35.png" alt="スクリーンショット2024-04-0123.23.35.png"></p>
<p>ダウンロードしたkeyFileは、後の手順で利用します。</p>
<h3>3. サービスアカウントに対象バケットへの権限を付与する</h3>
<p>払い出したサービスアカウントに対して権限を付与します。</p>
<ul>
<li>[GCSバケットへの権限付与済みGoogleサービスアカウント]の領域で、[権限付与]ボタンを押す</li>
<li>プルダウンから、先ほど払い出したサービスアカウントを選択する</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/fe23e8b4-3690-474d-8689-59656e6a2343/%E3%83%86%E3%82%99%E3%83%BC%E3%82%BF%E3%83%8F%E3%83%95%E3%82%99%E8%A8%AD%E5%AE%9A_-_%E7%A4%BE%E5%86%85%E6%A4%9C%E8%A8%BC%E7%94%A8_kasumi_shimamoto_-_KARTE.png" alt="データハブ設定_-社内検証用_kasumi_shimamoto-_KARTE.png"></p>
<h3>4. サービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</h3>
<p>Googleサービスアカウントの認証情報をCraft Functions から安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1cb0539c-a074-47aa-b2f4-569647617236/create_service_account_secret.png" alt="create_service_account_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Craft Functions でそのサービスアカウントを使ってファイルを保存する</h3>
<p>最後に、実際にCraft Functionsから外部APIを叩いて、GCS バケットに保存してみます。<br>
今回は情報を取得するAPIとして、<a href="https://jsonplaceholder.typicode.com/">JSONPlaceholder</a> を利用します。</p>
<p>作成手順は次の通りです。<br>
<img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>外部APIから取得したデータをGoogle Cloud Storageにファイル保存する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです</li>
</ul>
</li>
<li><code>SERVICE_ACCOUNT_KEY_SECRET</code>
<ul>
<li>先ほど作成したシークレットの名前を指定します</li>
</ul>
</li>
<li><code>API_ENDPOINT</code>
<ul>
<li>データ取得元である外部サービスのAPIエンドポイントです</li>
<li>例：https://jsonplaceholder.typicode.com/posts</li>
</ul>
</li>
<li><code>BUCKET_NAME</code>
<ul>
<li>保存する先のGCS のバケット名です</li>
<li>例：karte-data-{{api_key}}
<ul>
<li>{{api_key}}の部分は、実際のapi_keyに置き換えてください</li>
</ul>
</li>
</ul>
</li>
<li><code>FILE_PATH</code>
<ul>
<li>保存するファイルのパスです</li>
<li>例：test/demo_data.json</li>
</ul>
</li>
</ul>
</li>
<li>[保存] する</li>
<li>デプロイ完了後、[設定 &gt; ファンクションの有効化] にチェックを付ける</li>
</ul>
<p>なお、サンプルコードは、下記URLで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/fetch-external-api-and-save-file-to-gcs">craft-codes/craft-functions/fetch-external-api-and-save-file-to-gcs at main · plaidev/craft-codes</a></p>
<p>以下、重要な点をかいつまんで説明します。</p>
<p>サンプルコードでは、GCS バケット上のファイルをKARTE Datahub に連携したいケースを想定して、Datahub で取り込み可能な改行区切りのJSON データに加工しています。</p>
<p>実際に利用する際には、APIのレスポンスデータ形式に合わせて変更してください。</p>
<pre><code>function formatDataToJSONLines(responseData) {
  return responseData.map(obj =&gt; JSON.stringify(obj)).join('\n');
}
</code></pre>
<p>下記関数でバケット名、ファイルのパスを指定してGCS バケットにファイルをアップロードしています。</p>
<pre><code>async function uploadDataToStorage(bucketName, filePath, jsonLinesData, jsonKey, logger) {
  const storage = new Storage({ credentials: jsonKey });
  const bucket = storage.bucket(bucketName);

  const blob = bucket.file(filePath);
  const stream = blob.createWriteStream({
    metadata: {
      contentType: 'application/json',
    },
  });

  return new Promise((resolve, reject) =&gt; {
    stream.on('error', err =&gt; {
      logger.error('Upload Error:', err);
      reject(err);
    });

    stream.on('finish', () =&gt; {
      logger.log(`Uploaded: ${filePath}`);
      resolve();
    });

    stream.end(jsonLinesData);
  });
}
</code></pre>
<p>とても簡単ですね！</p>
<p>最後に定期的にAPI からデータを取得するために、Craft Scheduler の設定をします。</p>
<p><img src="https://ik.imagekit.io/plaid/1a603aa3-3952-4232-ba1a-b4575047dedd/%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-02-1318.25.41.png" alt="スクリーンショット2024-02-1318.25.41.png"></p>
<ul>
<li>Craft Functionsの<code>設定タブ</code>を開きます</li>
<li>スケジュールを有効化し、cron形式（JST）で実行時間を指定します</li>
</ul>
<p>設定は以上になります。</p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう！</p>
<p>前述のサンプルコードに必要な定数を入力した内容でCraft Functionsを作成し、実際に実行してみます。</p>
<p><img src="https://ik.imagekit.io/plaid/3fabf6ee-50c0-4ab5-a195-5ad77a389c16/%E3%83%86%E3%82%99%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%95%E3%82%9A_%E2%80%94_-zsh_%E2%80%94_173%C3%9746.png" alt="デスクトップ_—-zsh—_173×46.png"></p>
<p>gsutilを使ってGCS バケット上に保存されていることを確認できました！</p>
<p><img src="https://ik.imagekit.io/plaid/b19f0ee2-7122-409a-aa43-ef9e617ca054/%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-03-2610.03.39.png" alt="スクリーンショット2024-03-2610.03.39.png"><br>
また、ファイルの中身も改行区切りのJSON データで保存されていることが確認できます。<br>
これで問題なくKARTE Datahub に連携できますね！</p>
<h2>おわりに</h2>
<p>今回は外部APIから取得したデータをGoogle Cloud Storageにファイル保存する方法について紹介しました。</p>
<p>このソリューションを活用すれば、社内外のさまざまなシステムから情報を取得してKARTE Datahub に連携することができるため、できることの幅が広がりますね！ぜひ皆さんも試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


外部APIから取得したデータを改行区切りのJSON形式に整形し、Google Cloud Storageにファイル保存します。

外部APIから取得したデータをGoogle Cloud Storageにファイル保存する

Craft FunctionsからSearch Console APIとPageSpeed Insights APIを利用して、SEO相関分析レポートを作る方法です。Search Console APIとPageSpeed Insights APIを使えば、コンテンツをより多角的に見るSEO相関分析レポートが作れます。

Craft FunctionsからSearch Console APIとPageSpeed Insights APIを利用して、SEO相関分析レポートを作る方法

Craft FunctionsからSearch Console APIとPageSpeed Insights APIを利用して、SEO相関分析レポートを作成する方法

Craft FunctionsからCustom Search APIを使って、複数のサイトのコンテンツギャップ解析を行う方法です。Custom Search APIを使って同一キーワードやトピックにおける複数のサイトの分析を行なって、より効率的なSEOやコンテンツマーケティング戦略立案に役立てます。

Craft FunctionsからCustom Search APIを使って、複数のサイトのコンテンツギャップ解析を行う方法

Craft FunctionsからCustom Search APIを使って、特定のキーワードでの検索結果をGoogleスプレッドシートに出力する方法です。Google Custom Search APIを使えば検索エンジンでの検索結果を自由に取得でき、自社のマーケティング活動にも役立ちます。

Craft FunctionsからCustom Search APIを使って、特定のキーワードでの検索結果をGoogleスプレッドシートに出力する方法

<p>こんにちは、Customer Engineerの島本です！<br>
先月同僚と吉祥寺にできたMONSTER SAUNAに行ってきました！最上段に座ることができないくらいアツアツで水風呂はプール並みに広かったです。<br>
<img src="https://ik.imagekit.io/plaid/592f8a8e-83e1-46e6-86ef-fa1a5bf43520/IMG_1764(1).jpg" alt="IMG_1764(1).jpg"></p>
<p>さて、KARTEではあらゆるデータを顧客軸でリアルタイムに解析・可視化し、一人ひとりに合わせた体験の提供をすることができますが、通常機能ではKARTE のプロジェクトを横断してリアルタイムに解析することはできません。しかし、「<strong>管理上プロジェクトが分けているが、一方のプロジェクトで発生したイベントを別のプロジェクトに転送したい</strong>」と思ったことはありませんか？</p>
<p>例えば次のようなケースです。</p>
<ul>
<li>ECサイトのプロジェクトで発生した購入イベントをブランドサイトのプロジェクトに転送して接客の出し分けに活用したい</li>
<li>特定サービスのプロジェクトで発生したCV イベントを別サービスのプロジェクトに転送して接客の出し分けに活用したい</li>
</ul>
<p>そこで今回は、KARTE Craft を使って「プロジェクトB で発生したイベントデータをAPI経由で取得してプロジェクトA にイベントを転送する方法」について紹介します。</p>
<h1>アウトプットイメージ</h1>
<p>最終的なアウトプットイメージは次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/784b32ce-4d62-4357-8216-95e967be6758/%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%88_2024-02-27_12_44_36.png" alt="スクリーンショット_2024-02-27_12_44_36.png"></p>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/d6246ec5-a96d-4ce3-9d06-63312ba6ec22/0226_3.png" alt="0226_3.png"></p>
<p>今回はサイトA からサイトB へのリンクをクリックしたユーザーを対象にします。KARTE のスクリプト接客を使ってリンクURL のクエリパラメータにサイトA 側のvisitor_id を付与することで、サイトA のvisitor_id をサイトB に紐付くKARTE プロジェクトに引き継げるようにしています。</p>
<p>接客サービス機能とCraft Functionsの連携では、次の3つの機能を利用します。</p>
<ul>
<li><a href="https://craft.developers.karte.io/craft-functions/triggers/server-side-action/index.html">サーバーサイドアクショントリガー</a><br>
　* Craft 用接客アクションの実行をきっかけにFunctionを実行する</li>
<li><a href="https://developers.karte.io/reference/post_v2beta-track-event-get">API v2 の Get events by user_id API</a><br>
　* ユーザーごとに記録されたイベントを取得する</li>
<li><a href="https://developers.karte.io/reference/post_v2-track-event-write">API v2 の Send event to KARTE API</a><br>
　* イベントを API 経由で KARTE に送信し、ユーザーの解析に利用する</li>
</ul>
<h1>設定手順</h1>
<p>設定の手順は次の通りです。<br>
大きく分けてプロジェクトA（転送先）  側と プロジェクトB（転送元）  側のそれぞれの設定があります。</p>
<ol>
<li>[A] URL にプロジェクトA のvisitor_id を付与する接客を作成する</li>
<li>[B] クエリキーの設定をする</li>
<li>[A] API v2 アプリを作成する</li>
<li>[B] API v2 アプリを作成する</li>
<li>[B] API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>[B] Craft Functions を作成する</li>
<li>[B] Craft 用接客を作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h2>1. [A] URL にプロジェクトA のvisitor_id を付与する接客を作成する</h2>
<p>まず、今回はプロジェクトA のvisitor_id がプロジェクトB で計測ができていることが前提条件になるため、KARTE でプロジェクトA のvisitor_is をプロジェクトB で計測しているサイトに遷移するURL に付与する接客を作成します。</p>
<p>細かいKARTE の設定方法は割愛して、接客を実装する上でサンプルコードを掲載します。<br>
<strong>サンプルコードなので、必ずサイトの仕様に合わせて書き換えてください。</strong></p>
<h3>KARTE のスクリプト接客で設定するJavaScript 例</h3>
<p>パラメーターはユーザーにも表示されるため、クエリキーはvisitor_id ではなくkrtid としています。</p>
<pre><code>var atag = document.querySelectorAll(&quot;a&quot;);

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(&quot;href&quot;);
    if (href &amp;&amp; href.indexOf(&quot;サイトBのドメイン&quot;) !== -1) {
        var originalHref = href;
        var modifiedLink = originalHref + '?krtid=' + visitorId;
        a.setAttribute(&quot;href&quot;, modifiedLink);
    }
}
</code></pre>
<h2>2. [B] クエリキーの設定をする</h2>
<p>クエリキーは通常「閲覧ページのクエリ文字列」としてクエリ文字列全体で保存されるため、特定のパラメータを独立した項目として識別するためにクエリキーの設定を行います。</p>
<p><a href="https://support.karte.io/post/6Gj6KDxOKURPEnvtDqG8fs">クエリキー(query Key)の確認、登録方法</a></p>
<ul>
<li>[Insight &gt; サイト設定 &gt; 保存するクエリキー] から編集</li>
<li>[クエリキー] に <code>krtid</code> を設定</li>
<li>保存する<br>
<img src="https://ik.imagekit.io/plaid/6480e9b0-f93d-48e2-9c32-7b10b66abf2a/%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-02-2712.24.47.png" alt="スクリーンショット2024-02-2712.24.47.png"></li>
</ul>
<p>以上で、krtid を独立した項目として識別するための設定が完了しました。</p>
<h2>3. [A] API v2 アプリを作成する</h2>
<p>プロジェクトA でKARTEのAPIを利用するために、API v2アプリを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>track.event.write</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h2>4. [B] API v2 アプリを作成する</h2>
<p>プロジェクトB でKARTEのAPIを利用するために、API v2アプリを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.track.event.get</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h2>5. [B] API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h2>
<p>プロジェクトA とプロジェクトB で作成したAPI v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、それぞれCraft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいた各プロジェクトのAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h2>6. [B] Craft Functionsのファンクションを作成する</h2>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>KARTEのイベントデータをAPI経由で取得して別のプロジェクトにイベントを転送します</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベル</li>
</ul>
</li>
<li><code>KARTE_APP_TOKEN_SECRET </code>
<ul>
<li>API v2 アプリのアクセストークンを登録したシークレットの名前</li>
</ul>
</li>
<li><code>OTHER_PROJECT_KARTE_APP_TOKEN_SECRET </code>
<ul>
<li>プロジェクトA のAPI v2 アプリのアクセストークンを登録したシークレットの名前</li>
</ul>
</li>
<li><code>PER_DATA_TIMEOUT_SEC </code>
<ul>
<li>リトライのタイムアウト時間(秒)。イベント取得APIエラー時のリトライ処理の実行時間を指定</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/e21d2ff7d34ba09cf8fc1c62b22d780e8f1f3727/craft-functions/get-events-and-write-to-other-projects">craft-codes/craft-functions/get-events-and-write-to-other-projects at main · plaidev/craft-codes</a></p>
<h2>7. [B] Craft 用接客を作成する</h2>
<p>Functionをトリガーする条件を指定するための接客サービスを作成します。</p>
<ul>
<li>接客サービス画面を開く</li>
<li><code>Craft Functions連携</code> テンプレートを利用してアクションを追加
<ul>
<li>※ テンプレートが表示されない場合は、<a href="https://ecosystem.plaid.co.jp/product/karte-craft">Craftの利用申請</a>が必要です</li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/95ec6bf5-4ebe-4cff-ab35-c486c3cbb9a1/%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-07-2415.09.18.png" alt="スクリーンショット2023-07-2415.09.18.png"></p>
<p>今回は、転送したいイベントが発生したことをきっかけにFunction をトリガーするため、次のようにCraft  接客の配信設定を行います。</p>
<ul>
<li>「アクション」
<ul>
<li>配信率: 100%
<ul>
<li>※ アクションの中身の設定については後述</li>
</ul>
</li>
</ul>
</li>
<li>「対象ユーザー」
<ul>
<li>全員
<ul>
<li>※ 対象ユーザーを絞りたい場合は、条件を指定します</li>
<li>※ 検証中はテスト配信用のセグメントを設定してください</li>
</ul>
</li>
</ul>
</li>
<li>「対象イベント」
<ul>
<li>「転送したいイベントが発生した」という条件になるように配信トリガーを以下のとおりに設定</li>
<li><code>転送したいイベント</code> &gt; <code>date</code> &gt; 存在する</li>
<li>配信頻度: アクション毎</li>
</ul>
</li>
<li>「オプション」
<ul>
<li>同時配信: OK</li>
</ul>
</li>
<li>保存をする</li>
</ul>
<p>次に、接客サービスに登録したアクションの設定をしていきます。ここで設定した内容がCraft Functions 側に渡されます。</p>
<ul>
<li>「アクション設定」を埋めていく
<ul>
<li>「ファンクション名」
<ul>
<li>トリガーしたいFunctionの名称（今回の例では get-events-and-write-to-other-projects ）を設定</li>
</ul>
</li>
<li>「name」
<ul>
<li>今回は利用しないので「ファンクション名」と同じ値を設定</li>
</ul>
</li>
<li>「data」
<ul>
<li>JSONで<code>user_id</code> と転送したいイベント名と発生日時（<code>date</code>）と<code>krtid</code>を設定</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre><code>{
&quot;userId&quot;: &quot;#{ user_id }&quot;,
&quot;date&quot; : &quot;#{ date }&quot;,
&quot;otherProjectVisitorId&quot; : &quot;#{ krtid }&quot;
&quot;eventName&quot; : &quot;転送したいイベント名&quot;
}
</code></pre>
<ul>
<li>「データ管理」をクリック
<ul>
<li>ユーザー情報変数を次のとおりに設定
<ul>
<li>変数名：<code>date</code>
<ul>
<li>すべての期間 &gt; <code>転送したいイベント</code> &gt; <code>date</code> &gt; 最新の値</li>
</ul>
</li>
<li>変数名：<code>krtid</code>
<ul>
<li>すべての期間 &gt; <code>閲覧</code> &gt; <code>access.uri.queryKey.krtid</code> &gt; 最新の値<br>
<img src="https://ik.imagekit.io/plaid/9808aea6-f875-4ad8-aceb-dda8909bb2c9/%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-02-2712.33.08.png" alt="スクリーンショット2024-02-2712.33.08.png"></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>保存する</li>
</ul>
<p>以上で、転送したいイベントが発生したタイミングで、Craft Functions 側にuser_id と転送したいイベントの日時 とプロジェクトA のvisitor_id を渡す設定が完了しました。</p>
<h1>実際に動かしてみる</h1>
<p>では、実際に動かしてみましょう！！<br>
今回はbuy イベントを転送するように実装してみました。</p>
<p>まず、プロジェクトA で計測しているサイトから、プロジェクトBで計測しているサイトに遷移するリンクをクリックします。プロジェクトB でkrtid が計測されていることを確認できました。<br>
<img src="https://ik.imagekit.io/plaid/47bfc219-a1a3-448a-90f3-7cb0d0e0987c/%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%88_2024-02-27_13_15_42.png" alt="スクリーンショット_2024-02-27_13_15_42.png"></p>
<p>次に、商品を購入してbuy イベントを発生させます。buy イベントが発生したタイミングでCraft 用接客が配信されていますね。<br>
<img src="https://ik.imagekit.io/plaid/0d01cc88-94db-41f6-8452-ccbcb8611fed/%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%88_2024-02-27_13_19_39.png" alt="スクリーンショット_2024-02-27_13_19_39.png"></p>
<p>最後に、プロジェクトA にbuy イベントが転送されているか確認します。無事に転送されていることを確認できました！buy イベントが転送されたことにより、セグメントの更新がかかって「初回購入のお客様」セグメントに入っていることが分かりますね。<br>
<img src="https://ik.imagekit.io/plaid/20ddf2d6-1963-4cc6-bfbb-0e9029c01dc1/%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%88_2024-02-27_13_20_28.png" alt="スクリーンショット_2024-02-27_13_20_28.png"></p>
<h1>補足</h1>
<p>「ユーザー情報変数を利用すればわざわざAPI 経由でイベントデータを取得する必要はないのでは？」と思った方もいるかと思いますが、ユーザー情報変数の場合、オブジェクト配列を全部連携することが出来ない仕様のため、これまではイベントデータをまるっと連携することができなかったのです。</p>
<p>ただ、KARTE Craft を使ってAPI 経由でイベントデータを取得すれば、イベントデータをまるっと転送できるようになります！</p>
<h1>おわりに</h1>
<p>今回はKARTEのイベントデータをAPI経由で取得して別のプロジェクトにイベントを転送する方法について紹介しました。</p>
<p>これまではプロジェクトを分けることで歯抜けになってしまった顧客データも、API 経由でイベントを取得して転送することにより、今まで以上に一人ひとりに合わせた体験の提供をすることができるようになります。管理とやりたいことを両立できるためとても便利ですね！</p>
<p>ぜひ皆さんも試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


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

KARTEのイベントデータをAPI経由で取得して別のプロジェクトにイベントを転送する

<p>こんにちは、Customer Engineerのyazyです！最近グッピーに子供が生まれ、育休を取るかどうか悩んでいます！</p>
<p>さて、KARTEではジョブフローを使ってファイルを取り込むことはできますが、通常機能では取り込んだファイルを削除することはできません。しかし、Craft Functionsを使うことで取り込み後のファイルを削除することが可能になります。</p>
<p>そこで今回は、Craft Functionsを使ってジョブフローの実行後にS3上のファイルの削除を実現する方法について紹介します。</p>
<h1>アウトプットイメージ</h1>
<p>構成図は次の通り。</p>
<p><img src="https://ik.imagekit.io/plaid/a8f1cedb-057c-43c4-8744-d51db03e06de/%E5%85%A8%E4%BD%93%E6%A7%8B%E6%88%90%E5%9B%B33.png" alt="全体構成図3.png"></p>
<p>ジョブフローからSQLの情報を利用してS3上のファイルを削除します。</p>
<h1>注意点</h1>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>S3へのアクセスはアクセスキー/シークレットアクセスキーを利用していることを前提としています</li>
<li>作成されるIAMにファイルを削除するための権限が付与されている前提としています</li>
<li>CraftのDatahub Jobflow Connectorを利用しますので、Growthプラン以上で実現可能です</li>
</ul>
<h1>設定手順</h1>
<p>設定の手順は次の通りです。</p>
<ol>
<li>AWS IAM で取得した取得したIAMのアクセスキー/シークレットアクセスキーをCraft Secret Manager に登録する</li>
<li>Craft Functionsのファンクションを作成する</li>
<li>SQLクエリを作成する</li>
<li>ジョブフローを作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h2>1. AWS IAM で取得した取得したIAMのアクセスキー/シークレットアクセスキーをCraft Secret Manager に登録する</h2>
<p>作成したアクセスキー/シークレットアクセスキーをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/de246508-2c91-40ac-a04a-c214af6542c7/create_slack_token_secret.png" alt="create_slack_token_secret.png"></p>
<h3>下記の手順で、アクセスキーとシークレットアクセスキーをそれぞれ登録してください。</h3>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAWS IAMのアクセスキー/シークレットアクセスキーの値を [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h2>2. Craft Functionsのファンクションを作成する</h2>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>KARTE Datahubジョブフローの実行時に指定したS3バケット上のファイルを削除する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>ACCESS_KEY_SECRET</code>
<ul>
<li>アクセスキーのシークレット名を入力</li>
</ul>
</li>
<li><code>SECRET_ACCESS_KEY_SECRET</code>
<ul>
<li>シークレットアクセスキーのシークレット名を入力</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/s3-import-cleanup">craft-codes/craft-functions/s3-import-cleanup at main · plaidev/craft-codes</a></p>
<h2>3. SQLクエリを作成する</h2>
<p>SQLクエリを作成します。作成手順は次の通りです。ここでは削除対象のS3上のファイルを指定します。</p>
<p><img src="https://ik.imagekit.io/plaid/1ca11f93-3efb-4e47-9a43-18599356b230/SQL%E7%B5%90%E6%9E%9C%E7%94%BB%E5%83%8F.png" alt="SQL結果画像.png"></p>
<ul>
<li>[Datahub &gt; クエリ &gt; 作成 &gt; クエリを作成] を選択</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>カラム名は以下になるように作成します
<ul>
<li>region
<ul>
<li>該当のS3バケットが存在するリージョンを記述</li>
</ul>
</li>
<li>bucket_name
<ul>
<li>該当のS3バケット名を記述</li>
</ul>
</li>
<li>file_path
<ul>
<li>該当のS3バケットに存在するファイルのパスを記述</li>
<li>こちら削除対象ファイルとなります</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>2つのファイルを削除する場合は以下のように記述します。</p>
<pre><code>WITH target_file_info AS
(
SELECT 'ap-northeast-1' AS region, 'karte-data-bucket' AS  bucket_name, 'karte-065dae9b89d32a5b556cd3cd2b8df357/test.csv' AS  file_path
UNION ALL
SELECT 'ap-northeast-1' AS region, 'karte-data-bucket' AS  bucket_name, 'karte-065dae9b89d32a5b556cd3cd2b8df357/test2.csv' AS  file_path
)

SELECT * from target_file_info
</code></pre>
<p>次のようなクエリ結果になれば大丈夫です。</p>
<p><img src="https://ik.imagekit.io/plaid/c1b32667-2d84-42c7-be14-ff6b1f28b682/SQL%E7%B5%90%E6%9E%9C%E7%94%BB%E5%83%8F.png" alt="SQL結果画像.png"></p>
<h2>4. ジョブフローを作成する</h2>
<p>ジョブフローを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/c85edb9c-08bc-4cd0-9e5b-04b6013728fb/%E3%82%B7%E3%82%99%E3%83%A7%E3%83%95%E3%82%99%E3%83%95%E3%83%AD%E3%83%BC%E7%94%BB%E5%83%8F.png" alt="ジョブフロー画像.png"></p>
<ul>
<li>[Datahub &gt; ジョブフロー &gt; 作成] を選択</li>
<li>[ジョブの追加 &gt; クエリ実行結果のエクスポート &gt; 次へ] を選択</li>
<li>[クエリ選択] で、手順3で作成したSQLクエリ名を選択</li>
<li>[外部サービス &gt; 接続先] で、Craftを選択</li>
<li>[個別設定 &gt; function名]に、手順1で作成したFunction名を入力</li>
<li>[行ごとにqueueをpublishする]にチェックを入れる</li>
</ul>
<p>設定が終了したら、ジョブフローを実行してみましょう！SQL上で指定したファイルが削除されます。</p>
<p>実際には、S3バケットからデータをインポートするジョブフローの中で、インポート完了後にこのファイル削除ジョブが実行されるよう設定することを想定しています。</p>
<h1>おわりに</h1>
<p>今回はCraft FunctionsでS3上のファイルをDatahubの実行後に削除する方法について紹介しました。</p>
<p>S3バケット上のファイル容量を削減したい場合や、Datahubでのインポートジョブ実行後に対象ファイルを削除しなければいけないシステム要件がある場合にご活用いただけます。ぜひ皆さんも試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Datahubジョブフロー実行時に、指定したS3バケット上のファイルを削除します。削除対象のS3バケットのリージョン、バケット名、削除対象ファイルパスはDatahubクエリで指定します。

KARTE Datahubジョブフローの実行時に指定したS3バケット上のファイルを削除する

<p>こんにちは、Customer Engineerのkohaです！</p>
<p>今回はKARTEのLINE連携機能を導入する際に活用できるソリューションを紹介します。</p>
<p>KARTEではLINEログイン連携機能を使うことで、サイト来訪者を識別するためにKARTE内で持つWeb上のCookieに付与したvisitor_idや、サービス側から連携されたログインIDとLINE IDを紐付けることができます。</p>
<p>これにより、Web上の行動やサービス側で取得した属性情報を使ってLINEメッセージの出し分けるといったことが可能になります。</p>
<p>一方で、KARTEのLINE連携機能の導入前から独自にLINEログイン施策をしていた場合、すでにログインIDとLINE IDとの対応データを自社で蓄積している場合がございます。</p>
<p>これまでは、サイトやアプリのログインIDとLINE IDの対応データをKARTEにLINE連携用データとして直接連携することができず、エンドユーザーに再びKARTE経由でのLINEログインをしてもらわないといけないという制約があり、あまりユーザー体験が良くありませんでした。</p>
<p>そうした課題に対し、今回のソリューションを用いると<strong>エンドユーザーにKARTE経由でのLINEログインをしてもらわなくても、DatahubでインポートしたLINE IDリストを使ってKARTE側のユーザーとLINE IDとを一括で関連付ける</strong>ことができます！</p>
<h1>アウトプットイメージ</h1>
<p>イベントのフィールドにline_user_idが存在し、subscribeが「true」である「plugin_line_identify」というイベントが計測された状態を作る、というのが最終的なアウトプットとなります。これでKARTEが持つデータとLINEを活用し接客配信やメッセージの送信が可能になります。</p>
<p>より詳細については以下の記事をご覧ください。<br>
<a href="https://support.karte.io/post/73Ez6Xqqdx6taTwWXW9knL#3-0">LINEメッセージが送信可能なユーザーの定義</a></p>
<p>そして、上記の状態は「Personal Data (line identify)」というKARTEデフォルトの紐付けテーブルにIDを格納することで作ることができるので、以下の画像のようにデータが入っていたら成功です。</p>
<p><img src="https://ik.imagekit.io/plaid/7b08122a-e22e-4e68-902d-bbeec929d434/%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-02-2712.25.53.png" alt="スクリーンショット2024-02-2712.25.53.png"></p>
<p>構成図は次の通り。（小さくてごめんさい。ブラウザで拡大してご覧ください。）</p>
<p><img src="https://ik.imagekit.io/plaid/0c35e8db-29e6-4f21-b8c4-e3f72df52746/bulksendidentify.png" alt="bulksendidentify.png"></p>
<p>だいぶ複雑な構成に見えますが、端的に書くと<strong>API経由でKARTEにユーザーID（ログインID）等とLINE IDの対応データをイベントとして送信する</strong>というものです。<br>
しかし、APIには分間リクエスト上限がありちょっとずつAPIを叩く必要があります。そのために、Datahubを介して一度に送る件数を絞り込んで送れるようにするという構成をとっています。</p>
<h1>注意点</h1>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>LINE IDとログインIDの対応が間違った状態でイベント発生すると簡単には元に戻せなくなるので、十分に注意して実行してください</li>
<li>実際に行う場合は、少量データで十分に検証した上で、設定に問題がないことを確認してから実施してください</li>
<li>KARTE Datahub、KARTE Craft（Growthプラン以上）を利用している必要があります</li>
<li>「LINE ID」と「KARTEに連携しているuser_id」との対応リストを自社DB等に予め保持していて、CSVファイル等に出力できる必要があります。</li>
<li>API v2の分間リクエスト制限に引っかからないよう、後述のID読み込み行数はご契約のプランに合わせてクエリを作成する必要があります</li>
</ul>
<h1>設定手順</h1>
<p>設定の手順は次の通りです。</p>
<ol>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Datahubにテーブルを作成しLINE IDリストをアップロードする</li>
<li>Datahubに読み込み済の行番号を保持しておくテーブルを作成し初期データをアップロードする</li>
<li>Datahubのクエリを作成する</li>
<li>Craft Functionsのファンクションを作成する</li>
<li>Datahubのジョブフローを作成する</li>
<li>Craft Functionsの実行スケジュールを設定する</li>
</ol>
<p>順番に見てみましょう。</p>
<h2>1. API v2 アプリを作成する</h2>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>datahub.jobflow.get</code></li>
<li><code>datahub.jobflow.exec</code></li>
<li><code>track.event.write</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h2>2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h2>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h2>3. Datahubにテーブルを作成しLINE IDリストをアップロードする</h2>
<p>KARTEイベントに送る元のデータを用意するために、以下の手順でDatahubにテーブルを作成しをデータをアップロードします。</p>
<p>（1）Datahubのデータセット画面を開く<br>
（2）作成ボタン押して任意の名前を指定し以下のスキーマを指定する<br>
※ここでは例として「lineid_migration」というテーブル名を指定します。</p>
<table>
<thead>
<tr>
<th>スキーマ</th>
<th>型</th>
<th>NULL可否</th>
</tr>
</thead>
<tbody>
<tr>
<td>user_id</td>
<td>STRING</td>
<td>REQUIRED</td>
</tr>
<tr>
<td>line_user_id</td>
<td>STRING</td>
<td>REQUIRED</td>
</tr>
</tbody>
</table>
<p>※user_id → KARTEに認識させるuser_idを格納します<br>
※line_user_id → LINE IDを格納します</p>
<p>（3）事前に用意したcsvアップロードする<br>
　※いきなり本番データを使うのではなく初めは5行程度用意したテストIDをアップロードし、最後の手順完了後テストすることをお勧めします。<br>
<img src="https://ik.imagekit.io/plaid/5c2f72ae-6835-4175-b02b-9fa3ec97b641/%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-02-299.03.35.png" alt="スクリーンショット2024-02-299.03.35.png"></p>
<h2>4. Datahubに読み込み済の行番号を保持しておくテーブルを作成し初期データをアップロードする</h2>
<p>Craftを介して順次IDを送る形になるため、一回の送信処理でどの行まで送信した（読み込んだ）かを保持しておくためのテーブルを作り、一行挿入します。</p>
<p>（1）Datahubのデータセット画面を開く<br>
（2）作成ボタン押して任意の名前を指定し以下のスキーマを指定する<br>
※ここでは例として「line_id_migrate_current_row」というテーブル名を指定します。</p>
<table>
<thead>
<tr>
<th>スキーマ</th>
<th>型</th>
<th>NULL可否</th>
</tr>
</thead>
<tbody>
<tr>
<td>current_row</td>
<td>INTEGER</td>
<td>REQUIRED</td>
</tr>
</tbody>
</table>
<p>（3）以下のような1カラム1行のcsvファイルを作る</p>
<table>
<thead>
<tr>
<th>current_row</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
</tr>
</tbody>
</table>
<p>（4）csvアップロードする<br>
<img src="https://ik.imagekit.io/plaid/237caafa-41fb-4c02-acb7-25600686f72a/%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-02-299.04.04.png" alt="スクリーンショット2024-02-299.04.04.png"></p>
<h2>5. Datahubのクエリを作成する</h2>
<p>以下2つのクエリを作成します。<br>
（1）手順3で作成したテーブルから任意の行数を抽出するクエリ<br>
※クエリ例</p>
<pre><code>WITH current_row as (
SELECT
  current_row
FROM 
 --読み込み済み行を保持したテーブル
 `prd-karte-per-client.koha_test_{projectのidが入ります}.line_id_migrate_current_row`
),
sup as (SELECT
   ROW_NUMBER() OVER (ORDER BY id_index) AS row_num
  ,user_id
  ,line_user_id 
FROM 
 --IDリストを保持したテーブル
  `prd-karte-per-client.koha_test_{projectのidが入ります}.lineid_migration
ORDER BY id_index
)
SELECT
  sup.user_id
, sup.line_user_id
from 
  sup
, current_row
WHERE
 sup.row_num BETWEEN current_row.current_row AND current_row.current_row + 500 --1度に読み込む行数。何行指定すべきかは後述の手順7を確認してください。
order by sup.user_id
</code></pre>
<p>（2）上記クエリで抽出した行数を、手順4で作成したテーブルへ置き換えするクエリ</p>
<pre><code>SELECT
  --読み込み済行数 + 今回読み込んだ行数。何行指定すべきかは後述の手順7を確認してください。
　 current_row + 500 as current_row 
FROM
 --読み込み済み行を保持したテーブル
 `prd-karte-per-client.koha_test_{projectのidが入ります}.line_id_migrate_current_row`
</code></pre>
<h2>6. Craft Functionsのファンクションを作成する</h2>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>KARTE CraftとDatahubでLINE IDを一括でKARTEユーザーIDに関連付けする</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定します</li>
</ul>
</li>
<li><code>SECRET_KEY_API</code>
<ul>
<li>手順2で作成したシークレット名を指定します</li>
</ul>
</li>
<li><code>TARGET_JOBFLOW_ID</code>
<ul>
<li>手順4で作成したジョブフローのIDを指定します</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/bulk-send-karte-event">craft-codes/craft-functions/bulk-send-karte-event at main · plaidev/craft-codes</a></p>
<h2>7. Datahubのジョブフローを作成する</h2>
<p>作成したクエリを実行するためのジョブフローを作成します。</p>
<ul>
<li>ジョブフロー画面を開く</li>
<li>画面右上の「作成」ボタンをクリック</li>
<li>「ジョブを追加」ボタンをクリック<br>
ジョブは以下2つを作成してださい。</li>
</ul>
<p>・1つ目</p>
<table>
<thead>
<tr>
<th>設定項目</th>
<th>指定する内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>ジョブタイプ</td>
<td>クエリ実行結果のエクスポート</td>
</tr>
<tr>
<td>エクスポート元</td>
<td>クエリ手順5で作成した1つ目のクエリ</td>
</tr>
<tr>
<td>エクスポート先</td>
<td>外部サービス</td>
</tr>
<tr>
<td>接続先</td>
<td>Craft</td>
</tr>
<tr>
<td>function名</td>
<td>手順6で作成したファンクション</td>
</tr>
<tr>
<td>行ごとにqueueをpubliushする</td>
<td>チェックをつける</td>
</tr>
</tbody>
</table>
<p>・2つ目</p>
<table>
<thead>
<tr>
<th>設定項目</th>
<th>指定する内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>ジョブタイプ</td>
<td>データテーブルへインポート</td>
</tr>
<tr>
<td>インポート元</td>
<td>クエリ手順5で作成した2つ目のクエリ</td>
</tr>
<tr>
<td>インポート先</td>
<td>手順4で作成したテーブル</td>
</tr>
<tr>
<td>ルール</td>
<td>置き換え</td>
</tr>
</tbody>
</table>
<ul>
<li>任意のジョブ名とジョブフロー名を指定し保存<br>
<img src="https://ik.imagekit.io/plaid/30d6ea0c-387f-42be-888d-1aece43e0150/%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-02-299.11.39.png" alt="スクリーンショット2024-02-299.11.39.png"></li>
</ul>
<h2>8. Craft Functionsの実行スケジュールを設定する</h2>
<p>今回のCraft Functionsにはジョブフローの実行と、ジョブフロー実行結果を受け取りイベント送信を行うという二つの機能を持たせており、スケジュール実行するとジョブフローをキックするようになっています。（イベント送信する機能はジョブフローを実行すると再度Craft Functionsを実行しイベント送信機能が働きます。）</p>
<p>そのためにCraft Functionsの実行スケジュールを設定しましょう。</p>
<ul>
<li>今回作成したCraft Functionsを開く</li>
<li>設定タブを開く</li>
<li>スケジュール欄の「作成」ボタンをクリック</li>
<li>表示された説明に従いCron式でスケジュールを設定する</li>
</ul>
<p>この時、何分毎に実行するかは以下を参考に決定してください。<br>
<a href="https://developers.karte.io/reference/api-v2-limitation">APIのリクエスト分間制限</a></p>
<ul>
<li>今回実行しているAPIとStandardプランの場合の設定<br>
/v2/track/event/write：1000回/分（※1実行で2回リクエスト送っています）<br>
/v2/datahub/jobflow/get：50回/分<br>
/v2/datahub/jobflow/exec：30回/分<br>
→<br>
1分に1000回イベントを書き込みますが今回のCraft Functionsは1実行につき2回イベント送信を行うため1分に500行のIDが送信可能です。またジョブフローは直列実行であり、起動まで1-2分を要する場合があります。</li>
</ul>
<p>この制約からStandardプランの場合は、手順5の「一度に読み込む行数」を指定するクエリで500を指定すれば1分に1回実行できますが、ジョブフローが起動しきっていない可能性があるので、実際は「*/3 * * * *」の形式で3分に1回程度で実行するのが良いです。<br>
<img src="https://ik.imagekit.io/plaid/d1acb30d-72d4-413f-a7f2-6a82d4075e0c/%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-02-298.43.58.png" alt="スクリーンショット2024-02-298.43.58.png"></p>
<h1>実際に動かしてみる</h1>
<p>それでは実際に動作を確認してみましょう。</p>
<p>仕組みとしては以下の流れになります。<br>
ジョブフローを実行<br>
↓<br>
1つ目のジョブが起動しIDリストを抽出してCraft Functionsを実行する<br>
↓<br>
Craft FunctionsがKARTEのイベントを起こす<br>
↓<br>
2つ目のジョブが起動し読み込み済行番号を置き換えし、次回実行時にはまだ読み込んでいない行から開始可能。</p>
<p>問題なく設定と実行できていれば、連携対象のユーザーストーリー画面の左帯でTalkパーミッションの許可中のプラグインにLINEが表示されています！</p>
<p><a href="https://support.karte.io/post/73Ez6Xqqdx6taTwWXW9knL#3-0">LINEメッセージが送信可能なユーザーの定義</a><br>
<img src="https://ik.imagekit.io/plaid/717e47e0-82af-4391-807f-358a118638fd/%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-02-299.30.55.png" alt="スクリーンショット2024-02-299.30.55.png"></p>
<p><strong>改めてとなりますが以下2点の注意事項についてはご留意ください。</strong></p>
<ul>
<li>LINE IDとログインIDの対応が間違った状態でイベント発生すると簡単には元に戻せなくなるので、十分に注意して実行してください</li>
<li>実際に行う場合は、少量データで十分に検証した上で、設定に問題がないことを確認してから実施してください</li>
</ul>
<h1>おわりに</h1>
<p>今回はKARTE CraftとDatahubを使ってLINE IDを一括でKARTEユーザーIDに関連付けする方法について紹介しました。</p>
<p>KARTEのLINE連携機能を導入する際は、必要であればぜひ利用を検討してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


意外と面倒なKARTEにLINE IDを紐付けるという操作を自動化します！これでエンドユーザーにLINEログインをしてもらう手間が省けるようになります。

KARTE CraftとDatahubを使ってLINE IDを一括でKARTEユーザーIDに関連付けする

<p>こんにちは、Customer EngineerのMasamichiです！この度のソリューションブログは、私がインターン生として寄稿する最後の記事となります。PLAID Solution Blogをいつもご愛読いただいている皆様に、心より感謝申し上げます。</p>
<p>さて、一般的なサイトページでは、企業が全ユーザーに対してお知らせするタイプの通知が使われています。しかし、前述のような従来の通知配信では個々のユーザーに適した情報を配信するということは少し難易度が高いです。そこでKARTEで、Webサイト上でユーザー毎にパーソナライズされた通知を一覧表示することで、適切な情報だけをユーザーに届けることができます。</p>
<p>ということで今回は、アクションテーブルとCraft kvsを使って通知のInbox機能を実現する方法について解説します！</p>
<h1>全体像</h1>
<h2>処理の流れ</h2>
<p>処理の流れは下図の通りです：<br>
<img src="https://ik.imagekit.io/plaid/a3a20855-500a-453b-8d82-cc81bdc1648a/craftkvs%E3%81%A6%E3%82%99inbox%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E8%A3%85.jpg" alt="craftkvsでinbox機能を実装.jpg"></p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。<br>
<img src="https://ik.imagekit.io/plaid/95fb9243-1785-44c8-9a88-0b09efcb538f/%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-02-2618.56.15.png" alt="スクリーンショット2024-02-2618.56.15.png"></p>
<p>画面右下を見てもらうと、通知がInboxに表示されていることがわかります。</p>
<h1>実装手順</h1>
<p>実装は以下の手順で進めていきます。</p>
<ol>
<li>APIv2アプリを作成する</li>
<li>APIv2 アプリのアクセストークンをCraft Secret Manager に登録する</li>
<li>アクションテーブルを作成する</li>
<li>Craft Functionsのファクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>通知配信用のCraft接客サービスを作成する</li>
<li>Inbox表示用の接客サービスを作成する</li>
</ol>
<h2>1. APIv2アプリを作成する</h2>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.action.actionTable.records.upsert</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h2>2. APIv2 アプリのアクセストークンをCraft Secret Manager に登録する</h2>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h2>3. アクションテーブルを作成する</h2>
<p>通知の詳細データをレコードとして登録するためのアクションテーブルを作成します。手順は以下の通りです。</p>
<ul>
<li>[Action &gt; アクションテーブル &gt; 作成 &gt; 空のテーブルを作成]からアクションテーブルを新規作成</li>
<li>アクションテーブルID: 任意の文字列を指定</li>
<li>主キー: <code>campaign_id</code>(文字列)を指定</li>
<li>権限に「<strong>widgetからの参照</strong>」を追加</li>
<li>[テーブル情報 &gt; スキーマの管理]から以下のようにカラムを追加<br>
<img src="https://ik.imagekit.io/plaid/0c1cf412-95c6-41ca-a7b7-5daeb5816ffa/%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-02-2721.23.12.png" alt="スクリーンショット2024-02-2721.23.12.png"><br>
今回使用するフィールドは次の通りです。
<ul>
<li><code>campaign_id</code>
<ul>
<li>配信される通知（今回は接客サービスに該当）のID</li>
</ul>
</li>
<li><code>sender_name</code>
<ul>
<li>通知の送信者名</li>
</ul>
</li>
<li><code>sender_image</code>
<ul>
<li>通知の送信者画像</li>
</ul>
</li>
<li><code>title</code>
<ul>
<li>通知のタイトル</li>
</ul>
</li>
<li><code>url_title</code>
<ul>
<li>通知リンク部分のテキスト</li>
</ul>
</li>
<li><code>url_link</code>
<ul>
<li>通知リンク部分のURL</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>今回使用しているフィールドの値は以下の画像部分にそれぞれ対応しています。<br>
<img src="https://ik.imagekit.io/plaid/3a8ab485-d533-4ce7-9ad7-01970155aeb4/%E9%80%9A%E7%9F%A5%E9%85%8D%E4%BF%A1ex.jpg" alt="通知配信ex.jpg"></p>
<p><strong>注意</strong>: ここでは以上のようにカラムを追加していますが、各々で必要なカラムを読み替えて追加してください。</p>
<h2>4. Craft Functionsのファンクションを作成する</h2>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>アクションテーブル×Craft kvsを使って通知のInbox機能を実現する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定します</li>
</ul>
</li>
<li><code>KARTE_API_TOKEN_SECRET</code>
<ul>
<li>KARTE API v2アプリのtokenを登録したシークレット名です</li>
</ul>
</li>
<li><code>ACTION_TABLE_ID</code>
<ul>
<li>更新対象のアクションテーブルのIDです</li>
</ul>
</li>
<li><code>KVS_KEY_SUFFIX</code>
<ul>
<li>Inbox通知用のKVSユーザーIDであることがわかるようにSUFFIXを指定します</li>
</ul>
</li>
<li><code>NOTIFICATION_EXPIRE_DAYS </code>
<ul>
<li>通知が配信されてから消去されるまでの日数を指定します（例：30日間表示したい場合は<code>30</code>と入力）</li>
</ul>
</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/kvs-based-notification-inbox">craft-codes/craft-functions/kvs-based-notification-inbox at main · plaidev/craft-codes</a></p>
<h2>5. Craft Functionsのエンドポイントを作成する</h2>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h2>6. 通知配信用のCraft接客サービスを作成する</h2>
<p>配信したい通知をアクションテーブルに追加するためのCraft接客サービスを作成します。</p>
<ul>
<li>[Action &gt; 接客サービス &gt; 作成]から新規の接客サービスを作成</li>
<li>「アクションを追加」をクリック</li>
<li>テンプレートで「<strong>Craft Functions連携</strong>」というテンプレートを選択</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/cb79f2cc-5f5c-4c88-9321-94ac64de1cfd/%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-02-2721.46.40.png" alt="スクリーンショット2024-02-2721.46.40.png"></p>
<ul>
<li>配信トリガーに任意のイベントを設定
<ul>
<li>例えば、特定のページを閲覧したユーザにだけ通知を配信したい場合は、そのページ閲覧時のviewイベントを設定する</li>
</ul>
</li>
<li>配信頻度を任意の頻度に指定</li>
<li>「アクションの編集」をクリックして編集ページに遷移</li>
<li><code>data</code>に「<strong>3. アクションテーブルを作成する</strong>」で作成したカラムに対応するデータとユーザ情報変数を追加する。
<ul>
<li>本ブログで使用しているカラムの例では次のようになります。</li>
</ul>
</li>
</ul>
<pre><code>{
  &quot;user_id&quot;: &quot;#{user_id}&quot;, 
  &quot;campaign_id&quot;: &quot;#{campaign_id}&quot;,
  &quot;sender_image&quot;: &quot;#{sender_image}&quot;, 
  &quot;sender_name&quot;:&quot;#{sender_name}&quot;, 
  &quot;title&quot;: &quot;#{title}&quot; , 
  &quot;link_title&quot;: &quot;#{link_title}&quot;, 
  &quot;link_url&quot;: &quot;#{link_url}&quot;
}
</code></pre>
<p>なお、静的変数の枠が足りないというときは、下画像の赤枠部分「変数を追加」をクリックすると変数名、データの種類、データの値をそれぞれ指定できます。</p>
<p><img src="https://ik.imagekit.io/plaid/5fd6799f-5f74-4cbb-aee9-1f0474e35ee6/%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-02-2817.03.57.png" alt="スクリーンショット2024-02-2817.03.57.png"></p>
<p>静的変数を追加すると「アクション設定画面」から簡単に通知内容を設定することができます。</p>
<p><img src="https://ik.imagekit.io/plaid/c56596ed-1f81-494a-a120-27c15264a2da/%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-02-2910.08.34.png" alt="スクリーンショット2024-02-2910.08.34.png"></p>
<p><strong>ポイント</strong>: もし通知を何度も送りたい場合は、この接客サービスを通知毎に作成してください。これにより、通知毎に接客サービスの配信設定を変更でき、<strong>KARTEのセグメントなどを使って通知の出し分けをする</strong>ことが可能です。</p>
<h2>7. Inbox表示用の接客サービスを作成する</h2>
<p>Inboxを画面に表示するための接客サービスを作成します。HTML/CSSなどの詳細な記述については省略しますが、重要な部分だけかいつまんで説明します。作成手順は以下の通りです。</p>
<ul>
<li>[Action &gt; 接客サービス &gt; 作成]から新規接客サービスを作成</li>
<li>「接客の編集」から任意のセグメントを指定</li>
<li>同様に任意の配信トリガーを指定
<ul>
<li>たとえば特定のページだけに通知inboxを表示したい場合は、そのページ閲覧時のviewイベントを設定する</li>
</ul>
</li>
<li>同様に任意の配信頻度を指定</li>
<li>「アクションの編集」からコードエディターを開き以下のようにコードを編集</li>
</ul>
<p>以下は当該接客サービスの、アクション編集のカスタマイズにおける本ブログに該当するコード部分を抜粋したものです。</p>
<h3>アクション編集のコードエディターで設定するJavaScript例</h3>
<pre><code class="language-js">// Craft Functionsのエンドポイントを指定
const CRAFT_ENDPOINT = 'https://t.karte.io/hook/xxxxxxxxxxxxxx/craft/xxxxxxxxxxxxxxxxxx';
// アクションテーブルIDを指定
const ACTION_TABLE_ID = 'your_action_table_id';

function postNotifDataToCraftFunc(url) {
    const data = JSON.stringify({
        &quot;user_id&quot;: &quot;#{user_id}&quot;,
        &quot;event&quot;: &quot;get_notifications&quot;
    });
    fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
        body: data
    })
    .then(response =&gt; {
        if (!response.ok) {
            throw new Error(&quot;Network response was not ok&quot;);
        }
        return response.json();
    })
    .then(responseData =&gt; {
        console.log('responseData:', responseData);
        // 作成したアクションテーブルのIDを指定してテーブルをread
        const table = widget.collection('v2/'+ACTION_TABLE_ID);
        table.get(responseData, function(err, notifications){
            if (err) {
                console.error(`error log: ${err}`);
                return;
            };
            widget.setVal('notifications', notifications);
            console.log('notifications', notifications);
            // 通知が一件以上ある時に通知一覧を画面に表示
            if (notifications.length &gt;= 1){
                widget.show();
            }
        });
    })
    .catch(error =&gt; console.error(&quot;error log: &quot;, error));
}

// 通知がクリックされた時にkvsから削除するために通知IDをファンクションのエンドポイントに送信する関数
widget.method(&quot;clickedNotification&quot;, function(campaignId){
    const data = JSON.stringify({
        &quot;user_id&quot;: '#{user_id}',
        &quot;clicked_campaign_id&quot;: campaignId,
        &quot;event&quot;: &quot;clicked_notification&quot;
    });
    fetch(CRAFT_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
        body: data
    })
    .then(response =&gt; {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(responseData =&gt; {
        console.log('onclick response:', responseData);
    })
    .catch(error =&gt; console.error('error log:', error));
});

// 定義した関数を呼び出す
postNotifDataToCraftFunc(CRAFT_ENDPOINT);
</code></pre>
<h3>アクション編集のコードエディターで設定するHTML例</h3>
<pre><code class="language-html">&lt;div class=&quot;body&quot;&gt;
  &lt;div krt-for=&quot;notification in notifications&quot; class=&quot;item flex&quot;  krt-bind:key=&quot;notification.campaign_id&quot;&gt;
    &lt;div class=&quot;author mr-3&quot;&gt;&lt;img krt-bind:src=&quot;notification.sender_image&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;flex-inner list&quot;&gt;
        &lt;div class=&quot;flex flex-ycenter&quot;&gt;
          &lt;div class=&quot;name mr-2&quot;&gt;{{notification.sender_name}}&lt;/div&gt;
        &lt;/div&gt;
          &lt;div class=&quot;description&quot;&gt;
            &lt;p&gt;
              &lt;strong&gt;{{notification.title}}&lt;/strong&gt;
                &lt;br&gt;
                  {{notification.description}}
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;a class=&quot;link&quot; target=&quot;_blank&quot; krt-bind:href=&quot;notification.link_url&quot; krt-on:click=&quot;clickedNotification(notification.campaign_id)&quot;&gt;{{notification.link_title}}&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h1>実際に動かしてみる</h1>
<p>実際に動作を確認してみましょう。動作検証にあたって次の事項を確認してください。</p>
<ul>
<li>通知配信用のCraft接客サービスが正常に作動しているか確認する
<ul>
<li>配信トリガーで設定したイベントを発生させる</li>
<li>ファンクションが正常に実行されたか確認する
<ul>
<li>Craft kvsに当該通知のオブジェクトが追加されているか</li>
<li>アクションテーブルにCraft接客サービスで送信した通知データが追加されているか</li>
</ul>
</li>
</ul>
</li>
<li>Inbox表示用の接客サービスが正常に作動しているか確認する
<ul>
<li>Inbox接客サービス配信先Webページにいき通知一覧が表示されるか確認する</li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/95fb9243-1785-44c8-9a88-0b09efcb538f/%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-02-2618.56.15.png" alt="スクリーンショット2024-02-2618.56.15.png"></p>
<p>設定に問題がければ、上画像のように画面右下に通知Inboxが表示されます。</p>
<h2>補足</h2>
<p>本ブログ内容を実装する上で注意すべきこととして、Craft Functionsのファンクション実行数がかなり増えてしまうということが挙げられます。具体的に記すと以下のタイミングでファンクションが実行されます。</p>
<ul>
<li>ユーザへの通知送信時: ユーザー×通知数（回）</li>
<li>ユーザへのInbox表示時: ユーザー×接客表示数（回）</li>
<li>ユーザーのInbox内リンククリック時: ユーザー×クリック数（回）</li>
</ul>
<p>上記の対処法として、ファンクションの呼び出し回数を減らすために、ローカルストレージを利用してキャッシュ層を実装するなどの手段があります。各々で料金プランに合わせた使用と対処を行なってください。</p>
<p>また、「<strong>6. 通知配信用のCraft接客サービスを作成する</strong>」でも解説しましたが、もし通知を何度も送りたい場合は、この接客サービスを通知毎に作成してください。これにより、通知毎に接客サービスの配信設定を変更でき、<strong>KARTEのセグメントなどを使って通知の出し分けをする</strong>ことが可能です。</p>
<h1>おわりに</h1>
<p>今回は、アクションテーブルとCraft kvsを使用して、通知のInbox機能を実現する方法を紹介しました。前述した通り、このInbox機能を導入することで、適切な情報を適切なユーザーに届けるということが今までより容易になります。ぜひ通知の配信をする際はご役立てください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


アクションテーブル × Craft kvsを使って通知のInbox機能を実現する方法を解説します。

アクションテーブル × Craft kvsを使って通知のInbox機能を実現する

アクションテーブル×Craft kvsを使って通知のInbox機能を実現する

<p>こんにちは、Customer EngineerのUGです！最近ノンオイルドレッシングの美味しさに魅了されています！</p>
<p>みなさんはWebページに来訪してくれたユーザーのアクセスしてきた都道府県によってローカルなキャンペーンのバナーを出したいのような位置情報を利用した施策をやってみたいとは思ったことはありませんか？Craft FunctionsとGoogle Maps APIを連携すればエンドユーザーの位置情報から都道府県を特定することが出来るのです！そこで今回は、Google Maps APIを使ってユーザーのアクセス元の都道府県を特定する方法について紹介します。</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。下記の画像のようにユーザーの都道府県がイベントとしてKARTE側に発生している状態になります。<br>
<img src="https://ik.imagekit.io/plaid/4f171edd-6a51-43c3-a0fe-a5b90f3ee7f6/%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-02-2516.20.23.png" alt="スクリーンショット2024-02-2516.20.23.png"></p>
<p>位置情報を利用する前に下記のようなダイアログでエンドユーザーに許諾を取ります。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>構成図は次の通り。</p>
<p><img src="https://ik.imagekit.io/plaid/9254f889-dc31-4fc1-919d-397512abd16e/%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-02-2811.16.07.png" alt="スクリーンショット2024-02-2811.16.07.png"></p>
<p>Webブラウザから緯度経度情報を取得してCraft Functionsに連携します。その情報を下に Google Maps APIを利用して、都道府県を特定してKARTEイベントを発生させます。今回のブログでは緯度経度をWebブラウザ側から連携するためにKARTE Actionのスクリプト配信を利用します。スクリプト配信でなくとも今回のCraft Functionsは利用可能です。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>CraftのGrowthプラン以上を利用していることを前提としています</li>
<li>KARTE Webのスクリプト配信を利用していることを前提としています
<ul>
<li>スクリプト配信を利用しなくても今回のCraft Functionsは利用可能ですが今回のブログではスクリプト配信を利用することを前提に話していきます</li>
</ul>
</li>
<li>Google Maps Platformの利用を前提としています
<ul>
<li>リクエスト数に応じて<a href="https://developers.google.com/maps/billing/gmp-billing?hl=ja#geocoding">課金が発生する可能性</a>があります</li>
</ul>
</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Google Cloud PlatformでAPIキーを発行する</li>
<li>KARTE Actionからスクリプト接客を配信する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>ユーザーの「緯度経度」をCraft Functions × Google Maps APIで「都道府県」に変換してKARTEのイベントを発生させる</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定してください</li>
</ul>
</li>
<li><code>KARTE_APP_TOKEN_SECRET</code>
<ul>
<li>KARTE API v2アプリのtokenを登録したシークレット名を指定してください</li>
</ul>
</li>
<li><code>GOOGLE_MAPS_APIKEY</code>
<ul>
<li>Google Cloud Platformで発行したAPI Keyを指定してください</li>
</ul>
</li>
<li><code>EVENT_NAME</code>
<ul>
<li>KARTEで発生させるイベント名を指定してください</li>
</ul>
</li>
<li><code>FIELD</code>
<ul>
<li>イベント内で都道府県を連携する際のフィールド名を指定してください</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/Identify-prefecture-with-google-maps-api">craft-codes/craft-functions/Identify-prefecture-with-google-maps-api at main · plaidev/craft-codes</a></p>
<h3>2. Craft Functionsのエンドポイントを作成する</h3>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h3>3. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>track.event.write</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>4. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Google Cloud PlatformでAPIキーを発行する</h3>
<p>Google Maps APIを利用するために、GCPにてAPIキーを発行します。<br>
GCPを利用したことがない方に関してはプロジェクトの作成から始めてください。参考までに<a href="https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja">GCPの公式ドキュメントはこちら</a>になります。</p>
<ul>
<li>[APIとサービス &gt; 認証情報 &gt; 認証情報を作成] からAPIキーを作成する</li>
<li>作成したAPIキーが以下のAPIを利用できるか確認してください
<ul>
<li>Geocoding API</li>
</ul>
</li>
</ul>
<p>参考までに私が作成した際のコンソールの画面は下記になります。<br>
<img src="https://ik.imagekit.io/plaid/04c9c4cc-7e59-468a-a97a-aa3b5762a0af/%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-02-2811.24.28.png" alt="スクリーンショット2024-02-2811.24.28.png"></p>
<h3>6. KARTE Actionからスクリプト接客を配信する</h3>
<p>Webブラウザから緯度経度情報をCraft Functionsに連携するために、KARTE Actionの接客サービスからスクリプト配信します。</p>
<ul>
<li>[KARTE Action &gt; 接客サービス] からスクリプト配信の接客を作成する</li>
<li>緯度経度を取得したいページとタイミングで配信する</li>
</ul>
<p>スクリプトの例として今回のブログの検証では下記のスクリプトを配信しています。参考スクリプトと接客アクションの編集画面は以下になります。<br>
<img src="https://ik.imagekit.io/plaid/935bb34f-1d7a-4e3c-8541-63cfe829619d/%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-02-2813.59.08.png" alt="スクリーンショット2024-02-2813.59.08.png"></p>
<pre><code>if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(sendPositionToServer, handleError);
} else {
    alert(&quot;Geolocation is not supported by this browser.&quot;);
}

function sendPositionToServer(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var endpoint = &quot;xxx&quot;;  // 送信先のCraft Functionsのエンドポイントを指定

    // HTTP POSTリクエストの設定
    fetch(endpoint, {
        method: &quot;POST&quot;,
        headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
        body: JSON.stringify({
            latitude: latitude,
            longitude: longitude,
            visitor_id: &quot;#{visitor_id}&quot;,
        }),
    })
    .then(function(response) {
        if (!response.ok) {
            throw new Error(&quot;Network response was not ok&quot;);
        }
        return response.json();
    })
    .then(function(data) {
        console.log(&quot;Server response:&quot;, data);
    })
    .catch(function(error) {
        console.error(&quot;Error during fetch operation:&quot;, error);
    });
}

function handleError(error) {
    console.error(&quot;Error getting geolocation:&quot;, error.message);
}

</code></pre>
<p>問題なければ以下のように緯度経度取得のためのダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。<br>
まずはスクリプト配信をしているページでユーザーが訪問したら以下のようなダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%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-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>Craft Functions側でエラーが発生しなければ下記のようなイベントが発生するはずです。<br>
<img src="https://ik.imagekit.io/plaid/4f171edd-6a51-43c3-a0fe-a5b90f3ee7f6/%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-02-2516.20.23.png" alt="スクリーンショット2024-02-2516.20.23.png"></p>
<h2>おわりに</h2>
<p>今回はWebブラウザ側から取得したユーザーの「緯度経度」をCraft Functions × Google Maps APIで「都道府県」に変換してKARTEに連携する方法について紹介しました。</p>
<p>これにより特定の都道府県のユーザーにカスタマイズしたアクションを配信することができるようになります。ぜひ皆さんも試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


Webブラウザ側から取得したユーザーの緯度経度情報をCraft FunctionsからGoogle Maps APIを利用して都道府県情報に変換してKARTEにイベントを発生させる

Webブラウザ側から取得したユーザーの「緯度経度」をCraft Functions × Google Maps APIで「都道府県」に変換してKARTEに連携する

Craft FunctionsからPageSpeed Insights APIを利用し、複数のURLのコアウェブバイタルの結果をGoogleスプレッドシートに出力する方法です。PageSpeed Insightsの画面では、1つのURLに対してしか実行できませんが、APIなら複数のURLに対してまとめて実行できます。

Craft FunctionsからPageSpeed Insights APIを利用し、複数のURLのコアウェブバイタルの結果をGoogleスプレッドシートに出力する方法

Craft FunctionsからPageSpeed Insights APIを利用し、複数のURLのコアウェブバイタルの数値をGoogleスプレッドシートに出力する方法

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のコンバージョンイベントの成果をSlackに通知する方法の紹介です。GA4で設定しているコンバージョンの成果を、定期的にSlackに通知するための便利なソリューションで、平日と休日を区別して通知内容も変えられます。