使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

NewFrontendWeekly發表於2018-05-21

基於平時愛好關注各類技術社群及眾多技術微訊號,經常看到很多有用有意思的內容,朋友總是讓分享出來,索性就抽空做了個郵件訂閱頁面( http://nextfe.com ),目前每週發一次,內容偏向於前端但不限於此範圍,所以取名《新前端週刊/ New frontend Weekly 》。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

郵件推送使用到的服務商是功能強大的 MailChimp ,良好的口碑以及一定量的免費額度,加上便捷的設計模版,並且推送後還有資料可以查詢,非常適合初期訂閱使用者量不大的情況下使用。 ( MailChimp 免費階段支援每月最多 2,000 位訂閱者和 12,000 封電子郵件,具體收費價格可參考 https://mailchimp.com/pricing/ )

下面分享下具體使用方法:

  • 登陸註冊

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程
使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

登陸官網:https://mailchimp.com/ ,點選「Sign Up Free」進行賬號註冊,設定完成後點選「Get Started ! 」即可。(注意:註冊時密碼需要包含一大寫、一小寫、一個特殊符號、一個數字、至少 8 位)

  • 建立郵件模版

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

我通常習慣先設定郵件模版內容,點選左上方「 Templates 」進入設定郵件模版頁面,點選「Greate Template」建立模版,根據需要可對現成的模版進行修改調整,模版效果隨時可預覽檢查,全部完成後可以進行測試傳送。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

  • 建立傳送列表

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

左上方「 List 」- 「 Greate List 」建立一個新的郵箱列表,「 Import contacts 」匯入傳送新增傳送郵箱列表,列表支援 csv、xls、xlsx等檔案批量上傳。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

建立 List name 列表名稱(此部分僅展示給建立人)、發件地址(此處會展示在使用者收件中,可以不是註冊 Mailchimp 賬號的郵箱) 、發件人名稱,點選儲存。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

每個步驟操作完點選「 Next 」或 「 Save 」往下繼續走流程即可。

  • 建立傳送專案

「 Campaigns 」- 「 Greate Campaigns 」- 「 Greate an Email 」建立新的傳送專案。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程
使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

建立內容名稱(此部分僅限建立者可見)- 「 Begin 」儲存完成。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

編輯郵件設定,「 To 」選擇設定的需要推送的郵箱列表,「 From 」設定傳送人名稱以及郵箱,「 Subject 」此處設定傳送郵件的標題以及引導語,「 Content 」- 「 Thems 」選擇編輯好的郵件模版,進入模版編輯頁確認無誤儲存關閉。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

全部設定完成後,,傳送最後一次測試預覽,檢查後無問題點選 「 Send 」完成傳送。

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

  • 資料分析

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

「 Reports 」中可檢視傳送資料包告,「 List 」列表中還可以詳細查詢新增訂閱資料、退訂人數等。

  • 落地頁開發

此次還使用了 MailChimp 提供的 API 開發了落地頁,主要接入郵件內容、調取邏輯及訂閱功能。

獲取郵件的原型,使用的 api /3.0/campaigns ,查詢條件設定的事倒 序 、狀態已釋出;

根據郵件的原型id,使用 api /3.0// campaigns/${id}/content ,獲取郵件的內容,

根據以上得到的內容,再進行解析即可獲取想要的資料。落地頁地址: http://nextfe.com

使用 MailChimp 傳送郵件 + 調取 API 開發落地頁過程

以上就是自己使用 MailChimp 的流水賬記錄,希望給想了解的小夥伴一點參考,感興趣的開發人員可以進行訂閱,另外以上描述有誤的地方也歡迎大佬留言指正。

相關文章