カテゴリー内の他の記事

マルケトとkintoneを連携してみよう

フォローする

Index

はじめに

標準機能だけを使用してkintoneをMAツールとして用いることは難しいです。

そこで今回は、強力なMAツールであるマルケトと連携する方法をご紹介します。

マルケトとは

公式サイトをご確認ください。

https://jp.marketo.com

完成イメージ

kintone-001.png

 

今回のシナリオでは上図の②と④のカスタマイズ方法をご紹介します。

マルケトに新規顧客が登録されたことをトリガーとして、kintoneへレコードを追加します。
また、kintoneからマルケトのリード更新は、kintoneアプリ詳細画面にボタンを設置して行います。

事前準備

kintone

kintoneアプリストアから「案件管理」のアプリを作成してください。
※ アプリの詳細をクリックして「サンプルデータを含める」のチェックを外してください。

kintone01.png

kintone02.png

右側の歯車アイコンから設定画面に進み、「設定」>「APIトークン」でAPIトークンを作成してください。
権限は「レコード追加」の権限が付与してあれば大丈夫です。
生成したAPIトークンは後ほど利用するので、メモしてください。

kintone-2.png

「フォーム」タブに移動し、マルケトのリードIDを保存するフィールドを追加します。
フィールドは「数値フィールド」フィールドコードは「leadID」で設定します。
また、ユニークなキーとなるため、「値の重複を禁止する」にチェックを入れます。
設置したフィールドの右上の歯車アイコンから変更することが可能です。

kintone03.png

kintone003.png

さらに、既存フィールドのフィールドコードも変更します。
下表のとおりに変更してください。

フィールド名 フィールドコード
会社名 companyName
部署名  division
先方担当者 contactName
TEL tel
FAX fax
メールアドレス mail
確度 accuracy

最後にkintoneのアプリIDを確認します。設定が完了したら、「アプリを公開」(または「アプリを更新」)をクリックしてください。

先ほど作成したkintoneアプリを開きURLを確認してください。「https://{subdomain}.cybozu.com/k/xx/」 の 「xx」がアプリIDなのでメモしてください。

マルケト

マルケトデベロッパーサイト

http://developers.marketo.com/rest-api/

上記のリンク先を参考に、マルケトにREST API用のユーザーを追加してください。

ロールの権限は「APIへのアクセス」にチェックを入れてください。

marketo-role.png

次に、LanchPointを作成し、クライアント IDとクライアントシークレットをメモしてください。

marketo-lanch.png

最後にマルケト管理画面でEndpointとIdentity(ID)を確認する必要があります。
下記リンクと画像を参考に確認し、メモしてください。

http://developers.marketo.com/rest-api/authentication/#creating_an_access_token

Image_14.png

以上で事前準備は完了です。

マルケト設定

マルケトWebhookを作成する

まず、マルケトからkintoneにデータを登録するために、Webhookを作成します。

下図の通り、①マルケトの管理画面から②Webhookの設定画面に遷移し、③新規Webhookを作成してください。

Image_1.png

Image_2.png

Image_3.png

次に、下図のようなWebhook作成画面が開きます。
④URLはご自身の環境に合わせて下記のように設定してください。
https://{subdomain}.cybozu.com/k/v1/record.json
⑤リクエストタイプはPOST
⑥テンプレートは後述のJSONサンプルを元に、appの値だけ先ほど作成したkintoneのアプリIDに変更して貼り付けてください。
⑦リクエスト トークンのエンコード、応答タイプはともにJSONを選択します。

Image_5.png

JSONサンプル

次に⑧カスタムヘッダを設定します。

Image_18.png

下図の通り、「Content-Type」を「application/json」、

「X-Cybozu-API-Token」を先ほど作成したkintoneアプリのAPIトークンに設定してください。

Image_19.png

以上でマルケトWebhookの作成は完了です。

新規顧客が作成されたときWebhookが動くようにする

先ほど作成したWebhookを、新規顧客が作成された際に動くようにします。

マルケト画面左上のアイコンをクリックし、①マーケティング活動から、
②Webhookを実行させたいワークスペースを選択し、③新規スマートキャンペーンを作成します。
フォルダや名前は任意に設定してください。

Image_6.png

Image_8.png

Image_9.png

スマートキャンペーンを作成したら、④スマートリストから⑤「顧客を作成」のトリガーを選択します。

Image_11.png

⑥次にフローで「ウェブフックを呼び出し」を選択し、ドロップダウンから先ほど作成したウェブフックを選択します。

Image_12.png

最後にスケジュールから有効化をクリックして設定は完了です。

Image_13.png

これで、マルケトからkintoneへのデータの設定が完了しました。

kintone設定

サンプルコード

下記のサンプルコードをjsファイルとして保存してください。

14~17行目は事前準備でメモした情報を記入してください。

JavaScript / CSSカスタマイズ設定

アプリの設定 > 設定タブ > JavaScript / CSSでカスタマイズ の順に遷移し、下図の通り設定します。
「connect-to-Marketo.js」は先ほど作成したサンプルコードです。

kitone-setting.png

kintone UI Component

マルケトリード更新ボタンとスピナーの表示にkintone UI Componentを使用しています。
GitHubよりjsファイルとcssファイルをダウンロードして、アプリに適用します。
使用方法はこちらの記事を確認してください。

Cybozu CDN

URL指定でCybozu CDNのjQuery, SweetAlert2を使用しています。

  • jQuery
    https://js.cybozu.com/jquery/3.3.1/jquery.min.js
  • SweetAlert2
    https://js.cybozu.com/sweetalert2/v7.28.2/sweetalert2.min.js
    https://js.cybozu.com/sweetalert2/v7.28.2/sweetalert2.min.css

動作確認

マルケト新規顧客作成 → kintoneレコード追加

fix1.gif

kintoneレコード詳細画面から更新ボタン → マルケトリード更新

fix2.gif

サンプルコード解説

showSwalQues

SweetAlert2を使用してボタン押下時のアラートを作成しています。

getAuthToken

kintone.proxy()を使用してマルケトの認証トークンを取得するREST APIを実行しています。

createPutButton

kintone UI Componentのボタンに関する関数を使用してボタンを作成しています。

putLeads

kintone.proxy()を使用してマルケトのリードを更新するREST APIを実行しています。
マルケトのREST APIはPOSTメソッドで作成と更新を実行するUpsert APIなので、更新時もPOSTメソッドを使用します。
詳細はドキュメントを確認してください。

buttonAction

ボタン押下時のアクションを設定しています。
マルケトのリード更新処理が終了するまで、kintone UI Componentのスピナーを表示しています。

おわりに

いかがでしょうか。kintoneとマルケトの相互連携が実現できたと思います。
他にも以下のカスタマイズが実装できそうですね。
・kintoneアプリのステータス変更時にマルケトリードを更新する
・kintoneレコードの値が変更されたときマルケトリードを更新する
・kintoneレコード詳細画面にリアルタイムでマルケトリードスコアを表示する

マルケトのREST APIはリード情報以外にもほかにも豊富に用意されているので様々なことが可能そうです。

詳細は下記のマルケトデベロッパーサイトをご確認ください。

http://developers.marketo.com/

このTipsは、2018年10月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。