การสร้างวิดเจ็ตการสมัครสมาชิกด้วย Node.js

ฉันเพิ่งพัฒนาวิดเจ็ตการสมัครสมาชิกโอเพ่นซอร์สที่สร้างขึ้นโดยใช้ไลบรารี Node.js API ของ SendGrid คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับแรงจูงใจและความสามารถของโครงการได้ที่หน้า README ของที่เก็บ แม้ว่าจะไม่ใช่ไลบรารี SendGrid ที่ได้รับการสนับสนุนอย่างเป็นทางการ เป้าหมายคือการสร้างวิดเจ็ตที่ปรับใช้ได้ง่ายและยืดหยุ่นซึ่งลูกค้า SendGrid ทุกคนสามารถรวมไว้ในหน้า HTML ที่รวบรวมที่อยู่อีเมลของลูกค้าที่มีอยู่และผู้มีโอกาสเป็นลูกค้า และข้อมูลที่เป็นประโยชน์อื่นๆ เพื่อจัดเก็บภายในผู้ติดต่อของแคมเปญการตลาด . หลังจากที่ลูกค้าป้อนข้อมูลลงในแบบฟอร์มแล้ว พวกเขาจะได้รับอีเมลพร้อมลิงก์เพื่อยืนยันที่อยู่อีเมล และเมื่อคลิกลิงก์ ผู้รับจะถูกเพิ่มลงในรายชื่อผู้ติดต่อของลูกค้า SendGrid ที่ระบุ

นอกเหนือจากฟังก์ชันพื้นฐานแล้ว วิดเจ็ตยังสามารถ:

• เพิ่มผู้ใช้ในกลุ่มรายการเฉพาะ หากระบุไว้
• รวมฟิลด์ที่กำหนดเองในแบบฟอร์ม อินพุตจะถูกเก็บไว้กับผู้ติดต่อที่กำหนด
• ส่งอีเมลยืนยันพร้อมเทมเพลตอีเมลที่มีอยู่ หากระบุไว้

นี่เป็นโครงการที่น่าสนใจเพราะใช้ความสามารถและจุดปลาย API ของ SendGrid มากมาย ซึ่งรวมถึง:

• Mail ส่ง API
• ติดต่อ API
• เว็บฮุคเหตุการณ์
• เทมเพลตการทำธุรกรรม

โพสต์นี้จะกล่าวถึงกระบวนการสร้างวิดเจ็ตและกระบวนการทางความคิดบางอย่างที่เกี่ยวข้องกับการใช้งานและการออกแบบ

ภาพรวมการออกแบบวิดเจ็ต

วิดเจ็ตการสมัครสมาชิกทำงานโดยอนุญาตให้ลูกค้า SendGrid ปรับใช้แอปกับ Heroku โดยใช้ปุ่มปรับใช้ของ Heroku ในการสร้างวิดเจ็ตโดยใช้ปุ่มปรับใช้ ลูกค้า SendGrid จะต้องมีบัญชี Heroku (คุณสามารถสร้างบัญชีฟรีได้ที่นี่) อย่างไรก็ตาม ในทางทฤษฎี วิดเจ็ตสามารถปรับใช้กับผู้ให้บริการโฮสติ้งรายใดก็ได้ ลูกค้า SendGrid สามารถเปลี่ยนปลายทางซึ่งแบบฟอร์มที่กำหนดเองส่งคำขอ POST ไปยัง URL ของแอป Heroku ที่เพิ่งปรับใช้ใหม่ เมื่อผู้ใช้ส่งแบบฟอร์ม คำขอจะถูกประมวลผลโดยแอพที่โฮสต์บน Heroku

ตัวแอปเองเป็นแอปพลิเคชัน Node/Express พื้นฐานที่มีสองเส้นทางที่จัดการกระบวนการลงชื่อสมัครใช้ เส้นทาง ConfirmEmail จะส่งอีเมลพร้อมลิงก์เพื่อยืนยันที่อยู่อีเมลของผู้ใช้และใช้เทมเพลตธุรกรรมที่กำหนดเอง (หากระบุไว้) เส้นทางการ ลงทะเบียน จะเพิ่มผู้ใช้ลงในรายชื่อผู้ติดต่อของลูกค้า SendGrid และหากระบุไว้ จะเพิ่มผู้ใช้ไปยังเซ็กเมนต์รายการที่กำหนดเองด้วย เส้นทางการ ลงทะเบียน ยังจัดการฟิลด์ที่กำหนดเองที่ลูกค้า SendGrid เลือกที่จะรวมไว้ในแบบฟอร์มที่กำหนดเอง

ยืนยันเส้นทางอีเมล

เส้นทาง ConfirmEmail เป็นเพียงการโพสต์คำขอไปยังจุดสิ้นสุด v3/mail/send POST โดยใช้ไลบรารีตัวช่วย Node.js ของ SendGrid ในการตอบกลับที่ประสบความสำเร็จ ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าที่ขอให้ตรวจสอบกล่องขาเข้าสำหรับอีเมลยืนยัน เมื่อตอบกลับไม่สำเร็จ ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าที่ขอให้ป้อนที่อยู่อีเมลอีกครั้ง ตัวอย่างเช่น สิ่งนี้อาจเกิดขึ้นหากผู้ใช้ป้อนที่อยู่อีเมลที่ไม่ถูกต้อง

ฟังก์ชัน prepareEmail ส่งคืนอ็อบเจ็กต์ JSON ที่จะทำหน้าที่เป็นเนื้อหาของคำขอ API

กระบวนการสร้างวัตถุพื้นฐานนั้นค่อนข้างง่าย ในนั้นที่อยู่อีเมลของผู้รับจะถูกแทรกจากการส่งแบบฟอร์ม อย่างไรก็ตาม มีบางสิ่งที่น่าสนใจเกิดขึ้นในกระบวนการสร้างวัตถุ

อาร์กิวเมนต์ที่กำหนดเองขั้นพื้นฐาน

อาร์กิวเมนต์ที่กำหนดเองสองอาร์กิวเมนต์รวมอยู่ในการตั้งค่าส่วนบุคคล: 1) ประเภท ซึ่งตั้งค่าเป็น 'เลือกใช้' และ 2) time_sent ซึ่งตั้งค่าเป็นเวลาปัจจุบัน อาร์กิวเมนต์ที่กำหนดเองเหล่านี้จะถูกส่งต่อในส่วนหัวของอีเมล และจะใช้ในการพิจารณาว่าควรเพิ่มผู้ใช้ลงในรายการในกระบวนการยืนยันหรือไม่

รหัสเทมเพลต

หลังจากการสร้างออบเจ็กต์เริ่มต้น เราจะตรวจสอบว่าลูกค้า SendGrid เลือกใช้เทมเพลตที่กำหนดเองในไฟล์การตั้งค่าหรือไม่ และเพิ่มลงในออบเจกต์หากเป็นกรณีนี้ (null คือค่าเริ่มต้น) เทมเพลตที่กำหนดเองจะมีลำดับความสำคัญสูงกว่าข้อความอีเมลที่รวมอยู่ในเนื้อหา ดังนั้นหากปล่อย ID เทมเพลตเป็นค่าว่าง ข้อความจะมีค่าเริ่มต้นเป็นข้อความอีเมลที่ให้ไว้

แทรกการแทนที่ลิงก์

เรารวมการแทนที่สำหรับคำว่า insert_link สิ่งนี้จะเกี่ยวข้องก็ต่อเมื่อลูกค้า SendGrid เลือกใช้เทมเพลตธุรกรรม หากเป็นกรณีนี้ คำ insert_link จะถูกแทนที่ด้วยลิงก์จริงที่ใช้เพื่อยืนยันอีเมลของผู้ใช้และเปลี่ยนเส้นทางไปยังหน้าความสำเร็จที่เหมาะสม

การส่งแบบฟอร์มอินพุตเป็นอาร์กิวเมนต์ที่กำหนดเอง

สุดท้าย เราเพิ่มค่าที่ผู้ใช้ส่งไปยังเนื้อหาอีเมลเป็นอาร์กิวเมนต์ที่กำหนดเอง การส่งของผู้ใช้ปลายทางจะถูกส่งไปยังเส้นทาง ConfirmEmail เริ่มต้นเป็นเนื้อหาคำขอ ซึ่งเราจะส่งต่อไปยังฟังก์ชัน prepareEmail เป็นพารามิเตอร์ เนื้อหาคำขอมีอ็อบเจ็กต์ที่มีชุดของคีย์ คู่ค่าที่แสดงชื่อของอินพุตและค่าที่ผู้ใช้ส่งมา จากนั้นเราจะวนรอบคีย์อ็อบเจ็กต์โดยเพิ่มอาร์กิวเมนต์ที่กำหนดเองไปยังอีเมลสำหรับคีย์แต่ละคู่ คู่ค่า ค่าเหล่านี้จะถูกเพิ่มลงในข้อมูลติดต่อของผู้ใช้ในขั้นตอนการสร้างผู้ติดต่อ

เส้นทางการสมัคร

เส้นทางการสมัครถูกทริกเกอร์โดย webhook ของเหตุการณ์ที่ส่งคำขอ POST ทุกครั้งที่ผู้ใช้คลิกลิงก์ที่ให้ไว้ในอีเมลยืนยันที่ได้รับ เส้นทางนี้จำเป็นต้องดูแลบางรายการในกระบวนการสร้างผู้ติดต่อ เราต้องทำสิ่งต่อไปนี้:

• ตรวจสอบว่าแบบฟอร์มมีฟิลด์ที่กำหนดเองหรือไม่
• ตรวจสอบว่ามีฟิลด์แบบกำหนดเองอยู่ในบัญชีของลูกค้า SendGrid หรือไม่ และสร้างมันขึ้นมาหากไม่มีฟิลด์ดังกล่าว
• ตรวจสอบให้แน่ใจว่านี่คืออีเมลที่ เลือกรับ ตามที่ระบุโดยประเภทในกระบวนการสร้างอีเมล
• ตรวจสอบให้แน่ใจว่ามีการคลิกลิงก์ภายใน 24 ชั่วโมง
• สร้างผู้ติดต่อในบัญชีของลูกค้า SendGrid
• เพิ่มผู้ติดต่อใหม่ในส่วนของรายการเฉพาะหากมีการจัดเตรียมไว้

การจัดการฟิลด์ที่กำหนดเอง

เส้นทางการ สมัคร เรียกใช้ฟังก์ชัน addUserToList ฟังก์ชันนี้ถูกเรียกภายในเส้นทาง เพื่อให้เราสามารถส่งสถานะหลังจากกระบวนการเสร็จสิ้นภายในการโทรกลับ สิ่งแรกที่เราทำในฟังก์ชันนี้คือสร้างออบเจ็กต์ที่มีฟิลด์แบบกำหนดเองทั้งหมดที่ฟอร์มมี และอาร์เรย์ที่มีฟิลด์แบบกำหนดเองที่ไม่ได้จัดเตรียมไว้โดยค่าเริ่มต้นสำหรับผู้ติดต่อทั้งหมด (อีเมล, ชื่อ, นามสกุล)

คำขอ POST ที่เรียกใช้โดย webhooks ของเหตุการณ์ประกอบด้วยข้อมูลที่เกี่ยวข้องกับอีเมลทั้งหมด รวมถึงส่วนหัว หัวเรื่อง ข้อความ ฯลฯ ของอีเมล สิ่งที่เราสนใจคืออาร์กิวเมนต์ที่กำหนดเองซึ่งได้รับมา ซึ่งบรรจุเป็นวัตถุภายในองค์ประกอบแรก ของหน่วยงานที่ร้องขอ อย่างไรก็ตาม ออบเจ็กต์ยังมีฟิลด์ต่างๆ มากมายที่เราไม่ต้องการสำหรับกระบวนการจัดการฟิลด์ที่กำหนดเอง ซึ่งเราใส่ไว้ในอาร์เรย์ที่ชื่อว่า dissolveFields

จากนั้นเราจะวนรอบอาร์กิวเมนต์ที่กำหนดเองเพื่อสร้างวัตถุและอาร์เรย์ด้วยฟิลด์ที่กำหนดเองที่กล่าวถึงก่อนหน้านี้ เราจะส่งออบเจ็กต์ฟิลด์ที่กำหนดเองแบบเต็มไปยังเนื้อหาในกระบวนการสร้างผู้ติดต่อ แต่จะไม่จนกว่าเราจะเพิ่มฟิลด์ที่กำหนดเองตามความจำเป็นในขั้นตอนก่อนหน้า

จากนั้นเราจะเรียกใช้ฟังก์ชัน checkAndAddCustomFields ด้วยพารามิเตอร์สองตัว ได้แก่ อาร์เรย์ฟิลด์ที่กำหนดเองและการเรียกกลับ ซึ่งเป็นที่ที่เราจะดูแลการสร้างผู้ติดต่อ สิ่งสำคัญคือต้องตรวจสอบและเพิ่มฟิลด์ที่กำหนดเองก่อน เนื่องจากปลายทางจะเกิดข้อผิดพลาดหากคุณพยายามสร้างผู้ติดต่อด้วยฟิลด์แบบกำหนดเองที่ไม่มีอยู่

ฟังก์ชัน checkAndAddCustomFields จะทำการร้องขอ GET ไปยังจุดปลาย /v3/contactdb/custom_fields เพื่อดึงข้อมูลฟิลด์ที่มีอยู่ของฐานข้อมูลผู้ติดต่อ จากนั้นจะเปรียบเทียบรายการของฟิลด์ที่กำหนดเองที่มีอยู่กับรายการฟิลด์ที่ส่งซึ่งถูกส่งผ่านเป็นพารามิเตอร์ และหากมีฟิลด์ที่ส่งซึ่งไม่รวมอยู่ในรายการฟิลด์แบบกำหนดเองที่มีอยู่ ฟิลด์ใหม่เหล่านั้นจะถูกเพิ่มลงในอาร์เรย์ fieldToCreate . หากไม่มีฟิลด์ที่จะสร้าง ฟังก์ชันเรียกกลับจะถูกเรียก อย่างไรก็ตาม หากมีฟิลด์ใดๆ ที่จะสร้าง เราจะทำการร้องขอ POST ไปยังปลายทาง /v3/contactdb/custom_fields สำหรับแต่ละฟิลด์แบบกำหนดเองใหม่ที่จะถูกสร้างขึ้น

การสร้างผู้ติดต่อใหม่

เมื่อสร้างฟิลด์ที่กำหนดเองแล้ว เราจะสร้างผู้ติดต่อใหม่โดยส่งคำขอ POST ไปยังปลายทาง /v3/contactdb/recipients โดยส่งผ่านฟิลด์ที่กำหนดเองเป็นเนื้อหาไปยังคำขอ จากนั้นเราจะตรวจสอบว่าลูกค้า SendGrid เลือกที่จะเพิ่มผู้ใช้ในกลุ่มรายการที่กำหนดและเพิ่มลงในกลุ่มที่กำหนดหรือไม่ หากเป็นกรณีนี้ การตอบสนองต่อคำขอ API การสร้างผู้ติดต่อจะรวม ID ผู้ติดต่อของผู้ติดต่อที่สร้างขึ้นใหม่เป็นอาร์เรย์ที่เรียกว่า fixed_recipients โดยใช้ ID ผู้ติดต่อที่ให้มาในการตอบกลับและ ID รายการที่ลูกค้า SendGrid ให้มา จากนั้นเราจะส่งคำขอ POST ไปยัง ปลายทาง /v3/contactdb/lists/{listId}/recipients/{contactID}