SendGridと連携して顧客にマーケティングメールを送るZendeskアプリを作ってみた

Transcript

1. SendGridと連携して顧客に マーケティングメールを送る Zendeskアプリを作ってみた 2023/8/21 産業支援グループ　ゲームソリューション部 入井 啓太　山本 統星
2. 概要 2 Zendeskで管理している顧客に対して、SendGridのEmail APIを使用してメールを送信す るZendeskアプリを開発し、その仕組みとできることについて解説します。 • 本セッションで話すこと ZendeskアプリとSendGridのEmail APIの設定と使用方法 • 本セッションで話さないこと Zendeskの細かな機能説明 SendGridの細かな機能説明
3. 自己紹介 3 入井　啓太（Irii Keita） 所属：産業支援グループ　ゲームソリューション部 入社：2022年10月 趣味：ゲーム、猫、漫画 山本　統星（Yamamoto Subaru） 所属：産業支援グループ　ゲームソリューション部 入社：2022年9月 趣味：モンスト、漫画
4. Zendeskって何？ 4 • Zendesk Support • Zendesk Guide • Zendesk Explore • Zendesk Talk • Zendesk Chat チケットというシステムで、問い合わせ対応 自動化や他製品との連携など様々なカスタマイズが可能 操作がシンプルで簡単
5. Zendesk Suite全体のイメージ 5 ・・・ オムニチャネル FAQサイト お客様 お客様 他ツールと連携 （Slackなど） 自社 問い合わせの データを可視化 オペレーターとの コンタクト チャット ボット チケット オペレーター エンジニア 自己解決 Zendesk • オペレーターの作業効率向上 • オムニチャネルで幅広く対応 • 課題解決のためのデータの可視化
6. SendGridって何？ 6 メール配信サービス 手間とコストがかかるメールサーバの構築は不要 アカウントを発行したら即日メールを送信できる メールの到達性を高める様々な機能が充実
7. 一斉送信の必要性 7 個別にやり取り 複数とやり取り 一斉送信は 　⇒同じ内容のメールを同時に送信できる 　⇒１度送信できるためミスが減らせる 同じ内容を多数に送りたい時 一人ひとりに送っては大変な手 間と時間とミスが発生する
8. Zendeskだけではメールを一斉送信できない 8 Zendesk Suite だけではできない ⇒　組み合わせるアプリや製品によって一長一短 他に何が必要？ 実現するまでに どのくらい時間 かかる？ 操作は簡単？ 費用は どのくらい？
9. Zendeskでメールを一斉送信をする方法 9 • Zendeskアプリの利用 • Zendesk Sellとの連携 • SendGridとの連携 ⇒それぞれメリットとデメリットがある どんな方法がある？ ？ 実現する３つのパターン
10. メリットとデメリット 10 SendGridとの連携 Zendesk Sellとの連携 Zendeskアプリとの連携 （Proactive Campaigns） メリット ・操作が簡単 ・メールの到達性が高い ・一度に送信できる数が多い ・メールを開いた数が既読マー クで分かる ・Supportの操作と近い ・Zendeskのプラットフォーム上 でそのまま実行できる ・導入までが速い デメリット ・ZendeskとSendGrid両方で コストがかかる ・アプリの作成が必要 ・SupportからSellへ顧客情報 を送る手間がかかる ・一番下のプラン（Zendesk Sell Team）ではできない ・一度に送れる数が少ない （24時間以内に300通/1ユー ザー） ・プランによって一度に 1000通 までしか送れない ・複雑なメールが送れない
11. 実現したいことの流れ 11 Zendesk SendGrid 一斉送信 顧客情報一覧 　　TEL:・・・ 　　mail:・・・ 　　TEL:・・・ 　　mail:・・・ 　　TEL:・・・ 　　mail:・・・ 　　TEL:・・・ 　　mail:・・・ 宛先 　⇒　Zendeskの顧客一覧 一斉送信のメール作成 Zendeskアプリ API 顧客情報
12. Zendeskアプリの開発について 12 Zendesk画面に追加できる拡張機能の開発 • HTML, JavaScript, CSSで書かれている • Zendeskのiframeタグ内で実行される アプリは、チケットサイドバーやナビ ゲーションバーなど、Zendeskの様々 な場所で実行できる
13. アプリ開発に使用するツール 13 • ZCLI ◦ Node.js環境のコマンドラインツール ◦ ビルド、テスト、デプロイなどが実行できる • ZAF ◦ Zendeskリソースへのアクセス機能を提供 ◦ SDK経由で操作ができる
14. ZCLIのコマンド例 14 zcli apps:new • プロジェクト初期ファイル生成 • オプションによりReactプロジェクトも作成可能 zcli apps:server • ローカルでの開発中アプリの実行 • アプリの操作自体はZendesk上で行う zcli apps:create • アプリのビルドとZendesk環境へのデプロイ
15. プロジェクトのTypeScript化 15 ZCLIで生成されるReactプロジェクトは生のJavaScript ある程度複雑なアプリを型無しでの開発はつらい……
16. プロジェクトのTypeScript化 16 以下の対応によってTypeScript化 • npmでTS関係パッケージインストール • tsconfig作成 • webpack設定変更 ◦ Babelでトランスパイル • ついでにESLint, Prettierも導入 • 既存コードのTypeScript対応 ◦ アプリの起動部分はJSのまま ◦ ZAF Clientもany型使用で妥協
17. 今回のアプリの全体構成 17 Reactコンポーネント Container UserTable MailInput app.js （アプリの起点） メール送信API実行関数 顧客データ取得関数 （ZAF活用） メール本文テキスト 選択した 顧客IDリスト
18. コード紹介 - Zendeskの顧客情報取得 18 export const GetEndUsers = async (client: any) => { const options = { url: "/api/v2/users.json", type: "GET", autoRetry: false, data: { role: "end-user", }, }; const result = await client.request(options); return result.users.map((user: any) => ({ id: user.id, name: user.name, email: user.email, })); }; ZAF経由でZendesk APIに接続し、顧 客データを取得 取得した顧客データから必要なプロパ ティのみ取得
19. コード紹介 - SendGridのAPI呼び出し 19 export const sendEmailBySendGrid = async ( client: any, emails: string[], text: string ) => { const options = { url: "https://api.sendgrid.com/v3/mail/send", type: "POST", headers: { Authorization: "Bearer {{setting.sendgridApiKey}}", }, contentType: "application/json", data: （次ページで解説）, secure: true, }; const res = await client.request(options); }; 引数として、宛先アドレスの配列とメー ル本文文字列受取り ZAFの機能でZendesk外部の SendGrid API呼び出し
20. コード紹介 - SendGridのAPI呼び出し 20 data: JSON.stringify({ personalizations: [ { to: emails.map((email) => ({email})), subject: "一斉送信テストメール", }, ], from: { email: "irii.keita@classmethod.jp", }, content: [ { type: "text/plain", value: text, }, ], }), 宛先アドレス指定 メールタイトル指定 送信元アドレス指定 メール本文情報指定
21. 実際の画面でやってみる 21
22. まとめ 22 Zendeskで一斉送信を実現する方法 • Zendesk Support ✖ SendGrid（今回採用） ◦ 簡単な操作で一斉送信ができる ◦ アプリ作成が手間だが、一度作れば後は簡単 • Zendesk アプリ • Zendesk Sell