初めに

株式会社エアークローゼットでエンジニアをしているCloudと申します。

この記事はエアークローゼットアドベントカレンダー2022の14日目の記事になります。

今回はHubspotとSendgridの連携方法を紹介したいと思います。
メールを管理する時、役に立つかもしれないので、ぜひ最後までご覧ください。

現状

現在エアークローゼットはメールサーバとしてsendgridを利用しています。
ただsendgridの送信履歴ではメールの本文の確認ができないため、今回送信したメール内容をhubspotに連携させることになりました。

本題に入る前に、hubspotとSendgridについてちょっと説明します。

概念

Hubspot

Hubspot（ハブスポット）とは、2005年にアメリカで開発されたインバウンドマーケティングのプラットフォームです。
Hubspotで顧客との関係性を管理し、ユーザーデータも管理します。特に、メールを送信したり、メールログが確認できるので、お客様管理課題が解決できます。
以下の図を見たら、詳しく理解できます。

Sengrid

SendGridは全世界で利用されているメール配信サービスです。クラウドサービスのためアカウントを作成するだけで即日メールを送信でき、面倒でコストのかかるメールサーバの構築は不要です。

実装

現在Sendgridのメールテンプレート機能を使ってメール本文を生成していますが、SendgridのAPIではメール送信がセットになっており、メール本文のみを取得することができません。
そのため、今回はSendgridからメールテンプレート自体を取得し、それをSendgridと同様の方法でコンパイルすることでメール本文を生成することにしました。
Sendgridのメールテンプレートはhandlebarsのため、handlebarsを使うことで同じメール本文を作ることができます。
メールテンプレートの例えば：

<html>
  <head>
    <title>エアークローゼット</title>
  </head>
  <body>
   {{#each dataTemplates}}
     {{ this.name }}様
     {{ this.desc }}<br/>
     {{#equals this.name "c"}}
     {{/equals}}
   {{/each}}
  </body>
</html>

HubSpotへの連携

HubSpotに連携を行えばその他のお客様のやり取りと合わせてシステムメールの履歴閲覧も行うことができるため、SendGridから送信しているメール本文をHubSpotのカスタムタイムラインイベントAPIを利用して登録します。

イベントを作成するNode.jsのコード：

try {
  const apiResponse = await hubspotClient.crm.timeline.templatesApi.create(appId, TimelineEventTemplateCreateRequest);
  console.log(JSON.stringify(apiResponse.body, null, 2));
} catch (e) {
  e.message === 'HTTP request failed'
    ? console.error(JSON.stringify(e.response, null, 2))
    : console.error(e)
}

Handlebars

Handlebars.jsはMustacheのスーパーセットとして誕生したJavaScriptで使用されるテンプレートエンジンです。シンプルで分かりやすく軽量であることからストレスなく使用できるということで人気を集めています。またクライアントサーバ、サーバサイドの両方で対応しているという特徴があります。
Handlebarsの使い方

// Handlebars.jsを読み込む
// jQueryとかライブラリを読み込む

const values = {
  title: 'Hello Handlebars!',
  img: {
    url: 'http://example.com',
    alt: 'Something..'
  },
  text: 'My first Handlebars!'
};
const template = Handlebars.compile($('#input').html());

$('#output').html(template(values));

解決

最初はHubspot側の設定を行います。
次にメール本文を取得する処理も追加します。
最後にお客様にメール送信する時、タイムラインイベントを通じてhubspotに登録する処理をコードに追加します。

そうすることでSendGridとHubSpotの連携をすることができました。

注意

Hubspotとhandlebarsのライブラリを使うためノードバージョンはv14.13.0以上必要です。
Hubspotを送信する時、TEN_SECOND_ROLLINGエラーが発生する可能性があります。

あとがき

最後までご覧いただきありがとうございました。
エアークローゼット Advent Calendar 2022はまだ続きますので、興味あれば、ぜひ他のエンジニア、PMの記事もご覧いただければと思います。

HubspotとSendgrid連携話

初めに

現状

概念

Hubspot

Sengrid

実装

HubSpotへの連携

Handlebars

解決

注意

あとがき