当涉及到消息应用程序时,阅读收据是一个常见的功能,可以让你知道你的收件人是否已经阅读了你的信息。对于电子邮件应用程序来说,这种功能是非常不常见的;然而,当发送营销和特别重要的电子邮件时,知道并跟踪你的收件人是否打开并阅读了你的电子邮件有时是至关重要的。
当使用Twilio SendGrid时,通过Event Webhooks可以无缝跟踪电子邮件的参与情况。事件Webhooks不仅可以跟踪你的电子邮件的交付状态,而且还可以跟踪参与事件,如电子邮件是否被打开或电子邮件中的链接是否被点击。将电子邮件的打开和点击追踪与Twilio的可编程短信API配对,将确保你能及时了解重要电子邮件的状态。
在本教程中,你将学习如何使用Twilio SendGrid、Twilio Programmable SMS和Node.js来跟踪和发送邮件的打开和点击事件的短信提示。
配置SendGrid
为了开始工作,你需要对SendGrid做两件事。验证你的发送者身份,并生成你的API密钥。
验证你的发送者身份
SendGrid客户需要验证他们的发送者身份,以确保他们拥有将要使用的电子邮件地址。发送者身份代表你的 "发件人 "电子邮件地址--你的收件人看到的你的电子邮件的发件人地址。
建议完成域名认证以验证你的发件人身份,但为了加快本教程的进度,你将完成单发件人验证,这是用于测试的。
登录SendGrid,前往左侧的设置标签。点击下拉菜单并点击 "发件人认证"。

在 "发件人身份"部分,点击 "验证单一发件人"按钮,并在弹出的表格中填写你的信息。

表格填写完毕后,点击蓝色的 "创建 "按钮,你会在收件箱中收到一封要求你验证你的电子邮件地址的邮件。打开该邮件并点击验证单一发件人 按钮 ,这将使你回到SendGrid,让你知道你的电子邮件已经准备好使用。
生成你的API密钥
在你的SendGrid仪表板上,通过前往左侧的设置标签并点击API密钥,进入API**密钥** 部分:

点击右上方的蓝色 "创建API密钥"按钮,会出现一个表格。

输入你想要的API密钥的任何名称,然后点击蓝色的创建和查看按钮。复制你的API密钥并将其粘贴到一个空的文本文件中,这样你就可以在以后使用它。
建立你的Node.js应用程序
现在你已经验证了你的电子邮件地址,并且已经从SendGrid获得了你的API密钥,让我们开始构建应用程序。
在你的终端或命令提示符中,导航到你喜欢的目录,并输入以下命令来创建你的项目:
mkdir email-tracker
cd email-tracker
npm init -y
这些命令将创建你的项目目录,并通过创建package.json文件来构建你的Node应用程序,该文件将包含你项目的元数据和包的依赖性。
接下来,你需要安装四个Node模块。SendGrid、Twilio、Express和dotenv。SendGrid节点辅助库将被用来发送你的电子邮件。Twilio辅助库将用于使用你的Twilio号码来发送短信警报。Express将监听和处理传入的SendGrid事件webhooks。 dotenv将被用来存储环境变量。
在你的终端输入以下命令来安装这些依赖:
npm i @sendgrid/mail twilio express dotenv
对于环境变量,在email-tracker目录下创建一个名为*.env*的文件。使用你喜欢的代码文本编辑器,将以下几行放入其中,同时将XXXXXX 占位符替换为其各自的值:
SENDGRID_API_KEY=XXXXXX
TWILIO_ACCOUNT_SID=XXXXXX
TWILIO_AUTH_TOKEN=XXXXXX
你可以在你的Twilio控制台找到你的Twilio账户SID和Auth Token,如下所示:

一旦你的SendGrid API密钥、Twilio账户SID和Auth Token被添加,请保存该文件。
处理传入的SendGrid打开和点击事件
当SendGrid或电子邮件服务提供商通过向选定的URL发送POST 请求来处理你的电子邮件时,SendGrid事件Webhooks会通知你发生的事件。
事件可以分为两种类型:交付和参与。交付事件让你知道电子邮件交付给收件人的状态。参与事件让你知道收件人是如何与电子邮件互动的。要查看每个事件和有关SendGrid事件Webhooks的更多信息,请查看文档。事件Webhook参考。
在本教程中,我们将专注于参与事件,特别是如果一封邮件被打开或收件人点击了邮件中的链接。
在你的项目目录中创建一个名为index.js的文件。这个文件将使用Express来启动一个本地服务器,它将处理来自SendGrid的所有传入的POST 请求,并将通过短信通知你是否发生了打开或点击事件。
打开index.js并输入以下代码:
const express = require('express');
require('dotenv').config();
const client = require('twilio')(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);
const app = express();
app.use(express.json());
这段代码将初始化之前安装的所有依赖项。
下一步是建立POST 请求处理程序,它将监听和处理传入的事件。在index.js 中,在你刚才输入的代码下面放置以下内容:
app.post('/event', (req, res) => {
const receivedEvents = req.body;
for(const receivedEvent of receivedEvents) {
if(receivedEvent.event == 'open' || receivedEvent.event == 'click'){
sendEmailEventSMS(receivedEvent)
}
}
return res.status(200).send();
});
app.listen(3000, console.log('Express app listening on port 3000.'));
这段代码将监听对/event 路由的请求,并将请求正文的内容解析为receivedEvents 变量。它将循环浏览receivedEvents 中的每个事件,如果该事件是open 或click ,它将执行sendEmailEventSMS() 函数,该函数将把该事件作为短信发送到你的电话号码。
代码块中的最后一点将启动服务器,并将监听3000端口的请求。
这个文件的最后一块代码将是sendEmailSMS() 函数。将以下内容放在POST 请求处理程序的下面,同时将TWILIO_NUMBER 和YOUR_NUMBER 占位符替换为各自的值:
function sendEmailEventSMS(event) {
const recipient = event.email;
const categoryString = event.category ? ` '${event.category[0]}'` : '';
const eventType = event.event;
let message = '';
if(eventType == 'open') {
message = `Your${categoryString} email has been opened by ${recipient}.`
}
else if(eventType == 'click') {
message = `The link in your${categoryString} email has been clicked by ${recipient}.`
}
client.messages
.create({
body: message,
from: 'TWILIO_NUMBER',
to: 'YOUR_NUMBER'
})
.then(message => console.log('Message Sent! ID: ' + message.sid));
}
这个函数接收event 参数,并使用你的Twilio号码向你的号码发送短信,通知你该事件。由SendGrid提供的event 对象可以包括一个类别属性,指定电子邮件被标记的类别。类别可以被添加到SendGrid的电子邮件中,以帮助组织和分组你的电子邮件。事件类型、类别(如果指定的话)以及电子邮件的收件人将被用来创建将被发送到你的号码上的message 。
运行服务器并配置网络钩子到SendGrid
现在你的webhook已经建成,让我们运行它并将它连接到SendGrid,这样它就可以将所有的事件路由到你的webhook。回到你的终端,运行以下命令:
node index.js
这个命令将运行index.js文件,它将在你的计算机的3000端口上启动一个本地Express服务器。由于这台服务器不能公开访问互联网,ngrok将被用来在ngrok.io doman上生成一个可公开访问的URL,该URL将把所有传入的请求传输到你的本地服务器。
为了防止滥用,ngrok最近增加了一个2小时的会话过期时间。这意味着公开访问的URL和隧道将在2小时后停止工作。你可以通过注册一个免费的ngrok账户绕过这个限制。
对于生产应用程序,建议将你的Node.js应用程序托管在云服务器上,以避免维护运行时间,并确保你的应用程序全天候运行。
让你的服务器运行,在终端中打开一个新标签。导航到你的项目目录,在终端上输入以下命令:
ngrok http 3000
然后你的终端将看起来像下面这样:

你会看到ngrok已经生成了转发URLs到你的本地服务器的3000端口。复制其中一个URL--建议使用https URL,因为它是加密的--因为需要将一个URL插入你的SendGrid账户:
回到你的SendGrid仪表盘,进入**邮件设置** 部分,可以在左侧标签的设置下拉菜单中找到。

在 "事件设置"部分,点击 "事件网络勾选",这将带你进入菜单以完成你的配置。在HTTP Post URL文本框中输入你的转发URL,然后是*/event*(见下面的URL应该是什么样子的)。在你的转发URL中添加*/event将把所有来自SendGrid的webhook事件路由到index.js*文件中建立的POST 请求处理器。在 "参与数据"部分,点击 "打开"和 " 点击"复选框。这将只对这两个事件启用webhook事件跟踪。最后,点击启用,你的webhook设置菜单将如下所示:

点击保存。你的应用程序现在已经准备好了,正在监听打开和点击事件。让我们来测试一下!
测试它
为了测试我们的应用程序,需要用SendGrid发送一封电子邮件。本教程的一个完美用例是发送带有RSVP链接的邀请。每当你的收件人打开你的邀请函或点击邮件中的RSVP链接时,你就会得到通知。
用SendGrid发送邀请函
回到你的文本编辑器,在你的项目目录中创建一个名为invitation.js的文件,并在该文件中放置以下代码:
const sgMail = require('@sendgrid/mail');
require('dotenv').config();
const rsvpUrl = 'https://example.com/invitation'
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
to: 'RECIPIENT_EMAIL',
From: 'YOUR_EMAIL', // Your verified sender email
subject: 'RSVP for our event!',
text: 'Hello!\nYou are invited to our grand event!',
html: `<strong>Hello!\nYou are invited to our grand event!</strong><br><br><a href="${rsvpUrl}">RSVP here!</a>`,
category: ['Invitation']
};
sgMail.send(msg);
用邀请函将被发送的电子邮件地址替换RECIPIENT_EMAIL ;这应该是一个你可以访问的电子邮件,这样你就可以打开它。用本教程第一部分中的验证过的发件人电子邮件替换YOUR_EMAIL 。
这个文件的前四行初始化了SendGrid包和你的环境变量。它还保存了你的RSVP URL链接--为了测试目的,我们使用了一个假的例子链接。 [https://example.com/invitation](https://example.com/invitation%60).最后一大块代码创建了一封电子邮件,其中的类别是 "邀请",链接被嵌入电子邮件的信息内容中。最后,它将使用SendGrid API的**邮件发送** 端点来发送该邮件。
现在回到你的终端,在一个新的标签中输入以下命令来发送电子邮件:
node invitation.js
前往发送电子邮件的电子邮件地址,打开电子邮件,然后点击RSVP链接:

过一会儿,你的手机应该会收到一个短信提醒,说你刚刚打开了邀请邮件并点击了RSVP链接:

接下来是什么?
保持对重要电子邮件的关注,为你已经很长的待办事项清单增加了另一项内容。SendGrid的事件Webhooks与Twilio的可编程短信相结合,可以立即让你知道你的收件人何时与你的重要邮件进行了互动。有了SendGrid和Twilio,你就能在跟踪电子邮件的参与方面领先一步。
那么,下一步是什么?你可以扩展POST 请求监听器来处理所有其他的SendGridwebhook事件,例如通知你邮件是否被阻止或被发送到垃圾邮件中。如果你想发送一封类似于邀请函的邮件,但又想批量发送,可以利用个性化(Personalizations)来为你的邮件添加多个收件人。关于用SendGrid批量发送电子邮件的更多信息,请查看Twilio的博客。使用Twilio SendGrid和Node.js的3种方式发送群发邮件。
祝你建设愉快!