SendGridと連携して顧客に マーケティングメールを送る Zendeskアプリを作ってみた 2023/8/21 産業支援グループ　ゲームソリューション部 入井 啓太　山本 統星

概要 2 Zendeskで管理している顧客に対して、SendGridのEmail APIを使用してメールを送信す るZendeskアプリを開発し、その仕組みとできることについて解説します。 ● 本セッションで話すこと ZendeskアプリとSendGridのEmail APIの設定と使用方法 ● 本セッションで話さないこと Zendeskの細かな機能説明 SendGridの細かな機能説明

自己紹介 3 入井　啓太（Irii Keita） 所属：産業支援グループ　ゲームソリューション部 入社：2022年10月 趣味：ゲーム、猫、漫画 山本　統星（Yamamoto Subaru） 所属：産業支援グループ　ゲームソリューション部 入社：2022年9月 趣味：モンスト、漫画

Zendeskって何？ 4 ● Zendesk Support ● Zendesk Guide ● Zendesk Explore ● Zendesk Talk ● Zendesk Chat チケットというシステムで、問い合わせ対応 自動化や他製品との連携など様々なカスタマイズが可能 操作がシンプルで簡単

Zendesk Suite全体のイメージ 5 ・・・ オムニチャネル FAQサイト お客様 お客様 他ツールと連携 （Slackなど） 自社 問い合わせの データを可視化 オペレーターとの コンタクト チャット ボット チケット オペレーター エンジニア 自己解決 Zendesk ● オペレーターの作業効率向上 ● オムニチャネルで幅広く対応 ● 課題解決のためのデータの可視化

SendGridって何？ 6 メール配信サービス 手間とコストがかかるメールサーバの構築は不要 アカウントを発行したら即日メールを送信できる メールの到達性を高める様々な機能が充実

一斉送信の必要性 7 個別にやり取り 複数とやり取り 一斉送信は 　⇒同じ内容のメールを同時に送信できる 　⇒１度送信できるためミスが減らせる 同じ内容を多数に送りたい時 一人ひとりに送っては大変な手 間と時間とミスが発生する

Zendeskだけではメールを一斉送信できない 8 Zendesk Suite だけではできない ⇒　組み合わせるアプリや製品によって一長一短 他に何が必要？ 実現するまでに どのくらい時間 かかる？ 操作は簡単？ 費用は どのくらい？

Zendeskでメールを一斉送信をする方法 9 ● Zendeskアプリの利用 ● Zendesk Sellとの連携 ● SendGridとの連携 ⇒それぞれメリットとデメリットがある どんな方法がある？ ？ 実現する３つのパターン

メリットとデメリット 10 SendGridとの連携 Zendesk Sellとの連携 Zendeskアプリとの連携 （Proactive Campaigns） メリット ・操作が簡単 ・メールの到達性が高い ・一度に送信できる数が多い ・メールを開いた数が既読マー クで分かる ・Supportの操作と近い ・Zendeskのプラットフォーム上 でそのまま実行できる ・導入までが速い デメリット ・ZendeskとSendGrid両方で コストがかかる ・アプリの作成が必要 ・SupportからSellへ顧客情報 を送る手間がかかる ・一番下のプラン（Zendesk Sell Team）ではできない ・一度に送れる数が少ない （24時間以内に300通/1ユー ザー） ・プランによって一度に 1000通 までしか送れない ・複雑なメールが送れない

実現したいことの流れ 11 Zendesk SendGrid 一斉送信 顧客情報一覧 　　TEL:・・・ 　　mail:・・・ 　　TEL:・・・ 　　mail:・・・ 　　TEL:・・・ 　　mail:・・・ 　　TEL:・・・ 　　mail:・・・ 宛先 　⇒　Zendeskの顧客一覧 一斉送信のメール作成 Zendeskアプリ API 顧客情報

Zendeskアプリの開発について 12 Zendesk画面に追加できる拡張機能の開発 ● HTML, JavaScript, CSSで書かれている ● Zendeskのiframeタグ内で実行される アプリは、チケットサイドバーやナビ ゲーションバーなど、Zendeskの様々 な場所で実行できる

アプリ開発に使用するツール 13 ● ZCLI ○ Node.js環境のコマンドラインツール ○ ビルド、テスト、デプロイなどが実行できる ● ZAF ○ Zendeskリソースへのアクセス機能を提供 ○ SDK経由で操作ができる

ZCLIのコマンド例 14 zcli apps:new ● プロジェクト初期ファイル生成 ● オプションによりReactプロジェクトも作成可能 zcli apps:server ● ローカルでの開発中アプリの実行 ● アプリの操作自体はZendesk上で行う zcli apps:create ● アプリのビルドとZendesk環境へのデプロイ

プロジェクトのTypeScript化 15 ZCLIで生成されるReactプロジェクトは生のJavaScript ある程度複雑なアプリを型無しでの開発はつらい……

プロジェクトのTypeScript化 16 以下の対応によってTypeScript化 ● npmでTS関係パッケージインストール ● tsconfig作成 ● webpack設定変更 ○ Babelでトランスパイル ● ついでにESLint, Prettierも導入 ● 既存コードのTypeScript対応 ○ アプリの起動部分はJSのまま ○ ZAF Clientもany型使用で妥協

今回のアプリの全体構成 17 Reactコンポーネント Container UserTable MailInput app.js （アプリの起点） メール送信API実行関数 顧客データ取得関数 （ZAF活用） メール本文テキスト 選択した 顧客IDリスト

コード紹介 - 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に接続し、顧 客データを取得 取得した顧客データから必要なプロパ ティのみ取得

コード紹介 - 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呼び出し

コード紹介 - SendGridのAPI呼び出し 20 data: JSON.stringify({ personalizations: [ { to: emails.map((email) => ({email})), subject: "一斉送信テストメール", }, ], from: { email: "[email protected]", }, content: [ { type: "text/plain", value: text, }, ], }), 宛先アドレス指定 メールタイトル指定 送信元アドレス指定 メール本文情報指定

実際の画面でやってみる 21

まとめ 22 Zendeskで一斉送信を実現する方法 ● Zendesk Support ✖ SendGrid（今回採用） ○ 簡単な操作で一斉送信ができる ○ アプリ作成が手間だが、一度作れば後は簡単 ● Zendesk アプリ ● Zendesk Sell

No content