該当箇所：JavaScriptプログラムの34-38行目
はじめに
標準機能だけを使用してkintoneをMAツールとして用いることは難しいです。
そこで今回は、強力なMAツールであるマルケトと連携する方法をご紹介します。
マルケトとは
公式サイトをご確認ください。
完成イメージ
今回のシナリオでは上図の②と④のカスタマイズ方法をご紹介します。
マルケトに新規顧客が登録されたことをトリガーとして、kintoneへレコードを追加します。
また、kintoneからマルケトのリード更新は、kintoneアプリ詳細画面にボタンを設置して行います。
事前準備
kintone
kintoneアプリストアから「案件管理」のアプリを作成してください。
※ アプリの詳細をクリックして「サンプルデータを含める」のチェックを外してください。
右側の歯車アイコンから設定画面に進み、「設定」>「APIトークン」でAPIトークンを作成してください。
権限は「レコード追加」の権限が付与してあれば大丈夫です。
生成したAPIトークンは後ほど利用するので、メモしてください。
「フォーム」タブに移動し、マルケトのリードIDを保存するフィールドを追加します。
フィールドは「数値フィールド」フィールドコードは「leadID」で設定します。
また、ユニークなキーとなるため、「値の重複を禁止する」にチェックを入れます。
設置したフィールドの右上の歯車アイコンから変更することが可能です。
さらに、既存フィールドのフィールドコードも変更します。
下表のとおりに変更してください。
| フィールド名 | フィールドコード |
|---|---|
| 会社名 | companyName |
| 部署名 | division |
| 先方担当者 | contactName |
| TEL | tel |
| FAX | fax |
| メールアドレス | |
| 確度 | accuracy |
最後にkintoneのアプリIDを確認します。設定が完了したら、「アプリを公開」（または「アプリを更新」）をクリックしてください。
先ほど作成したkintoneアプリを開きURLを確認してください。「https://{subdomain}.cybozu.com/k/xx/」 の 「xx」がアプリIDなのでメモしてください。
マルケト
マルケトデベロッパーサイト
http://developers.marketo.com/rest-api/
上記のリンク先を参考に、マルケトにREST API用のユーザーを追加してください。
ロールの権限は「APIへのアクセス」にチェックを入れてください。
次に、LanchPointを作成し、クライアント IDとクライアントシークレットをメモしてください。
最後にマルケト管理画面でEndpointとIdentity(ID)を確認する必要があります。
下記リンクと画像を参考に確認し、メモしてください。
http://developers.marketo.com/rest-api/authentication/#creating_an_access_token
以上で事前準備は完了です。
マルケト設定
マルケトWebhookを作成する
まず、マルケトからkintoneにデータを登録するために、Webhookを作成します。
下図の通り、①マルケトの管理画面から②Webhookの設定画面に遷移し、③新規Webhookを作成してください。
次に、下図のようなWebhook作成画面が開きます。
④URLはご自身の環境に合わせて下記のように設定してください。
https://{subdomain}.cybozu.com/k/v1/record.json
⑤リクエストタイプはPOST
⑥テンプレートは後述のJSONサンプルを元に、appの値だけ先ほど作成したkintoneのアプリIDに変更して貼り付けてください。
⑦リクエスト トークンのエンコード、応答タイプはともにJSONを選択します。
JSONサンプル
次に⑧カスタムヘッダを設定します。
下図の通り、「Content-Type」を「application/json」、
「X-Cybozu-API-Token」を先ほど作成したkintoneアプリのAPIトークンに設定してください。
以上でマルケトWebhookの作成は完了です。
新規顧客が作成されたときWebhookが動くようにする
先ほど作成したWebhookを、新規顧客が作成された際に動くようにします。
マルケト画面左上のアイコンをクリックし、①マーケティング活動から、
②Webhookを実行させたいワークスペースを選択し、③新規スマートキャンペーンを作成します。
フォルダや名前は任意に設定してください。
スマートキャンペーンを作成したら、④スマートリストから⑤「顧客を作成」のトリガーを選択します。
⑥次にフローで「ウェブフックを呼び出し」を選択し、ドロップダウンから先ほど作成したウェブフックを選択します。
最後にスケジュールから有効化をクリックして設定は完了です。
これで、マルケトからkintoneへのデータの設定が完了しました。
kintone設定
サンプルコード
下記のサンプルコードをjsファイルとして保存してください。
11~14行目は事前準備でメモした情報を記入してください。
※ 本来、11,12行目に記述する認証情報は、プラグイン化するなど、情報を秘匿する必要があります。
参考：kintoneプラグイン開発入門 【Part1: メリット編】
JavaScript / CSSカスタマイズ設定
アプリの設定 > 設定タブ > JavaScript / CSSでカスタマイズ の順に遷移し、下図の通り設定します。
「connect-to-Marketo.js」は先ほど作成したサンプルコードです。
kintone UI Component
マルケトリード更新ボタンとスピナーの表示にkintone UI Componentを使用しています。
GitHubよりv0.〜で始まる最新バージョンをダウンロードして解凍し、jsファイルとcssファイルをアプリに適用します。
使用方法はこちらの記事を確認してください。
Cybozu CDN
URL指定でCybozu CDNのSweetAlert2を使用しています。
- SweetAlert2
https://js.cybozu.com/sweetalert2/v7.28.2/sweetalert2.min.js
https://js.cybozu.com/sweetalert2/v7.28.2/sweetalert2.min.css
動作確認
マルケト新規顧客作成 → kintoneレコード追加
kintoneレコード詳細画面から更新ボタン → マルケトリード更新
サンプルコード解説
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で確認したものになります。
はじめまして、kintoneカスタマイズ初心者です。
kintone のSAML認証を設定した状態でトリガーを実行すると、Marketo側のアクティビティで下記のエラーが表示されました。
何かご存知の方、ご教示のほど、何卒よろしくお願い致します
応答:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Unauthorized</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="/forest_error/css/style.css"> </head> <body> <div class="pagewrap"> <div class="column"> <img src="/forest_error/image/cloud.png" width="178" height="107" alt=""> <h2>アクセスするには認証が必要です。</h2> <p>Code: 401 Unauthorized</p> </div> </div> <div class="footer"> <p>Copyright(C) Cybozu</p> </div> </body> </html>
エラー タイプ:
HTTP エラー 401: URL へのアクセスが認証されていません。
エラー文字列:
Server Returned code 401
コメントありがとうございます。
SAML認証を設定していても、本記事の方法での連携は可能です。
恐れ入りますが、下記の事項をご確認いただけますでしょうか。
・APIトークンのアクセス権を適切に設定している
・APIトークンを生成した後、「アプリの設定」画面でアプリを更新している
・セキュアアクセスを設定していない
※セキュアアクセスを設定している場合、APIトークンでの認証はエラーになります
https://developer.cybozu.io/hc/ja/articles/201941754
cybozu Development team
ご担当者様
返信いただきありがとうございます。
検証する中で、Marketoのカスタムヘッダに「Authorization」を追加してエラーを解消できました。
BASIC認証とIP制限、SAML認証を設定している環境となり、設定不足が原因でした、混乱させてしまい申し訳ございません。連携は非常に簡単ですね。
はじめまして
KintoneからMarketoへのデータ連携について
「マルケトのリードを更新する」ボタンをクリックすると
応答が返ってこない状態が3分ほど続くためブラウザを再読み込みしています
問題はconnect-to-Marketo.jsにあると思い
55行目の// マルケトにリードを送信するにある更新項目を下記3つに減らして試したましたが
上記応答なし状態となってしまいます
・record.leadID.value
・record.companyName.value
・record.accuracy.value
認証情報である14～17行目の情報は間違いないことを確認しています
ご教示のほど、よろしくお願い致します
情報が不足していればお申し付けください。
n.igarashi 様
お世話になっております。cybozu developer network 運営でございます。
以下の記事を参考にして頂き、一度デバッグして頂けないでしょうか。
https://developer.cybozu.io/hc/ja/articles/207613916
よろしくお願い致します。
ご担当者様
御世話になっております。こちらの記事を参考にMarketo連携をしております。
1点お伺いさせていただきたいのですが、offsetの制限値の上限値が決まりましたが、
こちらのAPIに影響はありますでしょうか？
通常の運用で、月/1,000件ほどのリードがMarketo側のトリガーを起点にkintone登録されており、
特に運用上問題はないと考えておりますが、apiにあまり詳しくないためご教示いただけますと幸いです。
御確認の程、宜しくお願い致します。
K.Furusho 様
お世話になっております。cybozu developer network 運営事務局でございます。
お問い合わせいただきましたoffset制限値について、本記事におけるカスタマイズへの影響はございません。
offset制限は、kintone REST API の「レコード一括取得」API に関する制限です。
本記事では当該APIを利用していないため、ご対応頂く必要はございません。
[参考情報]
kintone API レコード一括取得APIのoffsetの上限値制限について
offset の制限値を考慮したレコード一括取得について
引き続きご活用いただけますと幸いです。
どうぞよろしくお願いいたします。
cybozu developer network 運営事務局 ご担当者様
御世話になっております。
ご回答いただきありがとうございます。
不安を感じていたので大変助かりました。
迅速なご回答に感謝いたします。
引き続き、何卒宜しくお願い致します。
cybozu Development team 運営ご担当者さま
お世話になっております。
ご返答いただき、ありがとうございます
レスが遅くなって申し訳ありません
頂いたアドバイスどおりデバッグツールで問題点を探り、なんとか解決できました
・ReferenceError: putleads is not defined
⇒56行目のputLeadsをputleadsにしたら解決しました＞Lを小文字
ご協力いただき、ありがとうございました。
cybozu Development team 運営ご担当者さま
御世話になっております。フィールドIDについてお伺いさせてください。
下記についてお伺いさせてください。
【質問】
kintoneのフィールドIDを日本語で設定してもAPI連携は可能でしょうか。
K.Furusho 様
お世話になっております。
cybozu developer network 運営局です。
「フィールドID」はフィールドコードのことでしょうか？
フィールドコードは日本語を指定できます。
利用できる文字については、https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/fieldcode.html をご参照ください。
その場合、たとえばサンプルコードの 57行目は、以下のように記述できます。書き方は異なりますが、実現できることは一緒です。
または
よろしくお願いいたします。
cybozu developer network 運営局
ご担当者様
御世話になっております。
早速のご回答ありがとうございます。
また、フィールドIDではなく「フィールドコード」の誤りでした。失礼しました。
その上で、フィールドコードを日本語に指定しても、APIは利用可能とのことで、
ご回答いただきありがとうございます。大変助かりました！
引き続き、何卒宜しくお願い致します。
ご担当者さま
こちらの方法でMarketo連携を考えておりますが、
Marketo→kintoneに連携する際に、
すでにkintoneにMarketoリードIDを保有しているデータがある場合には、
リードIDをキーにデータを上書きすることは可能でしょうか。
ご確認のほどよろしくお願いいたします。
土山
Shinya Tsuchiyama 様
お世話になっております。cybozu developer network 運営局です。
Marketo から kintone のレコード更新についてですが、
Marketo 側から kintone REST API の レコードの更新（PUT）をご利用いただくことで、
リードIDをキーにデータを更新できるかと思います。
また、記事の内容の発展や、直接的に関連がない「記事を参考にした技術的な質問」は、
お手数ですがcybozu developer コミュニティのご利用をお願いします。
ご確認よろしくお願いいたします。
cybozu developer network 運営局 様
ご返信ありがとうございます。
内容について確認いたします。
また、質問のする場所が少し異なっていたようで申し訳ございませんでした。
本記事に関連した内容で質問したつもりでしたが、失礼いたしました。
引き続き、よろしくお願いいたします。
cybozu Development team 様
お世話になっております。いつも参考にさせていただいています。
1点お伺いさせてください。
【ご質問】
Marketoとの連携について、1項目あたりのデータ量に制限はありますでしょうか？
【背景】
Marketoのフォーム入力時に、「日本語で300-1,000文字程度の文章」をkintoneにも連携したいと考えています。
流れとしては、
1.Marketoのフォーム入力時に、Marketoの非表示のフィールドに「日本語で300-1,000文字程度の文章」を格納
2.フォーム入力をトリガーにAPIが発火
3.「1」の情報がkintoneにも無事連携される、というイメージをしています。
kintone側のデータの方をテキストエリアなどにすればできるのかなと思いましたが、、、データ量について制限があれば教えて下さい。
お忙しい中恐縮ですが、何卒宜しくお願い致します。
K.Furusho 様
お世話になっております。cybozu developer network 運営局です。
kintone 連携時の各フィールドの制限値につきましては、kintone の仕様に準じます。
詳細は、「フィールドの入力制限」のページをご確認ください。
また、実装方法や技術的な質問に関しましては、
ぜひ cybozu developer コミュニティ のご利用をお願いいたします。
ご確認のほど、よろしくお願いいたします。
cybozu developer network 運営局 様
お世話になっております。
ご回答いただきありがとうございます。
URL拝見しました。私が使っているフィールドの種類は制限に当たらないことが確認できました。
ご教示いただきありがとうございます。
引き続き、何卒宜しくお願い致します。
ご担当者様
お世話になっております。
サポート範囲かわかりませんが下記についてお伺いさせてください。
【背景】
・現在、Marketo と kintoneを上記の内容で連携をしています
・7/30にkintoneにIP制限を掛け、VPNに繋がないとkintoneに接続できない仕様にしました。この作業でWEBフックが機能しなくなっています
・以前も、IP制限を掛けていたのですが、その際は問題ありませんでした。
（以前はIPを掛けていて、一時IP制限をなくし、再度IP制限をかけ直しています）
【相談内容】
IP制限を掛けながら、Marketo、kintone連携をする方法はございますでしょうか？
システムへの基礎的な知識がなく教職ですが、システム部門にMarketoからのアクセスを許可してもらう？
WEBフックの記述を変える？など解決方法があればご教示いただけますでしょうか？
ご確認の程、宜しくお願い致します。
→2021/08/02 12:14更新。
すみません、kintone側でMarketoのIPを設定し本件解決いたしました。お手数をおかけしました…
K.Furusho 様
お世話になっております。cybozu developer network 運営局です。
>kintone側でMarketoのIPを設定し本件解決いたしました。
無事に解決できてよかったです。引き続きご活用いただけますと幸いです。
cybozu Development team 様
お世話になっております。いつも参考にさせていただいております。
1点質問させてください。
本ページ半ばの
kintone設定（サンプルコード・JavaScript / CSSカスタマイズ設定）の解説ですが、
こちらは、
「kintoneからMarketoへの情報連携」のために必要な設定という
認識で合っているでしょうか？
この度、
「Marketoからkintoneへの情報連携」のみを予定しているのですが、
その場合、上記の設定は不要でしょうか？
※Marketoフォームの入力内容がkintoneに反映されるまでがゴール。
ご教示くださいます様、宜しくお願い申し上げます。
古賀裕章 様
お世話になっております。cybozu developer network 事務局です。
ご認識の通り Marketo から kintone への情報連携の場合は、kintone設定セクションのサンプルコードおよびJavaScript / CSS の設定は不要です。
記事内の以下のセクションで「マルケト新規顧客作成 → kintoneレコード追加」の動作をご確認いただけます。
https://developer.cybozu.io/hc/ja/articles/360016485671#step6
cybozu Development team 様
ご回答いただきありがとうございました。
助かりました。
引き続きよろしくお願いいたします。