基于Mailchimp实现邮件订阅功能

前段时间,给自己的小站添加的订阅功能,主要是通过 Mailchimp 提供的 Signup forms 和 Landing page 做的。MailChimp 是一款提供邮件营销服务的老牌产品了,很多大企业都在用,普通用户每月可享受 10000 封免费邮件发送服务,可增加用户总数为 2000 个,具体的免费额度可在个人中心 –> Account 下进行查看。这里整理了部分有关于 Mailchimp 邮件订阅这方面的个人 Demo,供大家参考,本站的邮件订阅功能可以点击 这里 进行体验。

博客的话一般是 RSS 订阅,我们可以将 RSS 内容通过 Mailchimp 以邮件的形式发送给订阅者,hexo 博客可使用 hexo-generator-feed 来实现 RSS(很早前就给博客加了 RSS 功能,却不知道干嘛用,捣鼓完 MailChimp 总算是明白了,尴尬 -.-!)。

使用 Mailchimp 前的 注册 步骤,这里略过,其中可能会涉及到 Google reCAPTCHA 人机认证,推荐使用 Chrome 操作,以下是我目前正在使用的订阅界面和邮件模板。

订阅界面

目前使用的两种订阅方式分别为 Signup forms 和 Landing page。

Signup forms

注册完成后,点击上方横栏 Audience(受众),以前叫 List,所以看没图的老博文会有点懵…按下图步骤找到 Signup forms

MKgpOf.jpg

点击后出现 4 种选择

MnZHtf.png

我主要使用的是第一种,做好订阅表单后,直接复制 Signup form URL,然后在博客里跳转到这个地址即可进行订阅。第二、三种也捣鼓过,不过需要在博客中嵌入部分代码,所以没细整。最后一种整合了第三方的平台:Wufoo、Squarespace,都没咋听说,就不整那么复杂了,这里主要介绍第一种 Form builder 的使用。

注意: Form builder 有不大好的一个地方,就是 Google reCAPTCHA 人机认证是必须的,不能去掉。PC 端通过 Chrome 之外的其它浏览器可能不能正常的完成订阅,移动端就更不能了。而 Embedded forms 和 Subscriber pop-up 的人机认证可以选择性去掉,在右上角的 help 搜索 reCAPTCHA 即可找到对应的文档。

MKuh26.jpg

  • Forms and response emails:可下拉设置订阅、取消订阅等信息
  • Build it:添加/删除表单的输入框、单选框等页面布局
  • Design it:设计背景色、间距、字体等样式
  • Translate it:翻译相关,自动翻译(可修改译文)不是很准确,建议不要开启
  • Add a field / Field settings:添加输入框、按钮等操作

修改后,具体的变动在下方会实时显示、自动保存,也可以访问 Signup form URL 中的链接查看效果,例如 这里,最终的效果修改到自己满意为止。邮件的发件人、主题等信息可以在 Audience –> Settings –> Audience name and campaign defaults 下进行设置。其它的如联系信息、网站地址,可以在同级别的 Required email footer content 下进行设置。

Landing page(推荐)

点击页面最上方横栏 Create –> Landing page,输入名称,选择 audience 后点击 begin,进入模板选择界面

MKGWjI.jpg

Mailchimp 提供了多款 Landing page ,点击红框中的按钮可以进行预览,选择自己喜欢的一款即可,比如我选择的是 Lead Generation(Wild Country),之后进入页面设计

MKUKeI.jpg

右侧有多种 Content 可选择,向左拖拽即可,右侧的 Design 可以设置对应的 page 、header 等布局和样式效果,操作与 Signup forms 类似

MKdUI0.jpg

点击左侧的元素,右侧即弹出相应的设置界面,比如我现在选择的是视频。Caption 下是富文本操作,style 页签也可设置字体大小、颜色等。Save & Close 后,可以点击右上角的 Preview 预览;点击右下角的 Save & Publish 即可发布这个 Landing page,访问其发布 URL 地址即可进行邮件订阅了,比如:这里

已保存的所有 audiences 信息,可点击横栏的 Campaigns 查看。有关 Landing page 的人机认证,可通过其关联的 audience 来设置关闭( Audience –> Settings –> Audience name and defaults ),不勾选 Enable reCAPTCHA 即可

MKcwJs.jpg

邮件模板

下边将讲述基于 Mailchimp 的 Automate(自动化)来实现自动发邮件功能,包括通过 Landing page 订阅后的欢迎邮件和网站 RSS 更新邮件。

欢迎邮件

前文的 Signup forms 在订阅成功后,订阅者也会收到一封欢迎邮件,具体的在 Form builder 的 Forms and response emails 下可以查看。这里说一下用 Automate 在订阅后自动发送欢迎邮件的功能,点击横栏 Automate –> Email,在弹出的页面选择 Welcome new subscribers,这里还有我们下面要用到的博客 RSS 更新邮件:Share blog updates

MKfPvn.jpg

填写 Campaign Name 和选择 audience,接下来就可以设置邮件主题、发件人等信息了,下方的 Send a Test Email 可以发测试邮件,不过数量是有限制的

MKh2TK.jpg

点击 Edit design 又来到了熟悉的界面,下面是我做的一个简易模板

Ml0rk9.jpg

关于里边的一些标签 *|IF:FNAME|*,可以在 help 里搜索查看具体的文档介绍。点右上角的 Preview and Test 可以预览和发测试邮件,点击右下角的 Save and Continue 跳转后,需要再点击右上角的 Start Sending 才是正式启用这个服务,具体的状态可以在 Campaigns 页面查看。

RSS 更新邮件

终于来到本文的重点了,基于 RSS 实现邮件订阅功能(前文也说过了,你的网站必须先实现 RSS 功能,这是前提)。点击横栏 Automate –> Email,在弹出的页面选择 Share blog updates,输入名称并选择 audience 之后进入 RSS feed 设置页

MQwwkR.jpg

如果是用 hexo-generator-feed 来实现的 RSS 功能,那么填写的 RSS feed URL 就是网站地址 + /atom.xml。发送频率可以设置成每天的某个时间点,参考下方的 FAQ:We’ll only send campaigns when there’s new content in your RSS feed,只要 RSS 有新内容就发通知邮件。某些文章的大佬好像对这个时间频率有点误解,以为每周/月写一篇文章,发送频率就设置为每周/月。要是那样的话,订阅者收到的邮件可能就有 N 天的时间延迟,如双方都能接受,这样设置当然没问题啦~!设置完成后,点击 Next 跳转到 Recipients 设置页

Recipients

这里可以设置发送给某些指定的订阅者,默认是全部。点击 Next 设置邮件主题、发件人等信息

MQcJeK.jpg

下一步是模板选择页,选择免费(没有 Upgrade To Use 提示)的即可,内容基本上能改成自己想要的效果,我选择的是第一个 Sell Products,点击下一步又来到熟悉的界面

MlrJfA.jpg

咱是 RSS 订阅,所以还需要加上部分 RSS 标签,具体的用法可在 help 中搜索 RSS Merge Tags 找到相应的说明文档。样式布局什么的,可在右上角的 Preview and Test 进行预览和发测试邮件。完成之后点击 Next,跳转到 Confirm 确认页

MQWZc9.jpg

点击右下方 Start RSS 即可开启这个服务,右上角的 Save and Exit 则是保存退出,然后回到指定的页面。所有的活动可以在 Campaigns 页面查看,包括发送状态、发送报告等等

MQfUxJ.jpg

MailChimp 的 Content Studio 还支持图片上传、在线剪辑、美化等操作,功能十分强大。

虽然说 MailChimp 不需要使用自己的域名就可以发送邮件,但是为了保证邮件不被判定为垃圾邮件,建议还是添加自己的域名并通过验证,具体的步骤可参考这篇文章

利用MailChimp建立RSS邮件订阅平台…

至此,订阅功能基本上就完成了,附上本站订阅地址,欢迎体验

订阅本站

另外,本站的公众号也会不定时更新干货内容,欢迎扫描网站左下角的二维码关注!

参考文章

利用MailChimp建立RSS邮件订阅平台…
最佳的MailChimp樣板來升級你的商業Email訂閱

本文标题:基于Mailchimp实现邮件订阅功能

文章作者:北宸

发布时间:2019年11月09日 - 17:39:37

最后更新:2019年11月12日 - 12:25:39

原始链接:https://www.liaofuzhan.com/posts/4068965437.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------